<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(' + middleBj + ');'"
      v-show="cardShow"
    >
      <!-- tendencyChart文字标题 -->
      <div class="tendencyChartText" @click="tendencyChartChange()">趋势图</div>
      <div class="cardTitle">
        <div class="tabDropdown">
          <el-scrollbar style="height: 100%">
            <div class="tabDropdownBox">
              <div class="tabDropdownSelect">
                <!-- 第一级 -->
                <el-dropdown @command="handleCommand">
                  <span class="el-dropdown-link">
                    {{ dropdownFirstNmae
                    }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-for="(val, index) in dropdownFirstData"
                      :key="index"
                      :command="index"
                      >{{ val.name }}
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
              <div class="tabDropdownSelect">
                <!-- 第二级 -->
                <el-dropdown @command="handleCommandSecond">
                  <span class="el-dropdown-link">
                    {{ dropdownSecondNmae
                    }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-for="(val, index) in dropdownSecondData"
                      :key="index"
                      :command="index"
                      >{{ val.name }}
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </el-scrollbar>
        </div>
        <div class="iconSvg" @click="changeStatus(false)">
          <svg-icon slot="prefix" icon-class="open" className="svg" />
        </div>
      </div>
      <div class="cardContent">
        <!-- 电缆环流 -->
        <Tablemodule
          v-if="selectType === 'hl'"
          :table-loading="loading"
          :option="hlTableData.column"
          :data="hlTableData.data"
        ></Tablemodule>
        <!-- 红外 -->
        <Tablemodule
          v-else-if="selectType === 'hw'"
          :table-loading="loading"
          :option="hwTableData.column"
          :data="hwTableData.data"
        ></Tablemodule>
        <!-- 局放 -->
        <Tablemodule
          v-else-if="selectType === 'jf'"
          :table-loading="loading"
          :option="jfTableData.column"
          :data="jfTableData.data"
        ></Tablemodule>
        <!-- 电缆沟 -->
        <!-- <Tablemodule
          vv-else-if="selectType === 'jf'"
          :table-loading="loading"
          :option="jfTableData.column"
          :data="jfTableData.data"
        ></Tablemodule> -->
      </div>
    </div>
  </div>
</template>

<script>
import {
  cableCircleControllerTable,
  cableCircleControllerLine,
  InfraredThermographyControllerTable,
  InfraredThermographyControllerLine,
  CablePartialDischargeControllerTable,
  CablePartialDischargeControllerLine,
  getLxType,
  getEqType,
} from "@/api/home/home";
// 左边
import { echartData } from "@/utils/common";
import middleBj from "@/assets/page_mid/middle.png";
import Tablemodule from "@/components/Tablemodule/index";
export default {
  name: "Login",
  components: {
    Tablemodule,
  },
  data() {
    return {
      loading: true,
      // 左边
      middleBj: middleBj,
      //   卡片显示与否
      cardShow: true,
      tabPosition: "bottom",
      //   开关状态
      switchValue: true,
      //   标题内容是否显示
      hideSwitchShow: false,
      oilChromatographyTitle: "",
      pageCardTitle: "",
      dropdownFirstData: [
        {
          name: "暂无数据",
        },
      ],
      dropdownFirstNmae: "",
      dropdownSecondNmae: "环流",
      dropdownSecondData: [
        {
          name: "环流",
          type: "hl",
          id: [],
        },
        // {
        //   name: "电缆沟",
        //   type: "dlg",
        //   id: [],
        // },
        {
          name: "局放",
          type: "jf",
          id: [],
        },
        {
          name: "红外",
          type: "hw",
          id: [],
        },
      ],
      hlTableData: {
        column: [
          {
            label: "位置",
            prop: "location",
          },
          {
            label: "采样时间",
            prop: "dtime",
          },
          {
            label: "电流1(A)",
            prop: "electricit1",
          },
          {
            label: "电流2(A)",
            prop: "electricit2",
          },
          {
            label: "电流3(A)",
            prop: "electricit3",
          },
        ],
        data: [],
      },
      hwTableData: {
        column: [
          {
            label: "位置",
            prop: "location",
          },
          {
            label: "采样时间",
            prop: "dtime",
          },
          {
            label: "最低温度(℃)",
            prop: "mintemp",
          },
          {
            label: "最高温度(℃)",
            prop: "maxtemp",
          },
          {
            label: "平均温度(℃)",
            prop: "avgtemp",
          },
        ],
        data: [],
      },
      jfTableData: {
        column: [
          {
            label: "位置",
            prop: "location",
          },
          {
            label: "采样时间",
            prop: "dtime",
          },
          {
            label: "局放放电量",
            prop: "dischargeCapacity",
          },
          {
            label: "脉冲个数",
            prop: "pulseNum",
          },
          {
            label: "放电相位",
            prop: "DischargePhase",
          },
        ],
        data: [],
      },
      samplingDate: "2021-10-11 15:15:30",
      legendData: [],
      xAxisData: [],
      seriesData: [],
      selectType: "hl",
    };
  },
  created() {
    // 表格数据
    this.init();
    // // 趋势图数据
    // this.tendencyChartData()
  },
  methods: {
    init() {
      getLxType(5)
        .then((response) => {
          const { code, data, msg } = response;
          const arr = [];
          if (code === 200 && data.length !== 0) {
            for (let index = 0; index < data.length; index++) {
              const element = data[index];
              arr.push({
                name: element.zmc,
                id: element.lxid,
              });
            }
            this.dropdownFirstNmae = arr[0].name;
            this.dropdownFirstData = arr;
            this.selectIdFun(data[0].lxid, "1");
          } else {
            this.msgError(msg);
          }
        })
        .catch((err) => {
          this.msgError(err.msg);
        });
    },
    // 第二个下拉框id数据
    selectIdFun(id, type) {
      this.dropdownSecondData.forEach((element) => {
        element.id = [];
      });
      // 默认给被检测设备查询id。表格和echart数据需要
      getEqType(5, id).then((response) => {
        const { code, data, msg } = response;
        if (code === 200 && data.length !== 0) {
          for (let index = 0; index < data.length; index++) {
            const element = data[index];
            if (element.name.indexOf("环流") != -1) {
              this.dropdownSecondData[0].id.push(parseInt(element.id));
            }
            // else if (element.name.indexOf("电缆沟") != -1) {
            //   this.dropdownSecondData[1].id.push(parseInt(element.id));
            // }
            else if (element.name.indexOf("局放") != -1) {
              this.dropdownSecondData[1].id.push(parseInt(element.id));
            } else if (element.name.indexOf("红外") != -1) {
              this.dropdownSecondData[2].id.push(parseInt(element.id));
            }
          }
          // 默认用环流查询
          this.tableTataFun(this.dropdownSecondData[0].id, "hl");
          this.echartDataFun(this.dropdownSecondData[0].id, "hl", type);
        }
      });
    },
    // 表格
    tableTataFun(idArr, type) {
      this.selectType = type;
      this.loading = true;
      let url = cableCircleControllerTable;
      if (type === "hl") {
        url = cableCircleControllerTable;
      } else if (type === "hw") {
        url = InfraredThermographyControllerTable;
      } else if (type === "jf") {
        url = CablePartialDischargeControllerTable;
      }
      if (idArr.length !== 0) {
        url(idArr).then((response) => {
          const { code, data, msg } = response;
          if (code === 200 && data.length !== 0) {
            const dataList = data[0];
            if (type === "hl") {
              this.samplingDate = dataList.dtime;
              this.hlTableData.data = [
                {
                  location: "A相",
                  dtime: dataList.dtime,
                  electricit1: dataList.a1Value,
                  electricit2: dataList.a2Value,
                  electricit3: dataList.a3Value ? dataList.a3Value : "-",
                },
                {
                  location: "B相",
                  dtime: dataList.dtime,
                  electricit1: dataList.b1Value,
                  electricit2: dataList.b2Value,
                  electricit3: dataList.b3Value ? dataList.b3Value : "-",
                },
                {
                  location: "C相",
                  dtime: dataList.dtime,
                  electricit1: dataList.c1Value,
                  electricit2: dataList.c2Value,
                  electricit3: dataList.c3Value ? dataList.c3Value : "-",
                },
              ];
            } else if (type === "hw") {
              this.hwTableData.data = [
                {
                  location: "A相",
                  dtime: dataList.a_capturetime,
                  mintemp: dataList.a_mintemp,
                  maxtemp: dataList.a_maxtemp,
                  avgtemp: dataList.a_avgtemp ? dataList.a_avgtemp : "-",
                },
                {
                  location: "B相",
                  dtime: dataList.b_capturetime,
                  mintemp: dataList.b_mintemp,
                  maxtemp: dataList.b_maxtemp,
                  avgtemp: dataList.b_avgtemp ? dataList.b_avgtemp : "-",
                },
                {
                  location: "C相",
                  dtime: dataList.c_capturetime,
                  mintemp: dataList.c_mintemp,
                  maxtemp: dataList.c_maxtemp,
                  avgtemp: dataList.c_avgtemp ? dataList.c_avgtemp : "-",
                },
              ];
            } else if (type === "jf") {
              this.jfTableData.data = [
                {
                  location: "A相",
                  dtime: dataList.time,
                  dischargeCapacity: dataList.a_PD,
                  pulseNum: dataList.a_phase,
                  DischargePhase: dataList.a_plsnum ? dataList.a_plsnum : "-",
                },
                {
                  location: "B相",
                  dtime: dataList.time,
                  dischargeCapacity: dataList.b_PD,
                  pulseNum: dataList.b_phase,
                  DischargePhase: dataList.b_plsnum ? dataList.b_plsnum : "-",
                },
                {
                  location: "C相",
                  dtime: dataList.time,
                  dischargeCapacity: dataList.c_PD,
                  pulseNum: dataList.c_phase,
                  DischargePhase: dataList.c_plsnum ? dataList.c_plsnum : "-",
                },
              ];
            }
            this.loading = false;
          } else {
            this.loading = false;
            if (type === "hl") {
              this.hlTableData.data = [];
            } else if (type === "hw") {
              this.hwTableData.data = [];
            } else if (type === "jf") {
              this.jfTableData.data = [];
            }
          }
        });
      } else {
        this.loading = false;
        if (type === "hl") {
          this.hlTableData.data = [];
        } else if (type === "hw") {
          this.hwTableData.data = [];
        } else if (type === "jf") {
          this.jfTableData.data = [];
        }
      }
    },
    echartDataFun(idArr, type, way) {
      if (way === "2") {
        this.tendencyChartChange();
      }
      let url = cableCircleControllerLine;
      if (type === "hl") {
        url = cableCircleControllerLine;
      } else if (type === "hw") {
        url = InfraredThermographyControllerLine;
      } else if (type === "jf") {
        url = CablePartialDischargeControllerLine;
      }
      if (idArr.length !== 0) {
        url(idArr).then((response) => {
          const { code, data, msg } = response;
          const arr = [];
          let disposeData = [];
          if (code === 200 && data.length !== 0) {
            if (type === "hl") {
              disposeData = data;
            } else {
              disposeData = this.echartDataClearup(data, type);
            }
            for (let index = 0; index < disposeData.length; index++) {
              const element = disposeData[index];
              this.legendData.push(element.equipment);
              arr.push({
                name: element.equipment,
                data: element.currentVals
                  ? echartData(element.currentVals)
                  : [],
              });
            }
            this.seriesData = arr;
            this.xAxisData = disposeData[0].dtimes;
          } else {
            this.msgError(msg);
          }
        });
      } else {
        this.legendData = [];
        this.xAxisData = [];
        this.seriesData = [];
      }
    },
    // 红外、局方echart数据
    echartDataClearup(arr, type) {
      const data = arr[0];
      let equipment = [];
      if (type === "hw") {
        equipment = [
          {
            equipment: "A相最高温度(℃)",
            currentVals: data.a_maxtemp,
            dtimes: data.a_capturetime,
          },
          {
            equipment: "A相最低温度(℃)",
            currentVals: data.a_mintemp,
            dtimes: data.a_capturetime,
          },
          {
            equipment: "A相最平均温度(℃)",
            currentVals: data.a_avgtemp,
            dtimes: data.a_capturetime,
          },
          {
            equipment: "B相最高温度(℃)",
            currentVals: data.b_maxtemp,
            dtimes: data.b_capturetime,
          },
          {
            equipment: "B相最低温度(℃)",
            currentVals: data.b_mintemp,
            dtimes: data.b_capturetime,
          },
          {
            equipment: "B相最平均温度(℃)",
            currentVals: data.b_avgtemp,
            dtimes: data.b_capturetime,
          },
          {
            equipment: "C相最高温度(℃)",
            currentVals: data.c_maxtemp,
            dtimes: data.c_capturetime,
          },
          {
            equipment: "C相最低温度(℃)",
            currentVals: data.c_mintemp,
            dtimes: data.c_capturetime,
          },
          {
            equipment: "C相最平均温度(℃)",
            currentVals: data.c_avgtemp,
            dtimes: data.c_capturetime,
          },
        ];
      } else if (type === "jf") {
        equipment = [
          {
            equipment: "A相局放放电量(A)",
            currentVals: data.a_PD,
            dtimes: data.time,
          },
          {
            equipment: "A脉冲个数",
            currentVals: data.a_phase,
            dtimes: data.time,
          },
          {
            equipment: "A相放电相位",
            currentVals: data.a_avgtemp,
            dtimes: data.time,
          },
          {
            equipment: "B相局放放电量(A)",
            currentVals: data.b_PD,
            dtimes: data.time,
          },
          {
            equipment: "B脉冲个数",
            currentVals: data.b_phase,
            dtimes: data.time,
          },
          {
            equipment: "B相放电相位",
            currentVals: data.b_avgtemp,
            dtimes: data.time,
          },
          {
            equipment: "C相局放放电量(A)",
            currentVals: data.c_PD,
            dtimes: data.time,
          },
          {
            equipment: "C脉冲个数",
            currentVals: data.c_phase,
            dtimes: data.time,
          },
          {
            equipment: "C相放电相位",
            currentVals: data.c_avgtemp,
            dtimes: data.time,
          },
        ];
      }

      return equipment;
    },
    handleCommand(command) {
      this.selectIdFun(this.dropdownFirstData[command].id, "2");
      this.dropdownFirstNmae = this.dropdownFirstData[command].name;
    },
    handleCommandSecond(command) {
      const list = this.dropdownSecondData[command];
      this.selectType = list.type;
      this.dropdownSecondNmae = list.name;
      this.tableTataFun(list.id, list.type);
      this.echartDataFun(list.id, list.type, "2"); //后面的2，是为了区分首次加载还是选择加载
      // if (list.type !== "dlg"&&list.id.length!==0) {

      // } else {
      //   this.$alert("正在开发中...", "系统提示", {
      //     confirmButtonText: "确定",
      //     callback: (action) => {},
      //   });
      //   return;
      // }
    },
    // 点击开关
    changeStatus: function ($event) {
      this.pageCardTitle=this.dropdownFirstNmae +'-'+ this.dropdownSecondNmae
      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.dropdownFirstNmae + this.dropdownSecondNmae
      );
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "~@/assets/stylesheet/card";
.pageCardTitle {
  background-image: none;
}
.pageCardTitle,
.pageCard .cardTitle {
  height: 45px;
  line-height: 45px;
}
.pageCard {
  // min-height: 256px;
}
.tabDropdown {
  width: 100%;
  height: 45px;
  line-height: 45px;
  overflow: hidden;
}
.tabDropdownBox {
  display: flex;
  flex-flow: row;
  align-content: center;
  .tabDropdownSelect {
    margin-right: 15px;
  }
}
/deep/.el-scrollbar__wrap {
  // margin: 0;
  overflow: hidden;
  margin-bottom: 0;
}
/deep/ .el-table__empty-block {
  padding: 20px 0 !important;
  box-sizing: border-box;
}
</style>