<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.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="
        passRateData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      :height="height"
      :span-method="objectSpanMethod"
      border
      style="width: 100%"
      v-loading="isLoading"
      header-cell-class-name="table_header"
    >
      <template v-for="(item, index) in tableHeaderPassRate">
        <el-table-column :prop="item.prop" :label="item.label" :key="index">
          <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="passRateData.length"
      class="mt10"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getPassRateData } from "@/api/steadyStateIndex";
import Area from "@/views/components/Area/Area.vue";
import Timeinterval from "@/views/components/Timeinterval.vue";
export default {
  components: { Area, Timeinterval },
  data() {
    return {
      form: {
        valueCategory: "",
        date: "",
      },
      height: null,
      isLoading: false,
      //监测点类别数据
      category: [
        {
          value: "选项1",
          label: "Ⅰ类监测点",
        },
        {
          value: "选项2",
          label: "Ⅱ类监测点",
        },
        {
          value: "选项3",
          label: "Ⅲ类监测点",
        },
      ],
      //稳态指标合格率
      tableHeaderPassRate: [
        { prop: "company", label: "单位" },
        { prop: "category", label: "监测点类别", width: 180 },
        { prop: "onlineMonitoring", label: "在线监测点数", width: 180 },
        {
          prop: "month",
          label: "当月",
          width: 180,
          children: [
            { prop: "frequency", label: "频率合格率(%)", width: 220 },
            {
              prop: "voltageDeviation",
              label: "电压偏差合格率(%)",
              width: 220,
            },
            { prop: "flicker", label: "闪变合格率(%)", width: 220 },
          ],
        },
        {
          prop: "year",
          label: "当年累计",
          width: 220,
          children: [
            { prop: "frequencyYear", label: "频率合格率(%)", width: 220 },
            {
              prop: "voltageDeviationYear",
              label: "电压偏差合格率(%)",
              width: 240,
            },
            { prop: "flickerYear", label: "闪变合格率(%)", width: 220 },
          ],
        },
      ],
      passRateData: [],
      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 - 170 + "px";
  },
  computed: {},
  methods: {
    // 切换选项
    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;
      //稳态指标超标分类统计
      getPassRateData().then((res) => {
        this.isLoading = false;
        this.passRateData = 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-table--scrollable-y .el-table__body-wrapper {
  overflow-y: hidden;
}
/deep/.el-form-item--small.el-form-item {
  margin-bottom: 0;
}
</style>
