<template>
  <div>
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <!-- <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>
        <Area @click="handleNodeClick"></Area>
      </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="
        classificationData.slice(
          (currentPage - 1) * pageSize,
          currentPage * pageSize
        )
      "
      :height="height"
      :span-method="objectSpanMethod"
      border
      v-loading="isLoading"
      style="width: 100%"
      header-cell-class-name="table_header"
    >
      <template v-for="(item, index) in tableHeaderClassification">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :width="170"
          :key="index"
          :min-width="item.width"
        >
          <template v-for="(item, index) in item.children">
            <el-table-column
              :prop="item.prop"
              :label="item.label"
              :width="120"
              :key="index"
              :min-width="item.width"
            >
            </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="classificationData.length"
      class="mt10"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getClassificationData } from "@/api/steadyStateIndex";
import { dictypeData } from "@/api/user";
import Area from "@/views/components/Area/Area.vue";
import Timeinterval from "@/views/components/Timeinterval.vue";
export default {
  components: { Area, Timeinterval },
  data() {
    return {
      form: {
        valueCategory: "",
      },
      height: null,
      isLoading: false,
      //监测点类别数据
      category: [
        {
          value: "选项1",
          label: "Ⅰ类监测点",
        },
        {
          value: "选项2",
          label: "Ⅱ类监测点",
        },
        {
          value: "选项3",
          label: "Ⅲ类监测点",
        },
      ],
      //稳态指标超标分类统计
      tableHeaderClassification: [
        { prop: "company", label: "单位", width: 80 },
        { prop: "monitoringPoint", label: "监测点类别", width: 120 },
        { prop: "onlineMonitoring", label: "当月在线监测点数", width: 150 },
        { prop: "overMonitoring", label: "当月超标监测点数", width: 150 },
        { prop: "overProportion", label: "当月超标监测点占比(%)", width: 220 },
        {
          prop: "voltage",
          label: "当月谐波电压超标",
          width: 120,
          children: [
            { prop: "voltageProportion", label: "监测点占比(%)", width: 130 },
            { prop: "voltageYearOnYear", label: "监测点同比(%)", width: 190 },
            { prop: "voltageLinkRatio", label: "监测点环比(%)", width: 10 },
            { prop: "voltageDays", label: "平均天数(天)", width: 210 },
          ],
        },
        {
          prop: "current",
          label: "当月谐波电流超标",
          width: 220,
          children: [
            { prop: "currentRatio", label: "监测点占比(%)", width: 220 },
            { prop: "currentYearOnYear", label: "监测点同比(%)", width: 180 },
            { prop: "currentLinkRatio", label: "监测点环比(%)", width: 180 },
            { prop: "currentDays", label: "平均天数(天)", width: 200 },
          ],
        },
        {
          prop: "threePhase",
          label: "当月三相电压不平衡超标",
          width: 250,
          children: [
            {
              prop: "threePhaseProportion",
              label: "监测点占比(%)",
              width: 250,
            },
            {
              prop: "threePhaseYearOnYear",
              label: "监测点同比(%)",
              width: 230,
            },
            { prop: "threePhaseLinkRatio", label: "监测点环比(%)", width: 230 },
            { prop: "threePhaseDays", label: "平均天数(天)", width: 240 },
          ],
        },
        {
          prop: "deviation",
          label: "当月电压偏差超标",
          width: 220,
          children: [
            {
              prop: "percentageOfDeviation",
              label: "监测点占比(%)",
              width: 220,
            },
            { prop: "yearOnYearDeviation", label: "监测点同比(%)", width: 180 },
            {
              prop: "ringRatioOfDeviation",
              label: "监测点环比(%)",
              width: 180,
            },
            { prop: "deviationDays", label: "平均天数(天)", width: 200 },
          ],
        },
        {
          prop: "frequency",
          label: "当月频率偏差超标",
          width: 210,
          children: [
            { prop: "frequencyProportion", label: "监测点占比(%)", width: 210 },
            { prop: "frequencyYearOnYear", label: "监测点同比(%)", width: 180 },
            { prop: "frequencyLinkRatio", label: "监测点环比(%)", width: 180 },
            { prop: "frequencyDays", label: "平均天数(天)", width: 200 },
          ],
        },
        {
          prop: "flicker",
          label: "当月电压闪变超标",
          width: 210,
          children: [
            { prop: "flickerProportion", label: "监测点占比(%)", width: 210 },
            { prop: "flickerYearOnYear", label: "监测点同比(%)", width: 180 },
            { prop: "flickerLinkRatio", label: "监测点环比(%)", width: 180 },
            { prop: "flickerDays", label: "平均天数(天)", width: 200 },
          ],
        },
        {
          prop: "negative",
          label: "当月负序电流超标",
          width: 210,
          children: [
            { prop: "negativeProportion", label: "监测点占比(%)", width: 210 },
            { prop: "negativeYearOnYear", label: "监测点同比(%)", width: 180 },
            { prop: "negativeLinkRatio", label: "监测点环比(%)", width: 180 },
            { prop: "negativeDays", label: "平均天数(天)", width: 200 },
          ],
        },
        {
          prop: "harmonic",
          label: "当月间谐波电压超标",
          width: 220,
          children: [
            { prop: "harmonicRatio", label: "监测点占比(%)", width: 220 },
            { prop: "harmonicYoY", label: "监测点同比(%)", width: 200 },
            { prop: "harmonicLoopRatio", label: "监测点环比(%)", width: 200 },
            { prop: "harmonicDays", label: "平均天数(天)", width: 210 },
          ],
        },
      ],
      classificationData: [],
      device: "",
      currentPage: 1, // 当前
      total: 20, // 总条数
      pageSize: 18, // 每页的数据条数
    };
  },
  created() {
    this.steady();
    // this.dictionaries();
  },
  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: {
    // 字典表
    // dictionaries() {
    //   dictypeData().then(res => {
    //     res.data.forEach(item => {
    //       if (item.name == "单位") {
    //         this.options = item.children;
    //       }
    //     });
    //   });
    // },
    // 切换选项
    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;
      //稳态指标超标分类统计
      getClassificationData().then((res) => {
        this.isLoading = false;
        this.classificationData = res.data;
      });
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
};
</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>
