<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>
        <Timeinterval @time="time" ref="interval"></Timeinterval>
      </el-form-item>

      <el-form-item label="台区:">
        <el-input
          v-model.trim="valuePlatformArea"
          placeholder="请输入台区"
          clearable
        >
        </el-input>
      </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"
      stripe
      :row-config="{ isCurrent: true, isHover: true }"
      border
      ref="classification222"
      :data="
        arealevelData.slice(
          (currentPage - 1) * pageSize,
          currentPage * pageSize
        )
      "
      :height="height"
      style="width: 100%"
      v-loading="isLoading"
      header-cell-class-name="table_header"
    >
      <template v-for="(item, index) in tableHeaderArealevel">
        <vxe-table-colgroup
          :field="item.prop"
          :title="item.label"
          :key="index"
          align="center"
          min-width="200"
        >
          <template v-for="(item, index) in item.children">
            <vxe-table-colgroup
              :field="item.prop"
              :title="item.label"
              :key="index"
              align="center"
              min-width="90"
            >
              <template v-for="(item, index) in item.children">
                <vxe-table-colgroup
                  :field="item.prop"
                  :title="item.label"
                  :key="index"
                  align="center"
                  min-width="90"
                >
                </vxe-table-colgroup>
              </template>
            </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 { getPwPermeabilityList } from "@/api/Distributionnetwork-analysis/BaselineLevelAssessment/BaselineLevelAssessment.js";
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: "",
      valuePlatformArea: "",
      height: null,
      isLoading: false,
      //台区水平评价表头
      tableHeaderArealevel: [
        { prop: "orgName", label: "单位", width: 180 },
        { prop: "psrName", label: "台区名称", width: 180 },
        {
          prop: "penetrationLevel",
          label: "分布式光伏台区渗透水平(0~25%)",
          children: [
            {
              prop: "zeroVoltage",
              label: "电压水平",
              children: [
                { prop: "voltageAvg25", label: "平均值" },
                { prop: "voltageSd25", label: "标准差" },
              ],
            },
            {
              prop: "zeroThreephase",
              label: "三相电压不平衡水平",
              width: 150,
              children: [
                { prop: "unbalanceAvg25", label: "平均值" },
                { prop: "unbalanceSd25", label: "标准差" },
              ],
            },
            {
              prop: "zeroHarmonic",
              label: "谐波水平",
              children: [
                { prop: "vthdAvg25", label: "平均值" },
                { prop: "vthdSd25", label: "标准差" },
              ],
            },
            {
              prop: "zeroFlicker",
              label: "长时闪变水平",
              children: [
                { prop: "flickerAvg25", label: "平均值" },
                { prop: "flickerSd25", label: "标准差" },
              ],
            },
          ],
        },
        {
          prop: "penetrationLevel",
          label: "分布式光伏台区渗透水平(25~50%)",
          children: [
            {
              prop: "quarterVoltage",
              label: "电压水平",
              children: [
                { prop: "voltageAvg50", label: "平均值" },
                { prop: "voltageSd50", label: "标准差" },
              ],
            },
            {
              prop: "quarterThreephase",
              label: "三相电压不平衡水平",
              width: 150,
              children: [
                { prop: "unbalanceAvg50", label: "平均值" },
                { prop: "unbalanceSd50", label: "标准差" },
              ],
            },
            {
              prop: "quarterHarmonic",
              label: "谐波水平",
              children: [
                { prop: "vthdAvg50", label: "平均值" },
                { prop: "vthdSd50", label: "标准差" },
              ],
            },
            {
              prop: "quarterFlicker",
              label: "长时闪变水平",
              children: [
                { prop: "flickerAvg50", label: "平均值" },
                { prop: "flickerSd50", label: "标准差" },
              ],
            },
          ],
        },
        {
          prop: "penetrationLevel",
          label: "分布式光伏台区渗透水平(50~75%)",
          children: [
            {
              prop: "ahalfVoltage",
              label: "电压水平",
              children: [
                { prop: "voltageAvg75", label: "平均值" },
                { prop: "voltageSd75", label: "标准差" },
              ],
            },
            {
              prop: "ahalfThreephase",
              label: "三相电压不平衡水平",
              width: 150,
              children: [
                { prop: "unbalanceAvg75", label: "平均值" },
                { prop: "unbalanceSd75", label: "标准差" },
              ],
            },
            {
              prop: "ahalfHarmonic",
              label: "谐波水平",
              children: [
                { prop: "vthdAvg75", label: "平均值" },
                { prop: "vthdSd75", label: "标准差" },
              ],
            },
            {
              prop: "ahalfFlicker",
              label: "长时闪变水平",
              children: [
                { prop: "flickerAvg75", label: "平均值" },
                { prop: "flickerSd75", label: "标准差" },
              ],
            },
          ],
        },
        {
          prop: "penetrationLevel",
          label: "分布式光伏台区渗透水平(75~100%)",
          children: [
            {
              prop: "threeFourthsVoltage",
              label: "电压水平",
              children: [
                { prop: "voltageAvg99", label: "平均值" },
                { prop: "voltageSd99", label: "标准差" },
              ],
            },
            {
              prop: "threeFourthsThreephase",
              label: "三相电压不平衡水平",
              width: 150,
              children: [
                { prop: "unbalanceAvg99", label: "平均值" },
                { prop: "unbalanceSd99", label: "标准差" },
              ],
            },
            {
              prop: "threeFourthsHarmonic",
              label: "谐波水平",
              children: [
                { prop: "vthdAvg99", label: "平均值" },
                { prop: "vthdSd99", label: "标准差" },
              ],
            },
            {
              prop: "threeFourthsFlicker",
              label: "长时闪变水平",
              children: [
                { prop: "flickerAvg99", label: "平均值" },
                { prop: "flickerSd99", label: "标准差" },
              ],
            },
          ],
        },
        {
          prop: "penetrationLevel",
          label: "分布式光伏台区渗透水平(100%)",
          children: [
            {
              prop: "hundredVoltage",
              label: "电压水平",
              children: [
                { prop: "voltageAvg100", label: "平均值" },
                { prop: "voltageSd100", label: "标准差" },
              ],
            },
            {
              prop: "hundredThreephase",
              label: "三相电压不平衡水平",
              width: 150,
              children: [
                { prop: "unbalanceAvg100", label: "平均值" },
                { prop: "unbalanceSd100", label: "标准差" },
              ],
            },
            {
              prop: "hundredHarmonic",
              label: "谐波水平",
              children: [
                { prop: "vthdAvg100", label: "平均值" },
                { prop: "vthdSd100", label: "标准差" },
              ],
            },
            {
              prop: "hundredFlicker",
              label: "长时闪变水平",
              children: [
                { prop: "flickerAvg100", label: "平均值" },
                { prop: "flickerSd100", label: "标准差" },
              ],
            },
          ],
        },
      ],
      arealevelData: [],
      device: "",
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 18, // 每页的数据条数
    };
  },
  created() {
    // this.arealevel();
    // this.dictionaries();
  },
  mounted() {
    (this.$refs.interval.timeOptions = [
      // { label: "年份", value: 1 },
      // { label: "季度", value: 2 },
      { label: "月份", value: 3 },
      // { label: "周", value: 4 },
      // // { label: "自定义", value: 5 },
    ]),
      (this.device = window.devicePixelRatio);
    
    this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
          this.height = window.sessionStorage.getItem("appheight") - 170;
          
        },
    dc() {
      this.$refs.classification222.exportData({
        filename: "export1", // 文件名字
        sheetName: "Sheet1",
        type: "xlsx", //导出文件类型 xlsx 和 csv
        useStyle: true,
        isFooter: true,
        data: this.arealevelData.slice(
          (this.currentPage - 1) * this.pageSize,
          this.currentPage * this.pageSize
        ), // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { //   return !(column.$columnIndex === 0 ) //   // 0是复选框 不导出 // }
      });
    },
    time(val) {
      this.start = val[0];
      this.end = val[1];
      this.type = val[2];
      if (this.kai) {
        this.arealevel();
      }
    },
    // 切换选项
    handleNodeClick(data) {
      // console.log(data);
    },
    //获取数据
    arealevel() {
      this.isLoading = true;
      getPwPermeabilityList({
        type: 1,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        endTime: this.end,
        startTime: this.start,
        id: this.id,
        psrName: this.valuePlatformArea.toString(),
      }).then((res) => {
        if (res.code == "A0001") {
          this.isLoading = false;
          this.total = 0;
          this.arealevelData = [];
        } else {
          this.isLoading = false;
          this.total = res.data.total;
          this.arealevelData = res.data.records;
        }
      });
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.pageSize = val;
      this.arealevel();
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.arealevel();
    },
    //查询
    searchFn() {
      this.arealevel();
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../../styles/comStyle.less");
::v-deep .el-table .cell {
  text-align: center;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
  padding: 10px;
}
// ::v-deep .el-form-item--small.el-form-item {
//   margin-bottom: 0;
// }
</style>
