
<template>
      <el-card shadow="always" class="common-card-container common-card-container-no-title-bg">
        <div slot="header">
          <span class="large-title">单体电池实时数据</span>
        </div>
      <!--    搜索栏-->
      <div class="select-container">
        <el-form :inline="true">
          <el-form-item label="电池堆">
            <el-select v-model="search.dcd" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
              <el-option :label="item.name" :value="item.id" v-for="(item,index) in dcdOptions" :key="index+'dcdOptions'"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="电池簇">
            <el-select v-model="search.dcc" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
              <el-option :label="item.name" :value="item.id" v-for="(item,index) in dccOptions" :key="index+'dccOptions'"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="warning" @click="onSearch" native-type="button">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="onReset" native-type="button">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div style="margin:30px 0;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
        <!--        四个选择按钮-->
        <el-row style="">
          <el-col :xs="24" :sm="24" :lg="24">
            <el-button-group>
              <el-button v-for="(item,index) in btnList" :key="index+'dtdcBtns'"  type="warning" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
            </el-button-group>
          </el-col>
        </el-row>
        <!--    图表-->
        <el-row style="background:#fff;margin:30px 0;">
          <el-col :xs="24" :sm="24" :lg="24">
            <bar-chart ref="barChart"/>
          </el-col>
        </el-row>
      </div>
    </el-card>
</template>


<script>
import BarChart from './BarChart'
export default {
  name:'DzjkSbjkDtdc',
  components:{BarChart},
  data() {
    return {
      btnList:[
        {name:'电压',id:'dy'},
        {name:'温度',id:'wd'},
        {name:'SOC',id:'soc'},
        {name:'SOH',id:'soh'},
      ],
      activeBtn:'dy',
      loading:false,
      search:{dcd:'',dcc:''},
      dcdOptions:[
        {name:'电池堆1',id:1},
        {name:'电池堆2',id:2},
        {name:'电池堆3',id:3},
      ],
      dccOptions:[
        {name:'电池簇1',id:1},
        {name:'电池簇2',id:2},
      ]
    }
  },
  methods:{
    // 搜索
    onSearch(){
      this.getData()
    },
    // 重置
    onReset(){
      this.search.dcd=''
      this.search.dcc=''
      this.getData()
    },
    // 获取数据
    getData(){
      this.$refs.barChart.chart.showLoading()
      //获取完成后 传入data todo传参
      this.$refs.barChart.setOption()
    },
    changeDataType(id){
      if(id !== this.activeBtn){
        console.log('点击了不同的菜单，更新数据')
        this.activeBtn=id;
      }
    },

  },
  mounted(){
    this.$refs.barChart.initChart()
    this.getData()

  }
}
</script>

<style scoped lang="scss">
.select-container{
  .el-form--inline .el-form-item{
    margin-right: 20px;
  }
}
.activeBtn{
  background-color: #FFF2CB;
  border-color: #FFF2CB;
  color: #666666;
  font-weight: 600;
}
</style>
