<template>
  <div style="padding: 0px">
    <el-col :span="24">
      <vxe-table
          :data="domainData"
          :height="vh"
          stripe
          border
          :row-config="{ isCurrent: true, isHover: true }"
          size="mini"
          ref="EventDetails"
          v-loading="isLoading"
          header-cell-class-name="table_header"
          :row-class-name="rowClassName"
        >
          
          <vxe-table-column
            field="gdName"
            title="所属单位"
            align="center"
            min-width="120"
            show-overflow
          ></vxe-table-column>
          <vxe-table-column
            field="lineName"
            title="监测点名称"
            show-overflow
            align="center"
            min-width="120"
          ></vxe-table-column>
          <vxe-table-column
            field="subName"
            title="变电站"
            align="center"
            min-width="120"
            show-overflow
          ></vxe-table-column>
          <vxe-table-column
                field="ip"
                title="网络参数"
                align="center"
                show-overflow
                min-width="120"
               
              ></vxe-table-column>
          <vxe-table-column
                field="eventType"
                title="触发类型"
               
                :formatter="formFilter"
                align="center"
                min-width="120"
              >
              </vxe-table-column>
              <vxe-table-column
                field="advanceReason"
                title="暂降原因"
              
                align="center"
                min-width="120"
              ></vxe-table-column>
          <vxe-table-column
            field="scale"
            title="电压等级"
            align="center"
            show-overflow
            min-width="120"
          ></vxe-table-column>
          <vxe-table-column
            field="startTime"
            title="开始时间"
            align="center"
            show-overflow
            min-width="120"
          ></vxe-table-column>
          <vxe-table-column
            field="duration"
            title="持续时间(s)"
            show-overflow
            align="center"
            min-width="120"
          >
            <template slot-scope="scope">
              {{ scope.row.duration.toFixed(2) }}
            </template>
          </vxe-table-column>
          <vxe-table-column
            field="featureAmplitude"
            title="特征幅值(%)"
            align="center"
            min-width="140"
          >
          <template slot-scope="scope">
              {{ ((scope.row.featureAmplitude)*100).toFixed(2) }}
            </template>
        </vxe-table-column>
        </vxe-table>
    </el-col>
  </div>
</template>
<script>
import { dicData } from "@/assets/commjs/dictypeData";
import {
  getDetailsOfTransientEvents,
  getTransientAnalyseWave,
  getTransientAnalyseWaves,
} from "@/api/Statistical-analysis/transientIndicators/transientIndicators";
import api2 from "@/api/harmonic/harmonic";
export default {
  props: {
    item: {
      type: Object,
      default: null,
    },
    item2: {
      type: Object,
      default: null,
    },
    height: {
      type: Number,
      default: null,
    },
    height2: {
      type: Number,
      default: null,
    },
  },
  watch: {
    height2(a, b) {
      if (a == 24) {
        this.vh = document.getElementById("conmentId").offsetHeight - 50;
        this.queryData();
      } else {
        return;
      }
    },
    height(a, b) {
      if (a == 6 || a == 8 || a == 9 || a == 16) {
        setTimeout(() => {
          let str = document.getElementById("areatransienttable").style.height;
          let strsec = str.split("p");
          let height = parseInt(strsec) - 50;
          this.vh = height+10;
          this.queryData();
        }, 200);
      } else {
        return;
      }
    },
    deep: true,
  },
  data() {
    return {
      isLoading: false,
      vh: null,
      h: 0,
      classificationData: [],
      eventType: [],
      domainData: [],
      time: this.timefamt(),
      total: undefined,
      rowClassName:'',
      formData: {
        statisticalType:null,
        scale:null,
        isType: 0,
        manufacturer:null,
        loadType:null,
        monitorFlag: 2,
        powerFlag: 2,
        pageNum: 1,
        statFlag: true,
        pageSize: 20,
        deptIndex:JSON.parse(window.sessionStorage.getItem('Info')).deptId    
      },
      voltageleveloption:[],
      terminaloption:[],
      interfereoption:[],
      classificationData:[],
      //   classificationData: [],
    };
  },
  created() {
    this.getVoltage();
    this.getManufacturer();
    this.getclassificationData();
    this.getclassificationDatad()
    this.getLoadType();
    this.queryData();
  },
  mounted() {
    setTimeout(() => {
      let str = document.getElementById("areatransienttable").style.height;
      let strsec = str.split("p");
      let height = parseInt(strsec) - 50;
      this.vh = height+10;
    }, 200);
  },
  methods: {
        // 数据过滤
      //过滤
      formFilter(row, column) {
      //console.log(row);
      if (row.column.property == "eventType") {
        // let title = "";
        this.eventType.forEach((item) => {
          if (item.value == row.row.eventType) {
            row.row.depth = item.label;
          }
        });
        // row.row.eventType = title
        return row.row.depth;
      } else {
        return row.row[row.column.property];
      }
    },
    // 获取类型
    getclassificationDatad() {
      //地区特征
      this.eventType = dicData("Event_Statis", []);
    },
    //字典获取数据电压等级
    getVoltage() {
      var code = "Dev_Voltage_Stand";
      this.voltageleveloption = dicData(code, []);
      this.formData.scale = this.voltageleveloption;
    },
   
    //字典获取数据终端厂家
    getManufacturer() {
      var code = "Dev_Manufacturers";
      this.terminaloption = dicData(code, []);
      this.formData.manufacturer = this.terminaloption;
    },
    //字典获取数据干扰源类型
    getLoadType() {
      var code = "Interference_Source";
      this.interfereoption = dicData(code, []);
      this.formData.loadType = this.interfereoption;
    },
    //获取统计类型
    getclassificationData() {
      var code = "Statistical_Type";
      this.classificationData = dicData(code, ["Report_Type"]);
      this.formData.statisticalType = this.classificationData[0];
    },

    //过滤
    formFilter(row, column) {
    //  console.log();
      if (row.column.property == "eventType") {
        // let title = "";
        this.eventType.forEach((item) => {
          if (item.value == row.row.eventType) {
            row.row.depth = item.label;
          }
        });
        // row.row.eventType = title
        return row.row.depth;
      } else {
        return row.row[row.column.property];
      }
    },
    timefamt() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      month = month > 9 ? month : "0" + month;
      day = day < 10 ? "0" + day : day;
      var arr = [];
      var time1 = year + "-" + month + "-01";
      arr.push(time1);
      var time2 = year + "-" + month + "-" + day;
      arr.push(time2);
      return arr;
    },
    queryData() {
      this.formData.searchBeginTime = this.time[0];
      this.formData.searchEndTime = this.time[1];
      var info = window.sessionStorage.getItem("Info");
        info = eval("(" + info + ")");
        this.formData.id =info.deptId;
        api2.getTransientData(this.formData).then((res) => {
        this.domainData = res.data.records;
      });
    },
    handleSizeChange(val) {
      this.formData.pageSize = val;
      this.queryData();
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.foformDatarm.pageNum = val;
      this.queryData();
    },
  },
};
</script>
