<template>
  <div>
    <el-select
      v-show="false"
      v-model="ExpandedNum"
      @change="handleExpandNumChange"
      placeholder="选择展开级别"
      size="mini"
      style="width: 100px; left: 0px"
    >
      <el-option label="不展开" :value="0"></el-option>
      <el-option label="展开1" :value="1"></el-option>
      <el-option label="展开2" :value="2"></el-option>
      <el-option label="展开3" :value="3"></el-option>
    </el-select>
    <u-table
    stripe
      class="xshou"
      ref="plTreeTable"
      header-cell-class-name="table_header"
      fixed-columns-roll
      highlight-current-row
      :data="tableData"
      :row-height="rowHeight"
      :height="tabHeight"
      :treeConfig="{
        children: 'children',
        iconClose: 'el-icon-arrow-right',
        iconOpen: 'el-icon-arrow-down',
        expandAll: true,
      }"
      @toggle-tree-expand="toggleTreeExpand"
      use-virtual
      row-id="id"
      border
    >
      <u-table-column
        prop="name" 
        :label="typedata"
        :treeNode="true"
        :showOverflowTooltip="true"
        :show-overflow-tooltip="true"
        min-width="260"
      ></u-table-column>
      <u-table-column
        align="center" 
        prop="voltageLevel"
        label="电压等级"
        min-width="120"
      >
        <template slot-scope="scope">
          <span
            v-if="scope.row.voltageLevel == null"
            type="primary"
            size="small"
            >/</span
          >
          <span
            v-if="scope.row.voltageLevel != null"
            type="primary"
            size="small"
            >{{ scope.row.voltageLevel }}</span
          >
        </template>
      </u-table-column>
      <u-table-column 
        align="center" 
        prop="networkParam"
        label="网络参数"
        min-width="160"
      >
        <template slot-scope="scope">
          <span
            v-if="scope.row.networkParam == null"
            type="primary"
            size="small"
            >/</span
          >
          <span
            v-if="scope.row.networkParam != null"
            type="primary"
            size="small"
            >{{ scope.row.networkParam }}</span
          >
        </template>
      </u-table-column>
      <u-table-column
        align="center" 
        prop="lineName"
        label="监测点名称"
        :show-overflow-tooltip="true"
        min-width="120"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.lineName == null" type="primary" size="small"
            >/</span
          >
          <span v-if="scope.row.lineName != null" type="primary" size="small">{{
            scope.row.lineName
          }}</span>
        </template>
      </u-table-column>
      <u-table-column
        align="center" 
        prop="factoryName"
        label="厂家"
        min-width="90"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.factoryName == null" type="primary" size="small"
            >/</span
          >
          <span
            v-if="scope.row.factoryName != null"
            type="primary"
            size="small"
            >{{ scope.row.factoryName }}</span
          >
        </template>
      </u-table-column>
      <u-table-column
        align="center" 
        prop="harmonicVoltage"
        label="谐波电压(%)" 
        min-width="90"
      >
        <template slot-scope="scope">
          <span
            v-if="scope.row.harmonicVoltage == 3.14159"
            type="primary"
            size="small"
            >暂无数据</span
          >
          <span
            v-if="scope.row.harmonicVoltage != 3.14159"
            type="primary"
            size="small"
            >{{ scope.row.harmonicVoltage }}</span
          >
        </template>
      </u-table-column>
      <u-table-column
        align="center" 
        prop="voltageOffset"
        label="电压偏差(%)" 
        min-width="90"
      >
        <template slot-scope="scope">
          <span
            v-if="scope.row.voltageOffset == 3.14159"
            type="primary"
            size="small"
            >暂无数据</span
          >
          <span
            v-if="scope.row.voltageOffset != 3.14159"
            type="primary"
            size="small"
            >{{ scope.row.voltageOffset }}</span
          >
        </template>
      </u-table-column>
      <u-table-column
        align="center" 
        prop="voltageUnbalance"
        label="三相电压不平衡度(%)" 
        min-width="120"
      >
        <template slot-scope="scope">
          <span
            v-if="scope.row.voltageUnbalance == 3.14159"
            type="primary"
            size="small"
            >暂无数据</span
          >
          <span
            v-if="scope.row.voltageUnbalance != 3.14159"
            type="primary"
            size="small"
            >{{ scope.row.voltageUnbalance }}</span
          >
        </template>
      </u-table-column>
      <u-table-column
        align="center" 
        prop="interHarmonic"
        label="间谐波电压含有率(%)" 
        min-width="120"
      >
        <template slot-scope="scope">
          <span
            v-if="scope.row.interHarmonic == 3.14159"
            type="primary"
            size="small"
            >暂无数据</span
          >
          <span
            v-if="scope.row.interHarmonic != 3.14159"
            type="primary"
            size="small"
            >{{ scope.row.interHarmonic }}</span
          >
        </template>
      </u-table-column>
      <u-table-column 
        align="center"
        prop="harmonicCurrent"
        label="谐波电流(%)" 
        min-width="90"
      >
        <template slot-scope="scope">
          <span
            v-if="scope.row.harmonicCurrent == 3.14159"
            type="primary"
            size="small"
            >暂无数据</span
          >
          <span
            v-if="scope.row.harmonicCurrent != 3.14159"
            type="primary"
            size="small"
            >{{ scope.row.harmonicCurrent }}</span
          >
        </template>
      </u-table-column>
      <u-table-column 
        align="center"
        prop="negativeCurrent" 
        label="负序电流(%)"
        min-width="90"
      >
        <template slot-scope="scope">
          <span
            v-if="scope.row.negativeCurrent == 3.14159"
            type="primary"
            size="small"
            >暂无数据</span
          >
          <span
            v-if="scope.row.negativeCurrent != 3.14159"
            type="primary"
            size="small"
            >{{ scope.row.negativeCurrent }}</span
          >
        </template>
      </u-table-column>
      <u-table-column
        align="center"
        prop="freqOffset" 
        label="频率偏差(%)" 
        min-width="90"
      >
        <template slot-scope="scope">
          <span
            v-if="scope.row.freqOffset == 3.14159"
            type="primary"
            size="small"
            >暂无数据</span
          >
          <span
            v-if="scope.row.freqOffset != 3.14159"
            type="primary"
            size="small"
            >{{ scope.row.freqOffset }}</span
          >
        </template>
      </u-table-column>
      <u-table-column
        align="center" 
        prop="flicker"
        label="闪变(%)"
        min-width="90" 
      >
        <template slot-scope="scope">
          <span v-if="scope.row.flicker == 3.14159" type="primary" size="small"
            >暂无数据</span
          >
          <span
            v-if="scope.row.flicker != 3.14159"
            type="primary"
            size="small"
            >{{ scope.row.flicker }}</span
          >
        </template>
      </u-table-column>
    </u-table>
    <!-- <pagination :pageData="pageData" @changePageNum="changePageNum" @changePageSize="changePageSize"></pagination> -->
  </div>
</template>
<script>
import { getheight } from "../../assets/commjs/common";
//import pagination from '../components/pagination/index'
import FileSaver from "file-saver";
import XLSX from "xlsx";
import json2csv from "json2csv";
export default {
  computed: {

    // tabHeight() {
    //  // console.log(this.tabHeight1)
    //   return window.sessionStorage.getItem("appheight") - 115;
    // },
  },
  data() {
    return {
      ExpandedNum: 3,
      rowHeight: 20,
      expandID: [],
      search: "",
      typedata: "电网拓扑",
      dydj: true,
      tableheight: undefined,
      pageData: {
        pageNum: 3,
        pageSize: 15,
        total: 100,
      },
      vh: null,
      tabHeight1: 'calc(100vh - 220px)',
      tabHeight: null
    };
  },
  watch: {
    classvalue: function (a, b) {
      if (a == "Power_Network") {
        this.typedata = "电网拓扑";
      } else if (a == "Manufacturer") {
        this.typedata = "终端厂家";
      } else if (a == "Voltage_Level") {
        this.typedata = "电压等级";
      } else if (a == "Load_Type") {
        this.typedata = "干扰源类型";
      }
    },
    tableData: function (a, b) {
      if (a.length > 0) {
        this.tableData = a;
        this.handleExpandNumChange();
      }
    },
  },
  props: {
    classvalue: {
      type: String,
      default: undefined,
    },
    tableData: {
      type: Array,
      default: [],
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    //pagination
  },
  created() {},
  mounted() {
    this.setHeight()
        window.addEventListener('resize', this.setHeight)
    
    this.handleExpandNumChange();
  
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
          this.tabHeight = window.sessionStorage.getItem("appheight") - 115 + "px";
          
        },
    //判断需要展开层级
    handleExpandNumChange() {
      if (this.ExpandedNum > 0) {
        this.setExpandKeys(this.tableData);
      }
    },
    //层级展开递归方法
    setExpandKeys(dataList, n) {
      if (!n) n = 1;
      for (let i = 0; i < dataList.length; i++) {
        if (n <= this.ExpandedNum) {
          //this.expandID=[]
          this.expandID.push(`${dataList[i].id}`);
          if (dataList[i].hasOwnProperty("children")) {
            const children = dataList[i].children;
            this.setExpandKeys(children, n + 1);
          }
        }
      }
    },
    toggleTreeExpand() {},
    // 判断是否IE浏览器
    MyBrowserIsIE() {
      let isIE = false;
      if (
        navigator.userAgent.indexOf("compatible") > -1 &&
        navigator.userAgent.indexOf("MSIE") > -1
      ) {
        // ie浏览器
        isIE = true;
      }
      if (navigator.userAgent.indexOf("Trident") > -1) {
        // edge 浏览器
        isIE = true;
      }
      return isIE;
    },
    //创建a标签下载
    createDownLoadClick(content, fileName) {
      const link = document.createElement("a");
      link.href = encodeURI(content);
      link.download = fileName;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    exporeCSV(rows) {
      try {
        const result = json2csv.parse(rows, {
          // fields: fields,
          excelStrings: true,
        });
        if (this.MyBrowserIsIE()) {
          // IE10以及Edge浏览器
          var BOM = "\uFEFF";
          // 文件转Blob格式
          var csvData = new Blob([BOM + result], { type: "text/csv" });
          navigator.msSaveBlob(csvData, `导出数据.csv`);
        } else {
          let csvContent = "data:text/csv;charset=utf-8,\uFEFF" + result;
          // 非ie 浏览器
          this.createDownLoadClick(csvContent, `导出数据.csv`);
        }
      } catch (err) {
        alert(err);
      }
    },
    exportExcel() {
      /* generate workbook object from table */
      let wb = XLSX.utils.table_to_book(
        document.querySelector("#rebateSetTable")
      );
      /* get binary string as output */
      let wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          "数据表.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined"){}// console.log(e, wbout);
      }
      return wbout;
    }
    
  },
};
</script>
<style lang="scss" scoped>
.xshou {
  cursor: pointer;
}

// ::v-deep.plTableBox .el-table--striped .el-table__body tr.el-table__row--striped td {
//   background-color: $whirt !important;
// }
// ::v-deep.plTableBox .el-table--striped .el-table__body tr.el-table__row--striped.current-row td {
//     background-color: $current-blue !important;
//     color: #fff !important;
// }

// ::v-deep.plTableBox .el-table__fixed::before {
//     height: 0 !important;
// }

// ::v-deep.plTableBox .el-table__fixed::before {
//     background-color: transparent !important;
// }
</style>