<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <Area @click="handleNodeClick" ref="area"></Area>
      </el-form-item>
      <el-form-item label="电压等级:">
        <el-select
          v-model.trim="valueLevel"
          placeholder="请选择"
          clearable
          multiple
          style="width: 225px"
          collapse-tags
        >
          <el-option
            v-for="item in level"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <Timeinterval @time="time"></Timeinterval>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          class="ml10"
          icon="el-icon-search"
          @click="searchFn"
          >查询</el-button
        >
        <el-button type="primary" icon="el-icon-download" @click="dc"
          >导出</el-button
        >
      </el-form-item>
    </el-form>
    <vxe-table
      size="mini"
      :row-config="{ isCurrent: true, isHover: true }"
      border
      stripe
      :data="
        networklevelData.slice(
          (currentPage - 1) * pageSize,
          currentPage * pageSize
        )
      "
      :height="height"
      ref="classification111"
      style="width: 100%"
      v-loading="isLoading"
      header-cell-class-name="table_header"
    >
      <template v-for="(item, index) in tableHeaderNetworklevel">
        <vxe-table-colgroup
          :field="item.prop"
          :title="item.label"
          :min-width="item.width"
          :key="index"
          align="center"
        >
          <template v-for="(val, index) in item.children">
            <vxe-table-colgroup
              align="center"
              :field="val.prop"
              :title="val.label"
              :min-width="val.width"
              :key="index"
            ></vxe-table-colgroup>
          </template>
        </vxe-table-colgroup>
      </template>
    </vxe-table>
    <el-pagination
      background
      align="right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[20, 30, 40, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="mt10"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getPwRMpBenchmarkLevelList } from "@/api/Distributionnetwork-analysis/BaselineLevelAssessment/BaselineLevelAssessment.js";
import { dicData } from "@/assets/commjs/dictypeData";
import Area from "@/views/components/Area/Area.vue";
import Timeinterval from "./Timeslot.vue";
export default {
  components: { Area, Timeinterval },
  data() {
    return {
      id: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
      kai: true,
      start: "",
      end: "",
      vh: "",
      valueLevel: [],
      height: null,
      isLoading: false,
      //电压等级数据
      level: [],
      //全网水平评价表头
      tableHeaderNetworklevel: [
        { prop: "orgName", label: "单位", width: 160 },
        { prop: "voltageLevel", label: "电压等级(kV)", width: 120 },
        {
          prop: "voltage",
          label: "电压",
          children: [
            { prop: "voltageAvg", label: "均值(V)", width: 100 },
            { prop: "vthdSd", label: "标准差(V)", width: 100 },
          ],
        },
        {
          prop: "threePhase",
          label: "三相不平衡度",
          children: [
            { prop: "unbalanceAvg", label: "均值(%)", width: 100 },
            { prop: "unbalanceSd", label: "标准差(%)", width: 100 },
          ],
        },
        {
          prop: "harmonic ",
          label: "电压总谐波畸变率()",
          children: [
            { prop: "vthdAvg", label: "均值(%)", width: 100 },
            { prop: "vthdSd", label: "标准差(%)", width: 100 },
          ],
        },
        {
          prop: "longTime ",
          label: "长时闪变",
          children: [
            { prop: "flickerAvg", label: "均值", width: 100 },
            { prop: "flickerSd", label: "标准差", width: 100 },
          ],
        },
      ],
      networklevelData: [],
      device: "",
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 20, // 每页的数据条数
    };
  },
  created() {
    //   this.dictionaries();
    this.getclassificationData();
  },
  mounted() {
    // console.log(this.level,'uiuiui')
   
    this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
          this.device = window.devicePixelRatio;
    this.height = window.sessionStorage.getItem("appheight") - 170;
          
        },
    dc() {
      this.$refs.classification111.exportData({
        filename: "export1", // 文件名字
        sheetName: "Sheet1",
        type: "xlsx", //导出文件类型 xlsx 和 csv
        useStyle: true,
        isFooter: true,
        data: this.networklevelData.slice(
          (this.currentPage - 1) * this.pageSize,
          this.currentPage * this.pageSize
        ),
      });
    },
    time(val) {
      this.start = val[0];
      this.end = val[1];
      this.type = val[2];
      if (this.kai) {
        this.networklevel();
      }
    },
    //获取电压等级
    getclassificationData() {
      // debugger
      var code = "Dev_Voltage";
      this.classificationData = dicData(code, ["Load_Type"]);
      this.level = this.classificationData;
      this.level.forEach((i) => {
        this.valueLevel.push(i.id);
      });
    },
    // 切换选项
    handleNodeClick(data) {
      this.id = data.id;
    },

    //获取数据
    networklevel() {
      this.kai = false;
      this.isLoading = true;
      getPwRMpBenchmarkLevelList({
        type: this.type,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        endTime: this.end,
        startTime: this.start,
        id: this.id,
        voltageLevel: this.valueLevel.toString(),
      }).then((res) => {
        if (res.code == "A0001") {
          this.isLoading = false;
          this.networklevelData = [];
          this.total = 0;
        } else {
          this.total = res.data.total;
          res.data.records.forEach((e) => {
            this.classificationData.forEach((i) => {
              if (e.voltageLevel == i.id) {
                e.voltageLevel = i.label;
              }
            });
          });

          this.isLoading = false;
          this.networklevelData = res.data.records;
        }
      });
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.pageSize = val;
      this.networklevel();
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.networklevel();
    },
    //查询
    searchFn() {
      this.networklevel();
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../../styles/comStyle.less");
</style>
