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

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

      <el-form-item>
        <el-button
          type="primary"
          class="ml10"
          icon="el-icon-search"
          @click="onSubmit"
          >查询</el-button
        >
        <!-- <el-button
            type="primary"
            class="ml10"
            icon="el-icon-circle-plus-outline"
            >导出</el-button
          > -->
      </el-form-item>
    </el-form>
    <el-table
      stripe
      :data="list.data"
      :height="vh"
      border
      style="width: 100%"
      v-loading="isLoading"
      header-cell-class-name="table_header"
    >
      <template v-for="(item, index) in tableHeaderNetwork">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :key="index"
          :min-width="item.width"
        >
          <template v-for="(item, index) in item.children">
            <el-table-column
              :prop="item.prop"
              :label="item.label"
              :key="index"
              :min-width="item.width"
            ></el-table-column>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <el-pagination
      background
      class="mt10"
      align="right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="form.pageNum"
      :page-sizes="[20, 30, 40, 50, 100]"
      :page-size="form.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="list.total"
    >
    </el-pagination>
  </div>
</template>
  <script>
import { RegionalReports } from "@/api/MonitoringPoint.js";
// import { dictypeData } from "@/api/user";
import Area from "@/views/components/Area/Area.vue";
import Timeinterval from "../../../../components/Timeinterval.vue";
export default {
  components: { Area, Timeinterval },
  props: {},
  data() {
    return {
      form: {
        company: "", //所属单位
        time: "", //时间
        pageNum: 1,
        pageSize: 20,
      },
      vh: undefined,
      isLoading: false,
      //全网水平评价表头
      tableHeaderNetwork: [
        { prop: "company", label: "单位" },
        { prop: "monitoringPoint", label: "监测点总数", width: "100" },
        {
          prop: "",
          label: "当月",
          children: [
            { prop: "monthMonitor", label: "在线监测点", width: "100px" },
            {
              prop: "monthTransientMonitor",
              label: "监测到暂态时间监测点数",
              width: "110px",
            },
            { prop: "monthTransientTimes", label: "暂态事件发生次数" },
            { prop: "monthTransientFrequency", label: "暂态事件发生频次" },
            {
              prop: "monthProportion",
              label: "谐波电流超标监测点占比",
              width: "110px",
            },
            {
              prop: "monthSagMonitor",
              label: "监测到暂降事件监测点数",
              width: "110px",
            },
            { prop: "monthSagTimes", label: "暂降事件发生次数" },
            { prop: "monthSagFrequency", label: "暂降事件发生频次" },
            {
              prop: "monthRiseMonito",
              label: "监测到暂升事件监测点数",
              width: "110px",
            },
            { prop: "monthRisetTimes", label: "暂升事件发生次数" },
            { prop: "monthRiseFrequency", label: "暂升事件发生频次" },
            {
              prop: "monthInterruptMonitor",
              label: "监测到中断事件监测点数",
              width: "110px",
            },
          ],
        },
        {
          prop: "",
          label: "当年",
          children: [
            {
              prop: "yearTransientMonitor",
              label: "累计监测到暂态事件监测点数",
              width: "120px",
            },
            {
              prop: "yearTransientTimes",
              label: "累计暂态事件发生次数",
              width: "110px",
            },
            {
              prop: "yearTransientFrequency",
              label: "累计暂态事件发生频次",
              width: "110px",
            },
            {
              prop: "yearSagMonitor",
              label: "累计监测到暂降事件监测点数",
              width: "120px",
            },
            {
              prop: "yearSagTimes",
              label: "累计暂降事件发生次数",
              width: "110px",
            },
            {
              prop: "yearSagFrequency",
              label: "累计暂降事件发生频次",
              width: "110px",
            },
            {
              prop: "yearRiseMonito",
              label: "累计监测到暂升事件监测点数",
              width: "120px",
            },
            {
              prop: "yearRisetTimes",
              label: "累计暂升事件发生次数",
              width: "110px",
            },
            {
              prop: "yearRiseFrequency",
              label: "累计暂升事件发生频次",
              width: "110px",
            },
          ],
        },
      ],
      //所属单位数据数据

      CompanyList: [],
      list: [],
    };
  },
  created() {
    //  this.dictionaries()
    this.onSubmit();
  },
  mounted() {
    
    this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
          this.vh = window.sessionStorage.getItem("appheight") - 220;
          
        },
    // 字典表
    // dictionaries() {
    //   dictypeData().then(res => {
    //     res.data.forEach(item => {
    //       if (item.name == "单位") {
    //         this.CompanyList = item.children;
    //       }
    //     });
    //   });
    // },
    // 切换选项
    handleNodeClick(data) {
      // console.log(data);
    },
    // 查询
    onSubmit() {
      this.isLoading = true;
      RegionalReports(this.form).then((res) => {
        this.list = res;
        this.isLoading = false;
      });
    }, //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.form.pageSize = val;
      this.onSubmit();
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.form.pageNum = val;
      this.onSubmit();
    },
  },

  computed: {},

  watch: {},
};
</script>
  <style lang="less" scoped>
@import url("../../../../../styles/comStyle.less");
// ::v-deep .el-form-item {
//   margin-bottom: 0;
//   }
</style>
  