<template>
  <div style="padding: 0px">
    <el-col :span="24">
      <el-table
        stripe
        :data="disdipTable"
        border
        style="width: 100%"
        :height="vh"
        header-cell-class-name="table_header"
      >
        <el-table-column
          prop="name"
          label="剩余电压"
          align="center"
        ></el-table-column>
        <el-table-column label="持续时间" align="center">
          <el-table-column
            align="center"
            label="20ms"
            prop="twentyMs"
          ></el-table-column>
          <el-table-column
            align="center"
            label="100ms"
            prop="oneHundredMs"
          ></el-table-column>
          <el-table-column
            align="center"
            label="500ms"
            prop="fiveHundredMs"
          ></el-table-column>
          <el-table-column
            align="center"
            label="1s"
            prop="oneS"
          ></el-table-column>
          <el-table-column
            align="center"
            label="2s"
            prop="threeS"
          ></el-table-column>
          <el-table-column
            align="center"
            label="20s"
            prop="twentyS"
          ></el-table-column>
          <el-table-column
            align="center"
            label="60s"
            prop="sixtyS"
          ></el-table-column>
          <el-table-column
            align="center"
            label="180s"
            prop="oneEightyS"
          ></el-table-column>
        </el-table-column>
      </el-table>
    </el-col>
  </div>
</template>
<script>
import { eventDisdip } from "@/api/monitoringpointStatistics/echart";
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("voltagesagtable").style.height;
          let strsec = str.split("p");
          let height = parseInt(strsec) - 50;
          this.vh = height+10;
          this.queryData();
        }, 200);
      } else {
        return;
      }
    },
  },
  data() {
    return {
      disdipTable: [],
      vh: null,
      time: this.timefamt(),
    };
  },
  created() {
    this.queryData();
  },
  mounted() {
    setTimeout(() => {
      let str = document.getElementById("voltagesagtable").style.height;
      let strsec = str.split("p");
      let height = parseInt(strsec) - 50;
      this.vh = height+10;
    }, 200);
  },
  methods: {
    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() {
      let form = {
        lineIndex: "0a5a5f475914c0e08c025e8f00e832f3",
        startTime: this.time[0],
        endTime: this.time[1],
      };
      eventDisdip(form).then((res) => {
        if (res.code == "A0000") {
          this.disdipTable = res.data;
        }
        // this.powerquality()
      });
    },
  },
};
</script>
<style>
.xshou {
  cursor: pointer;
}
</style>
