<template>
  <div>
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item>
        <Area @click="handleNodeClick" ref="area"></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"
          @click="steady"
          >查询</el-button
        >
        <el-button type="primary" icon="el-icon-download">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table
      stripe
      :data="totalData"
      :height="height"
      border
      v-loading="isLoading"
      style="width: 100%"
      header-cell-class-name="table_header"
    >
      <template v-for="(item, index) in tableHeaderTotal">
        <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>
  </div>
</template>

<script>
import { getSteadyData } from "@/api/steadyStateIndex";
import { dictypeData } from "@/api/user";
import Area from "@/views/components/Area/Area.vue";
import Timeinterval from "../../../components/Timeinterval.vue";
export default {
  components: { Area, Timeinterval },
  data() {
    return {
      form: {},
      height: null,
      isLoading: false,
      //稳态指标超标统计
      tableHeaderTotal: [
        { prop: "company", label: "单位" },
        { prop: "onlineMonitoring", label: "在线监测点数" },
        { prop: "harmonicVoltage", label: "谐波电压超标监测点数" },
        {
          prop: "month",
          label: "当月稳态指标",
          width: 180,
          children: [
            { prop: "overLimitMonitoring", label: "超标监测点数" },
            { prop: "proportion", label: "超标监测点占比(%)" },
            {
              prop: "currentMonthExceedanceDays",
              label: "平均超标天数(天)",
              width: 220,
            },
          ],
        },
        {
          prop: "year",
          label: "当年累计稳态指标",
          width: 220,
          children: [
            {
              prop: "cumulativeOverLimitMonitoring",
              label: "超标监测点数",
              width: 220,
            },
            {
              prop: "currentYearProportion",
              label: "超标监测点占比(%)",
              width: 240,
            },
            {
              prop: "currentYearExceedanceDays",
              label: "平均超标天数(天)",
              width: 220,
            },
          ],
        },
      ],
      totalData: [],
      device: "",
    };
  },
  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);
    },

    //方法调用获取稳态指标超标统计数据接口
    steady() {
      this.isLoading = true;
      //稳态指标超标统计
      getSteadyData().then((res) => {
        this.isLoading = false;
        this.totalData = res.data;
      });
    },
  },
};
</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>