<template>
  <div>
    <!-- 过滤筛选: <el-input v-model="search" clearable size="small" style="width: 250px" placeholder="筛选数据"/> -->
    <!-- <el-button @click="exportExcel" style="float:right;margin-bottom:10px" size="small" type="primary">导出Excel文件</el-button> -->

    <el-table
      stripe
      :data="tables"
      style="width: 100%; margin-bottom: 10px"
      row-key="id"
      id="rebateSetTable"
      border
      :height="tableheight + 'px'"
      :header-cell-style="{
        //background:'#5E95E8',
        //color:'#FFFFFF',
        height: '25px',
        padding: '0px',
      }"
      header-cell-class-name="table_header"
      :row-style="{ height: '25px' }"
      :cell-style="{ padding: '0px' }"
      :default-expand-all="false"
      @sort-change="sortchange"
    >
      <el-table-column
        prop="name"
        :label="typedata"
        sortable
        width="120"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="cj"
        label="线监测点数量(个)"
        sortable
        width="170"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="zd"
        label="超标监测点数量(个)"
        sortable
        width="170"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="cs"
        label="超标监测点占比(%)"
        sortable
        width="170"
      ></el-table-column>
      <el-table-column align="center" label="频率偏差超标情况" width="120">
        <el-table-column
          align="center"
          prop="sort"
          label="标点数(天/点)"
          sortable
          width="170"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="sort"
          label="占比（%）"
          sortable
          width="170"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="sort"
          label="平均超标天数（天/点）"
          sortable
          width="210"
        ></el-table-column>
      </el-table-column>
      <el-table-column
        align="center"
        label="电压偏差超标情况"
        sortable
        width="170"
      >
        <el-table-column
          align="center"
          prop="sort"
          label="标点数(天/点)"
          sortable
          width="170"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="sort"
          label="超标占比（%）"
          sortable
          width="170"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="sort"
          label="平均超标天数（天/点）"
          sortable
          width="210"
        ></el-table-column>
      </el-table-column>
      <el-table-column
        align="center"
        label="谐波电压超标情况"
        sortable
        width="200"
      >
        <el-table-column
          align="center"
          prop="sort"
          label="标点数(天/点)"
          sortable
          width="170"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="sort"
          label="超标占比（%）"
          sortable
          width="170"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="sort"
          label="平均超标天数（天/点）"
          sortable
          width="210"
        ></el-table-column>
      </el-table-column>
      <el-table-column
        align="center"
        label="谐波电流超标情况"
        sortable
        width="150"
      >
        <el-table-column
          align="center"
          prop="sort"
          label="标点数(天/点)"
          sortable
          width="170"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="sort"
          label="超标占比（%）"
          sortable
          width="170"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="sort"
          label="平均超标天数（天/点）"
          sortable
          width="210"
        ></el-table-column>
      </el-table-column>
      <el-table-column
        align="center"
        label="三相电压不平衡度超标情况"
        sortable
        width="150"
      >
        <el-table-column
          align="center"
          prop="sort"
          label="标点数(天/点)"
          sortable
          width="170"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="sort"
          label="超标占比（%）"
          sortable
          width="170"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="sort"
          label="平均超标天数（天/点）"
          sortable
          width="210"
        ></el-table-column>
      </el-table-column>
      <el-table-column align="center" label="闪变超标情况" sortable width="180">
        <el-table-column
          align="center"
          prop="sort"
          label="标点数(天/点)"
          sortable
          width="170"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="sort"
          label="超标占比（%）"
          sortable
          width="170"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="sort"
          label="平均超标天数（天/点）"
          sortable
          width="210"
        ></el-table-column>
      </el-table-column>
      <el-table-column
        align="center"
        label="负序电流超标情况"
        sortable
        width="150"
      >
        <el-table-column
          align="center"
          prop="sort"
          label="标点数(天/点)"
          sortable
          width="170"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="sort"
          label="超标占比（%）"
          sortable
          width="170"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="sort"
          label="平均超标天数（天/点）"
          sortable
          width="210"
        ></el-table-column>
      </el-table-column>
      <el-table-column
        align="center"
        label="间谐波电压超标情况"
        sortable
        width="150"
      >
        <el-table-column
          align="center"
          prop="sort"
          label="标点数(天/点)"
          sortable
          width="170"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="sort"
          label="超标占比（%）"
          sortable
          width="170"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="sort"
          label="平均超标天数（天/点）"
          sortable
          width="210"
        ></el-table-column>
      </el-table-column>
    </el-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: {
    // 实时监听表格
    tables: function () {
      const search = this.search;
      if (search) {
        return this.tableData.filter((dataNews) => {
          return Object.keys(dataNews).some((key) => {
            return String(dataNews[key]).toLowerCase().indexOf(search) > -1;
          });
        });
      }
      return this.tableData;
    },
  },
  data() {
    return {
      search: "",
      typedata: "电网拓扑",
      tableheight: undefined,
      pageData: {
        pageNum: 3,
        pageSize: 15,
        total: 100,
      },
      tableData: [],
    };
  },
  watch: {
    classvalue: function (a, b) {
      if (a == 0) {
        this.typedata = "电网拓扑";
      } else if (a == 1) {
        this.typedata = "终端厂家";
      } else if (a == 2) {
        this.typedata = "电压等级";
      } else if (a == 3) {
        this.typedata = "干扰源类型";
      } else if (a == 4) {
        this.typedata = "灿能上报";
      }
    },
  },
  props: {
    type: Number,
    classvalue: undefined,
  },
  components: {
    pagination,
  },
  created() {},
  mounted() {
    //this.tableheight = (getheight()*2.02)
  },
  methods: {
    // 判断是否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;
    },
    changePageNum(data) {
      this.pageData.pageNum = data;
      alert("父组件当前页" + this.pageData.pageNum);
    },
    changePageSize(data) {
      this.pageData.pageSize = data;
      alert("父组件当前条数" + this.pageData.pageSize);
    },
    sortchange() {},
  },
};
</script>
<style scoped>
</style>