<template>
  <div>
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item>
        <Area @click="handleNodeClick"></Area>
      </el-form-item>

      <el-form-item label="电压等级:">
        <el-select
          v-model.trim="form.valueLevel"
          placeholder="请选择"
          clearable
          multiple
          collapse-tags
        >
          <el-option
            v-for="item in level"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="监测点类别:">
        <el-select
          v-model.trim="form.valueCategory"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in category"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <Timeinterval :interval="1" ref="interval"></Timeinterval>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" class="ml10" icon="el-icon-search"
          >查询</el-button
        >
        <el-button type="primary" icon="el-icon-download">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table
      stripe
      :data="
        detailedData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      :height="height"
      border
      style="width: 100%"
      v-loading="isLoading"
      :span-method="objectSpanMethod"
      header-cell-class-name="table_header"
      :cell-style="cellstyle"
    >
      <template v-for="(item, index) in tableHeaderDetailed">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :key="index"
          :width="item.width"
          show-overflow-tooltip
        >
          <template v-for="(item, index) in item.children">
            <el-table-column :prop="item.prop" :label="item.label" :key="index">
            </el-table-column>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <el-pagination
      background
      align="right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[9, 18, 36, 72, 144]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="detailedData.length"
      class="mt10"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getDetailedData } from "@/api/steadyStateIndex";
import { dicData } from "@/assets/commjs/dictypeData";
import Area from "@/views/components/Area/Area.vue";
import Timeinterval from "@/views/components/Timeinterval.vue";
export default {
  components: { Area, Timeinterval },
  data() {
    return {
      form: {
        valueLevel: "",
        valueCategory: "",
        date: "",
      },
      height: null,
      isLoading: false,
      //电压等级数据
      level: [],
      //监测点类别数据
      category: [
        {
          value: "选项1",
          label: "Ⅰ类监测点",
        },
        {
          value: "选项2",
          label: "Ⅱ类监测点",
        },
        {
          value: "选项3",
          label: "Ⅲ类监测点",
        },
      ],
      //稳态指标超标明细表头
      tableHeaderDetailed: [
        { prop: "company", label: "单位", width: 150 },
        { prop: "substation", label: "所属变电站", width: 150 },
        { prop: "stationArea", label: "所属台区", width: 120 },
        { prop: "userName", label: "用户名称" },
        { prop: "monitoringPoint", label: "监测点类别", width: 120 },
        { prop: "voltageLevel", label: "监测点电压等级(kV)", width: 150 },
        { prop: "monitoringName", label: "监测点名称", width: 150 },
        { prop: "exceedanceDays", label: "当月监测点超标天数(天)", width: 180 },
        { prop: "voltageDays", label: "谐波电压超标天数(天)", width: 180 },
        { prop: "currentDays", label: "谐波电流超标天数(天)", width: 180 },
        { prop: "frequencyDays", label: "电压偏差超标天数(天)", width: 180 },
        {
          prop: "threePhaseDays",
          label: "三相电压不平衡超标天数(天)",
          width: 200,
        },
        { prop: "flickerDays", label: "电压闪变超标天数(天)", width: 180 },
        { prop: "negativeDays", label: "负序电流超标天数(天)", width: 180 },
        { prop: "harmonicDays", label: "间谐波电压超标天数(天)", width: 180 },
        {
          prop: "totalDays",
          label: "谐波电压总畸变率超标天数(天)",
          width: 220,
        },
        {
          prop: "voltage",
          label: "谐波电压超标天数(天)",
          children: [
            { prop: "twoVoltage", label: "2次" },
            { prop: "threeVoltage", label: "3次" },
            { prop: "fourVoltage", label: "4次" },
            { prop: "fiveVoltage", label: "5次" },
            { prop: "sixVoltage", label: "6次" },
            { prop: "sevenVoltage", label: "7次" },
            { prop: "eightVoltage", label: "8次" },
            { prop: "nineVoltage", label: "9次" },
            { prop: "tenVoltage", label: "10次" },
            { prop: "elevenVoltage", label: "11次" },
            { prop: "twelveVoltage", label: "12次" },
            { prop: "thirteenVoltage", label: "13次" },
            { prop: "fourteenVoltage", label: "14次" },
            { prop: "fifteenVoltage", label: "15次" },
            { prop: "sixteenVoltage", label: "16次" },
            { prop: "seventeenVoltage", label: "17次" },
            { prop: "eighteenVoltage", label: "18次" },
            { prop: "nineteenVoltage", label: "19次" },
            { prop: "twentyVoltage", label: "20次" },
            { prop: "twentyOneVoltage", label: "21次" },
            { prop: "twentyTwoVoltage", label: "22次" },
            { prop: "twentyThreeVoltage", label: "23次" },
            { prop: "twentyFourVoltage", label: "24次" },
            { prop: "twentyFiveVoltage", label: "25次" },
          ],
        },
        {
          prop: "current",
          label: "谐波电流超标天数(天)",
          children: [
            { prop: "twoCurrent", label: "2次" },
            { prop: "threeCurrent", label: "3次" },
            { prop: "fourCurrent", label: "4次" },
            { prop: "fiveCurrent", label: "5次" },
            { prop: "sixCurrent", label: "6次" },
            { prop: "sevenCurrent", label: "7次" },
            { prop: "eightCurrent", label: "8次" },
            { prop: "nineCurrent", label: "9次" },
            { prop: "tenCurrent", label: "10次" },
            { prop: "elevenCurrent", label: "11次" },
            { prop: "twelveCurrent", label: "12次" },
            { prop: "thirteenCurrent", label: "13次" },
            { prop: "fourteenCurrent", label: "14次" },
            { prop: "fifteenCurrent", label: "15次" },
            { prop: "sixteenCurrent", label: "16次" },
            { prop: "seventeenCurrent", label: "17次" },
            { prop: "eighteenCurrent", label: "18次" },
            { prop: "nineteenCurrent", label: "19次" },
            { prop: "twentyCurrent", label: "20次" },
            { prop: "twentyOneCurrent", label: "21次" },
            { prop: "twentyTwoCurrent", label: "22次" },
            { prop: "twentyThreeCurrent", label: "23次" },
            { prop: "twentyFourCurrent", label: "24次" },
            { prop: "twentyFiveCurrent", label: "25次" },
          ],
        },
        {
          prop: "pointFive",
          label: "间谐波电压电流超标天数(天)",
          children: [
            { prop: "zeroPointFive", label: "0.5次" },
            { prop: "onePointFive", label: "1.5次" },
            { prop: "twoPointFive", label: "2.5次" },
            { prop: "threePointFive", label: "3.5次" },
            { prop: "fourPointFive", label: "4.5次" },
            { prop: "fivePointFive", label: "5.5次" },
            { prop: "sixPointFive", label: "6.5次" },
            { prop: "sevenPointFive", label: "7.5次" },
            { prop: "eightPointFive", label: "8.5次" },
            { prop: "ninePointFive", label: "9.5次" },
            { prop: "tenPointFive", label: "10.5次" },
            { prop: "elevenPointFive", label: "11.5次" },
            { prop: "twevelPointFive", label: "12.5次" },
            { prop: "thirteenPointFive", label: "13.5次" },
            { prop: "fourteenPointFive", label: "14.5次" },
            { prop: "fifteenPointFive", label: "15.5次" },
            { prop: "sixteenPointFive", label: "16.5次" },
            { prop: "seventeenPointFive", label: "17.5次" },
            { prop: "eighteenPointFive", label: "18.5次" },
            { prop: "nineteenPointFive", label: "19.5次" },
            { prop: "twentyPointFive", label: "20.5次" },
            { prop: "twentyOnePointFive", label: "21.5次" },
            { prop: "twentyTwoPointFive", label: "22.5次" },
            { prop: "twentyThreePointFive", label: "23.5次" },
          ],
        },
      ],
      detailedData: [],
      device: "",
      currentPage: 1, // 当前
      total: 20, // 总条数
      pageSize: 18, // 每页的数据条数
    };
  },
  created() {
    this.steady();
    this.getclassificationData();
  },
  mounted() {
    this.device = window.devicePixelRatio;
    this.height =
      document.getElementById("app-main-in").offsetHeight - 175 + "px";
  },
  computed: {
    //计算表格高度
    // height(){
    //   return '100vh'- this.$refs.form.offsetHeight +259;
    // }
  },
  methods: {
    //获取统计类型
    getclassificationData() {
      var code = "Dev_Voltage";
      this.classificationData = dicData(code, []);
      this.level = this.classificationData;
    },
    // 切换选项
    handleNodeClick(data) {
      // console.log(data);
    },

    //表格合并
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 3 === 0) {
          return {
            rowspan: 3,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    //方法调用获取稳态指标超标统计数据接口
    steady() {
      this.isLoading = true;
      //稳态指标超标明细
      getDetailedData().then((res) => {
        this.isLoading = false;
        this.detailedData = res.data;
      });
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    cellstyle(row) {
      // console.log(row);
      if (
        row.row.monitoringPoint == "Ⅱ类监测点" ||
        row.row.monitoringPoint == "Ⅲ类监测点"
      ) {
        row.row.substation = "/";
      }
      if (
        row.row.monitoringPoint == "Ⅰ类监测点" ||
        row.row.monitoringPoint == "Ⅲ类监测点"
      ) {
        row.row.stationArea = "/";
      }
      if (
        row.row.monitoringPoint == "Ⅰ类监测点" ||
        row.row.monitoringPoint == "Ⅱ类监测点"
      ) {
        row.row.userName = "/";
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../../../styles/comStyle.less");
/deep/.el-table .cell {
  text-align: center;
}
/deep/.el-tabs--border-card > .el-tabs__content {
  padding: 10px;
}
/deep/.el-form-item--small.el-form-item {
  margin-bottom: 0;
}
</style>
