<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="3" ref="interval" :timeOptions="timeOptions"></Timeinterval>
      </el-form-item>

      <el-form-item label="变电站名称:">
        <el-select
          v-model="form.Ids"
          clearable
          multiple
          collapse-tags
          placeholder="请选择"
        >
          <el-option
            v-for="item in substationData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          @click="onSubmit"
          class="ml10"
          icon="el-icon-search"
          >查询</el-button
        >
        <el-button type="primary" icon="el-icon-download" @click="exportEvent"
          >导出</el-button
        >
        <!-- <el-button type="primary" icon="el-icon-refresh" @click="Reset">重置</el-button> -->
      </el-form-item>
    </el-form>
    <vxe-table
      :data="
        totalData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      :height="vh"
      border
      stripe
      :row-config="{ isCurrent: true, isHover: true }"
      size="mini"
      ref="SubstationStatistics"
      v-loading="isLoading1"
      style="width: 100%"
      header-cell-class-name="table_header"
    >
      <template v-for="(item, index) in tableHeaderTotal">
        <vxe-table-colgroup
          align="center"
          :field="item.prop"
          :title="item.label"
          :min-width="item.width"
          show-overflow
          :key="index"
        >
          <template v-for="(item, index) in item.children">
            <vxe-table-column
              align="center"
              show-overflow
              :field="item.prop"
              :title="item.label"
              :min-width="item.width"
              :key="index"
            >
              <!-- <template v-for="(item, index) in item.children">
                    <vxe-table-column :field="item.prop" :title="item.label" :key="index" ></vxe-table-column>
                  </template> -->
            </vxe-table-column>
          </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 {
  getPwRStatSubstationOrg,
  getPmsPowerrInfoWithInOrg,
} from "@/api/Statistical-analysis/steadyStateIndicators/steadyStateIndicators";
import Timeinterval from "@/views/components/Timeinterval.vue";
import Area from "@/views/components/Area/Area.vue";
export default {
  components: { Area, Timeinterval },
  data() {
    return {
      vh: undefined,
      date: "",
      input: "",
      height: null,
      item: ["", ""],
      form: {
        endTime: "",
        id: "",
        startTime: "",
        type: 0,
        Ids: [],
      },
      formData: {
        deptIndex: "",
        manufacturer: [],
        monitorObjectType: [],
        monitorState: [],
        statisticalType: {},
        voltageLevel: [],
        upToGrid: "",
      },
      isLoading1: false,
      substationData: [], //变电站名称
      //区域超标统计
      tableHeaderTotal: [
        { prop: "cityName", label: "单位", width: `120px` },
        { prop: "substationName", label: "变电站名称", width: `120px` },
        {
          prop: "effectiveMeasurementAccrued",
          label: "累计有效接入点数",
          width: `140px`,
        },
        {
          label: "平均超标天数",
          children: [
            { prop: "freqAverageOverDay", label: "频率偏差", width: `120px` },
            { prop: "vdevAverageOverDay", label: "电压偏差", width: `120px` },
            { prop: "flickerAverageOverDay", label: "长时闪变", width: `120px` },
            { prop: "vaverageOverDay", label: "谐波电压", width: `120px` },
            { prop: "iaverageOverDay", label: "谐波电流", width: `120px` },
            {
              prop: "inuharmAverageOverDay",
              label: "间谐波电压",
              width: `120px`,
            },
            {
              prop: "unbalanceAverageOverDay",
              label: "三相电压不平衡度",
              width: `140px`,
            },
            { prop: "inegAverageOverDay", label: "负序电流", width: `120px` },
          ],
        },
      ],
      totalData: [],
      device: "",
      currentPage: 1, // 当前页码
      total: undefined, // 总条数
      pageSize: 20, // 每页的数据条数
      timeOptions : [
        { label: "年份", value: 1 },
        { label: "季度", value: 2 },
        { label: "月份", value: 3 },
        // { label: "周", value: 4 },
        // // { label: "自定义", value: 5 },
      ]
    };
  },
  created() {
    this.form.id = JSON.parse(window.sessionStorage.getItem("Info")).deptId;
    this.formData.deptIndex = JSON.parse(
      window.sessionStorage.getItem("Info")
    ).deptId;
  },
  mounted() {
    this.setHeight()
        window.addEventListener('resize', this.setHeight)
  
    this.Obtain();
    this.onSubmit();
  
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
          this.device = window.devicePixelRatio;
    this.vh = window.sessionStorage.getItem("appheight") - 215;
          
        },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.pageSize = val;
      this.onSubmit();
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.onSubmit();
    },
    // transient() {},
    // 表格查询
    onSubmit() {
      this.isLoading1 = true;

        (this.form.type = this.$refs.interval.intervald);
      this.item = this.$refs.interval.timeValue;
      this.form.startTime = this.item[0];
      this.form.endTime = this.item[1];
      // console.log(this.form,'===============================');
      //方法调用获取暂态事件统计数据接口
      getPwRStatSubstationOrg(this.form).then((res) => {
        if (res.data == []) {
          this.total = 0;
        } else {
          this.isLoading1 = false;
          this.totalData = res.data;
          this.total = this.totalData.length;
        }
      });
    },
    // 切换选项
    handleNodeClick(data) {
      // console.log(data);
      this.form.id = data.id;
      this.formData.deptIndex = data.id;
    },
    //获取变电站
    Obtain() {
      this.form.Ids = [];
      getPmsPowerrInfoWithInOrg(this.formData).then((res) => {
        // console.log(res,'=============================');
        // this.substationData=res.data
        // let arr=this.substationData
        // arr=[...new Set(arr)]
        // console.log(arr);
        let obj = {};
        for (var i = 0; i < res.data.length; i++) {
          if (!obj[res.data[i].id]) {
            this.substationData.push(res.data[i]);
            obj[res.data[i].id] = true;
          }
        }
        //console.log(this.substationData, "================");
        this.substationData.forEach((item) => {
          this.form.Ids.push(item.id);
        });
      });
    },
    //重置
    Reset() {
      this.$refs.area.form.valueTitle = "全国";
      this.$refs.interval.intervald = 1;
      this.form.substationName = "";
    },
    //导出
    exportEvent() {
      this.$refs.SubstationStatistics.exportData({
        filename: "export", // 文件名字
        sheetName: "Sheet1",
        type: "xlsx", //导出文件类型 xlsx 和 csv
        useStyle: true,
        data: this.totalData, // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { //   return !(column.$columnIndex === 0 ) //   // 0是复选框 不导出 // }
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../../../../styles/comStyle.less");
</style>
