<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" @tab-click="handleChangeChart">
            <el-tab-pane label="1#"></el-tab-pane>
            <el-tab-pane label="2#"></el-tab-pane>
            <el-tab-pane label="3#"></el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { oilChromaControllerTable,oilChromaControllerLine } from "@/api/home/home";
// 左边
import clamp from "@/assets/page_left/clamp.png";
// 引入table组件
import Tablemodule from "@/components/Tablemodule/index";
export default {
  name: "Login",
  components: {
    Tablemodule,
  },
  data() {
    return {
      loading: false,
      // 左边
      clamp: clamp,
      //   卡片显示与否
      cardShow: true,
      tabPosition: "bottom",
      //   开关状态
      switchValue: true,
      //   标题内容是否显示
      hideSwitchShow: false,
      tendencyChartTitle: "1#主变  绕阻测温",
      pageCardTitle: "1#主变  绕阻测温",
      tableData: {
        column: [
          {
            label: "相位",
            prop: "nodeCode",
          },
          {
            label: "温度",
            prop: "nodeCode",
          },
        ],
        data: [],
      },
      samplingDate: "",
      egendData:[],
      xAxisData:[],
      seriesData:[]
    };
  },
 created() {
    // 表格数据
    // this.tableDatas()
    // // 趋势图数据
    // this.tendencyChartData()
  },
  methods: {
    tableDatas() {
      oilChromaControllerTable('237')
        .then((response) => {
          const { code, data, msg } = response;
          this.loading = false;
          if (code === 200) {
            this.data = data.records;
          } else {
            this.msgError(msg);
          }
        })
        .catch((err) => {
          this.msgError(err.msg);
        });
    },
    tendencyChartData() {
      oilChromaControllerLine('237')
        .then((response) => {
          const { code, data, msg } = response;
          this.loading = false;
          if (code === 200) {
            for (let index = 0; index < data.length; index++) {
              const element = data[index];
              this.legendData.push(element.gas)
              this.seriesData.push({
                name:element.gas,
                data:element.currentVals
              })
            }
            this.xAxisData=data[0].dtimes
          } else {
            this.msgError(msg);
          }
        })
        .catch((err) => {
          this.msgError(err.msg);
        });
    },
    // 点击标签页
    handleChangeChart(tab) {
      this.tendencyChartTitle = tab.label + "主变 绕阻测温";
      this.pageCardTitle= tab.label + "主变 绕阻测温";
      this.tendencyChartChange()
    },
    // 点击开关
    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.tendencyChartTitle
      );
      // let legendData = ["A项 温度"];
      // let xAxisData = ["10-01", "10-02", "10-03", "10-04", "10-05", "10-06"];
      // let seriesData = [
      //   { name: "A项 温度", data: [10, 25, 2, 100, 59, 78, 36] },
      // ];
      // this.$emit("dataDispose", unit, this.legendData, this.xAxisData, this.seriesData,this.tendencyChartTitle);
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.backgroundTitle{
  margin-bottom: 0px!important
}
.backgroundTitle{
  margin-bottom: 0!important;
}
@import "~@/assets/stylesheet/card";
// 开光样式
/deep/ .el-table__empty-block {
  padding: 30px 0!important;
  box-sizing: border-box;
}
@media screen and (max-width: 1440px){
  .pageCard .cardContent{
    padding-bottom:15px
  }
}
</style>