<template>
  <div class="login">
    <!-- 1#主变 油色谱 -->
    <!-- 标题和内容 -->
    <div class="pageCardTitle" v-show="hideSwitchShow">
      {{ pageCardTitle }}
      <div class="iconSvg closeSvg" @click="changeStatus(true)">
        <svg-icon slot="prefix" icon-class="close" className="svg" />
      </div>
    </div>
    <div
      class="pageCard backgroundTitle"
      :style="'background-image:url(' + clamp + ');'"
      v-show="cardShow"
    >
      <!-- tendencyChart文字标题 -->
      <div class="tendencyChartText" @click="tendencyChartChange()">趋势图</div>
      <!-- 标题和内容 -->
      <div class="cardTitle">
        {{ pageCardTitle }}
        <div class="iconSvg" @click="changeStatus(false)">
          <svg-icon slot="prefix" icon-class="open" className="svg" />
        </div>
      </div>
      <div class="cardContent">
        <Tablemodule
          :table-loading="loading"
          :option="tableData.column"
          :data="tableData.data"
        ></Tablemodule>
        <div class="cardTab">
          <el-tabs :tab-position="tabPosition" v-model="activeName" @tab-click="handleChangeChart">
            <el-tab-pane v-for="(item,index) of ironCoreJoinClampLableData" :key="index" :label="item.lable" :name="item.id"></el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ironCoreJoinClampControllerTable,ironCoreJoinClampControllerLine,getLxId,getEqmId} from "@/api/home/home";
// 左边
import clamp from "@/assets/page_left/clamp.png";
import { echartData } from '@/utils/common'
// 引入table组件
import Tablemodule from "@/components/Tablemodule/index";
export default {
  name: "Login",
  components: {
    Tablemodule,
  },
  data() {
    return {
      activeName:"",
      loading: false,
      // 左边
      clamp: clamp,
      //   卡片显示与否
      cardShow: true,
      tabPosition: "bottom",
      //   开关状态
      switchValue: true,
      //   标题内容是否显示
      hideSwitchShow: false,
      tendencyChartTitle: "1#主变  铁芯/夹件",
      pageCardTitle: "1#主变  铁芯/夹件",
      tableData: {
        column: [
          {
            label: "采样时间",
            prop: "dtime",
            width: "60px",
          },
          {
            label: "铁芯泄露电流(mA)",
            prop: "ironCoreValue",
          },
          {
            label: "夹件泄露电流(mA)",
            prop: "clampValue",
          },
        ],
        data: [],
      },
      samplingDate: "2021-10-11 15:15:30",
      legendData:[],
      xAxisData:[],
      seriesData:[],
      ironCoreJoinClampLableData:[],
      arr:[2,3],
    };
  },
 created() {
    // 表格数据
    this.tableDatas()
    // // 趋势图数据
    // this.tendencyChartData()
  },
  methods: {
    tableDatas() {
      let lableArr=[]
      getLxId(1,this.arr).then((response) => {
        const { code, data, msg } = response;
        if (code === 200) {
          this.activeName=data[0].lxid
          for (let index = 0; index < data.length; index++) {
            const element = data[index];
            if(index<=5){
              lableArr.push({
                lable:index+1+'#',
                id:element.lxid
              })
            }
          }
          this.ironCoreJoinClampLableData=lableArr
          getEqmId(1,this.activeName,this.arr).then((response) => {
            const { code, data, msg } = response;
            if (code === 200) {
              this.ironCoreId = data[0].id
              this.clampId = data[1].id
              this.getData('1')
            } 
          })
        } else {
          this.msgError(msg);
        }
      }).catch((err) => {
        this.msgError(err.msg);
      });
    },
    getData(type) {
      this.loading=true
      ironCoreJoinClampControllerTable({ironCoreId:this.ironCoreId,clampId:this.clampId})
        .then((response) => {
          const { code, data, msg } = response;
          if (code === 200) {
            this.tableData.data = data.splice(2);
          } else {
            this.msgError(msg);
          }
          this.loading=false
        })
        .catch((err) => {
          this.loading=false
          this.msgError(err.msg);
        });
      ironCoreJoinClampControllerLine({ironCoreId:this.ironCoreId,clampId:this.clampId})
        .then((response) => {
          const { code, data, msg } = response;
          if (code === 200) {
            for (let index = 0; index < data.length; index++) {
              const element = data[index];
              this.legendData.push(element.equipment)
              this.seriesData.push({
                name:element.equipment,
                data:echartData(element.currentVals),
              })
            }
            this.xAxisData=data[0].dtimes
            if(type==='2'){
              this.tendencyChartChange();
            }
            
          } else {
            this.msgError(msg);
          }
        })
        .catch((err) => {
          this.msgError(err.msg);
        });
    },
    // 点击标签页
    handleChangeChart(tab) {
      this.seriesData=[]
      this.tendencyChartTitle = tab.label + "主变 铁芯/夹件";
      this.pageCardTitle = tab.label + "主变 铁芯/夹件";
      getEqmId(1,tab.name,this.arr).then((response) => {
        const { code, data, msg } = response;
        if (code === 200) {
          this.ironCoreId = data[0].id
          this.clampId = data[1].id
          this.getData('2')//后面的2，是为了区分首次加载还是选择加载
        } else {
          this.msgError(msg);
        }
      })
    },
    // 点击开关
    changeStatus: function ($event) {
      if (!$event) {
        this.cardShow = false;
        this.hideSwitchShow = true;
        this.switchValue = false;
      } else {
        this.cardShow = true;
        this.hideSwitchShow = false;
        this.switchValue = true;
      }
    },
    tendencyChartChange(type) {
      this.$emit("dataDispose",  this.legendData, this.xAxisData, this.seriesData,this.tendencyChartTitle);
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "~@/assets/stylesheet/card";
/deep/ .el-table__empty-block {
  padding: 20px 0!important;
  box-sizing: border-box;
}
</style>