<template>
  <div style="padding: 0px">
    <el-col :span="24">
      <el-table
              stripe
              :data="tableData"
              border
              class="xshou mt10"
              highlight-current-row
              header-cell-class-name="table_header"
              :header-cell-style="{
                height: '25px',
                padding: '0px',
              }"
              :row-style="{ height: '28px' }"
              :cell-style="{ padding: '0px' }"
              :height="vh"
              :style="'width: 100%'"
            >
              <el-table-column
                align="center"
                prop="name"
                label="名称"
                min-width="60"
              ></el-table-column>
              <el-table-column
                align="center"
                sortable
                prop="onlineCount"
                label="在线监测点数（个）"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.onlineCount == -1">暂无数据</span>
                  <span
                    v-if="
                      scope.row.onlineCount !== -1 &&
                      scope.row.onlineCount !== 0
                    "
                    >{{ scope.row.onlineCount }}</span
                  >
                  <span v-if="scope.row.onlineCount == 0">/</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                sortable
                prop="overLineCount"
                label="超标监测点数（个）"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.overLineCount == -1">暂无数据</span>
                  <span
                    v-if="
                      scope.row.overLineCount !== -1 &&
                      scope.row.overLineCount !== 0
                    "
                    >{{ scope.row.overLineCount }}</span
                  >
                  <span v-if="scope.row.overLineCount == 0">/</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                sortable
                prop="averageOverDay"
                label="平均超标天数（天）"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.averageOverDay == -1">暂无数据</span>
                  <span
                    v-if="
                      scope.row.averageOverDay !== -1 &&
                      scope.row.averageOverDay !== 0
                    "
                    >{{ scope.row.averageOverDay }}</span
                  >
                  <span v-if="scope.row.averageOverDay == 0">/</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                sortable
                prop="ratio"
                label="监测点超标占比(%)"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.ratio == -1">暂无数据</span>
                  <span
                    v-if="scope.row.ratio !== -1 && scope.row.ratio !== 0"
                    >{{ scope.row.ratio }}</span
                  >
                  <span v-if="scope.row.ratio == 0">/</span>
                </template>
              </el-table-column>
            </el-table>
    </el-col>
  </div>
</template>
<script>
import { dicData } from "@/assets/commjs/dictypeData";
import api 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("harmonictable").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,
      tableData:[],
      classificationData: [],
      distributionData: [],
      time: this.timefamt(),
      formData: {
        deptIndex: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
        id: "",
        monitorFlag: 2,
        powerFlag: 2,
        searchBeginTime: "",
        searchEndTime: "",
        statisticalType: [],
      },
      //   classificationData: [],
    };
  },
  created() {
    this.getIndexType();
    this.queryData();
  },
  mounted() {
    setTimeout(() => {
      let str = document.getElementById("harmonictable").style.height;
      let strsec = str.split("p");
      let height = parseInt(strsec) - 50;
      this.vh = height+10;
    }, 200);
  },
  methods: {
    getIndexType() {
      var code = "Indicator_Type";
      this.classificationData = dicData(code, [
        "PLPC",
        "DYPC",
        "SXDYBPHD",
        "CSSB",
        "FXDL",
        "JXBDY",
      ]);
      this.formData.statisticalType = this.classificationData[0];
    },
    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]
      api.deptInfolins(this.formData).then((res) => {
        if (res.code === "A0000") {
          this.tableData = res.data;
        }
      });
    },
  },
};
</script>
