<template>
  <div style="padding: 0px">
    <el-col :span="24">
      <el-table
       
        :data="ptableDate"
        align="center"
        :height="vh"
        border
        v-loading="loading"
        element-loading-text="数据加载中"
        header-cell-class-name="table_header"
        :row-style="{ height: '25px' }"
        :cell-style="{ padding: '0px' }"
       
        :span-method="objectOneMethod"
      >
        <el-table-column
          width="80"
          align="center"
          show-overflow-tooltip
          prop="num"
          label="序号"
        ></el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="name"
          label="区域"
        ></el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="lx"
          label="类型"
        ></el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="flx"
          label="分类型"
        ></el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="bdzgs"
          label="变电站个数(个)"
        >
          <template slot-scope="scope">
            <span style="color: blue">{{ scope.row.bdzgs }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="zdgs"
          label="终端个数(个)"
        >
          <template slot-scope="scope">
            <span style="color: #006699">{{ scope.row.zdgs }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="jcdgs"
          label="监测点个数(个)"
        >
          <template slot-scope="scope">
            <span style="color: green">{{ scope.row.jcdgs }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </div>
</template>
<script>
import { dicData } from "@/assets/commjs/dictypeData";
import api from "@/api/Terminal/decive";
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("terminalconts").style.height;
          let strsec = str.split("p");
          let height = parseInt(strsec) - 50;
          this.vh = height+10;
          this.queryData();
        }, 200);
      } else {
        return;
      }
    },
  },
  data() {
    return {
      height: "235px",
      vh:null,
      ptableDate: [],
      loading:false,
      statisticalType: null,
      classificationData: [],
      time: this.timefamt(),
    };
  },
  created() {
    setTimeout(() => {
      let str = document.getElementById("terminalconts").style.height;
      let strsec = str.split("p");
      let height = parseInt(strsec) - 50;
      this.vh = height+10;
    }, 200);
  },
  mounted() {
    var data = window.sessionStorage.getItem("Info");
    data = eval("(" + data + ")");
    this.deptIndex = data.deptId;
    this.getIndexType();
    this.queryData();
  },
  methods: {
    queryData() {
      this.loading = true
      var formData = {
        deptIndex: this.deptIndex,
        id: "",
        monitorFlag: 2,
        powerFlag: 2,
        searchBeginTime: this.time[0],
        searchEndTime: this.time[0],
        statisticalType: this.statisticalType,
      };
      api.getTerminalLedger(formData).then((res) => {
        if (res.code == "A0000") {
          if (res.data.length == 0) {
            this.ptableDate = [];
            this.loading = false
          } else {
            var arrData = [];
            var arr = [];
            var number;
            var tableData = res.data;
            for (var i = 0; i < tableData.length; i++) {
              for (var j = 0; j < tableData[i].list.length; j++) {
                for (var n = 0; n < tableData[i].list[j].list.length; n++) {
                  arr.push(tableData[i].list[j].list[n]);
                  for (var p = 1; p < arr.length + 1; p++) {
                    number = p;
                  }
                  var map = {
                    num: number,
                    name: tableData[i].areaName,
                    lx: tableData[i].list[j].name,
                    flx: tableData[i].list[j].list[n].dicName,
                    bdzgs: tableData[i].list[j].list[n].subCount,
                    zdgs: tableData[i].list[j].list[n].devCount,
                    jcdgs: tableData[i].list[j].list[n].lineCount,
                  };
                  arrData.push(map);
                }

              }
            }
            this.loading = false
          }
        }
        ////console.log(arrData)
        this.ptableDate = arrData;
        // this.powerquality()
      });
    },
    getIndexType() {
      var code = "Indicator_Type";
      this.classificationData = dicData(code, [
        "PLPC",
        "DYPC",
        "SXDYBPHD",
        "CSSB",
        "FXDL",
        "JXBDY",
      ]);
      this.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 today = year + "-" + month + "-" + day;
      arr.push(today);
      return arr;
    },
    //判断计算合并单元格
    objectOneMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        const _row = this.setTable(this.ptableDate).one[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      if (columnIndex === 2) {
        const _row = this.setTable(this.ptableDate).two[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    //设置表格
    setTable(tableData) {
      let spanOneArr = [],
        spanTwoArr = [],
        concatOne = 0,
        concatTwo = 0;
      tableData.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1);
          spanTwoArr.push(1);
        } else {
          if (item.name === tableData[index - 1].name) {
            //第一列需合并相同内容的判断条件
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          }
          if (item.lx === tableData[index - 1].lx) {
            //第二列和需合并相同内容的判断条件
            spanTwoArr[concatTwo] += 1;
            spanTwoArr.push(0);
          } else {
            spanTwoArr.push(1);
            concatTwo = index;
          }
        }
      });
      return {
        one: spanOneArr,
        two: spanTwoArr,
      };
    },
  },
};
</script>
