
<template>
      <el-card v-loading="loading" shadow="always" class="common-card-container common-card-container-no-title-bg">
        <div slot="header">
          <span class="large-title">单体电池实时数据</span>
        </div>
      <!--    搜索栏-->
      <el-form :inline="true" class="select-container">
        <el-form-item label="电池堆">
          <el-select v-model="search.stackId" placeholder="请选择" @change="changeStackId">
            <el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in stackOptions" :key="index+'stackOptions'"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电池簇">
          <el-select v-model="search.clusterId" :no-data-text="!search.stackId && stackOptions.length > 0 ? '请先选择电池堆':'无数据'" placeholder="请选择" :loading="clusterloading" loading-text="正在加载数据">
            <el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in clusterOptions" :key="index+'clusterOptions'"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @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 style="margin:30px 0;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
        <!--    图表-->
        <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'
import {getStackNameList,getClusterNameList} from '@/api/ems/dzjk'
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
export default {
  name:'DzjkSbjkDtdc',
  mixins:[getQuerySiteId],
  components:{BarChart},
  data() {
    return {
      loading:false,
      clusterloading:false,
      search:{stackId:'',clusterId:''},
      stackOptions:[],//{id:'',deviceName:''}
      clusterOptions:[]//{id:'',deviceName:''}
    }
  },
  methods:{
    // 搜索
    onSearch(){
      this.init(false)
    },
    // 重置
    // 清空搜索栏选中数据
    // 清空电池簇列表，保留电池堆列表
    onReset(){
      this.search={stackId:'',clusterId:''}
      this.clusterOptions=[]
      this.init(false)
    },
    changeStackId(val){
      if(val){
        console.log('选择了电池堆，需要获取对应的电池簇',val,this.search.stackId)
        this.search.clusterId=''
        this.getClusterList()
      }
    },
    getStackList(){
      getStackNameList(this.siteId).then(response => {
        this.stackOptions = JSON.parse(JSON.stringify(response?.data || []))
      })
    },
    getClusterList(){
      this.clusterloading =true
      getClusterNameList(this.search.stackId).then(response => {
        this.clusterOptions = JSON.parse(JSON.stringify(response?.data || []))
      }).finally(() => {this.clusterloading =false})
    },
    init(mounted = true){
      this.loading=true;
      // todo 获取单体电池数据
      this.loading=false;
      this.$refs.barChart.setOption()
      // 只有页面初次加载的时候调用电池堆列表，其他情况不需要
      if(mounted){
        this.getStackList()
      }

    }
  },
  mounted(){


  }
}
</script>

