<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.slice(
              (this.currentPage - 1) * this.pageSize,
              (this.currentPage - 1) * this.pageSize + this.pageSize
            )"
      row-key="id"
      id="rebateSetTable"
      class="xshou"
      border
      highlight-current-row
      :height="`${vth}`"
      :style="`height:${vh}`"
      header-cell-class-name="table_header"
      :default-expand-all="false"
      @sort-change="sortchange"
    >
      <!-- <el-table-column align="center" prop="runNo" label="序号" sortable  width="80"></el-table-column> -->
      <el-table-column type="index" align="center" label="序号" width="60">
      </el-table-column>
      <el-table-column
        align="center"
        prop="areaName"
        label="区域"
        sortable
        min-width="120"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="gdName"
        label="地级区"
        sortable
        min-width="100"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="bdName"
        label="供电公司"
        sortable
        min-width="120"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <!-- <el-table-column align="center" prop="zd" label="电压等级" sortable width="170"></el-table-column> -->
      <el-table-column
        align="center"
        prop="manufacturer"
        label="厂家"
        sortable
        min-width="100"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="devName"
        label="终端名称"
        :show-overflow-tooltip="true"
        sortable
        min-width="120"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="ip"
        label="网络参数"
        sortable
        min-width="180"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="loginTime"
        label="投运时间"
        sortable
        min-width="120"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="devType"
        label="终端型号"
        sortable
        min-width="150"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="port"
        label="端口"
        sortable
        min-width="80"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="updateTime"
        label="最新数据"
        sortable
        min-width="180"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="runFlag"
        label="终端状态"
        sortable
        min-width="110"
      >
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.runFlag == '投运'"
            style="background: #339966; color: #fff"
            >投运</el-tag
          >
          <el-tag
            v-if="scope.row.runFlag == '热备用'"
            style="background: #996600; color: #fff"
            >热备用</el-tag
          >
          <el-tag
            v-if="scope.row.runFlag == '停运'"
            style="background: #cc0000; color: #fff"
            >停运</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="comFlag"
        label="通讯状态"
        sortable
        min-width="110"
      >
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.comFlag == '正常'"
            style="color: #339966; font-weight: bold"
            >正常</el-tag
          >
          <el-tag
            v-if="scope.row.comFlag == '中断'"
            style="color: #cc0000; font-weight: bold"
            >中断</el-tag
          >
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        prop="onlineEvaluate"
        label="在线率评价"
        sortable
        min-width="120"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.onlineEvaluate == 3.14159">/</span>
          <el-tag
            v-else-if="scope.row.onlineEvaluate <= 0.6"
            style="color: #cc0000; font-weight: bold"
            >差</el-tag
          >
          <el-tag
            v-else-if="
              scope.row.onlineEvaluate > 0.6 && scope.row.onlineEvaluate <= 0.9
            "
            style="color: #ffcc33; font-weight: bold"
            >良</el-tag
          >
          <el-tag
            v-else-if="
              scope.row.onlineEvaluate > 0.9 && scope.row.onlineEvaluate <= 1
            "
            style="color: #339966; font-weight: bold"
            >优</el-tag
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
    background
         align="right"
          class="mt10"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[15, 30, 50, 100]"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.tableData.length"
          >
          </el-pagination>
    <!-- <pagination :pageData="pageData" @changePageNum="changePageNum" @changePageSize="changePageSize"></pagination> -->
  </div>
</template>
<script>
import { getheight } from "../../assets/commjs/common";
import pagination from "@/views/cgy-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 {
      vh: null,
      vth: null,
      search: "",
      typedata: "电网拓扑",
      tableheight: undefined,
      device: 1,
      currentPage:1,
      pageSize:30,
      pageData: {
        pageNum: 3,
        pageSize: 15,
        total: 100,
      },
      //tableData:[]
    };
  },
  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 = "干扰源类型";
      }
    },
  },
  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)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
          this.vh = window.sessionStorage.getItem("appheight") - 55 + "px";
    this.vth = window.sessionStorage.getItem("appheight") - 95;
          
        },
    // 判断是否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;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      // this.getResultsTable();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      // this.getResultsTable();
    },
    sortchange() {},
  },
};
</script>
<style lang="less"  scoped>
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  background-color: #79878769;
}
@import url("../../styles/comStyle.less");
.xshou {
  cursor: pointer;
}
::v-deep .form-item--small.el-form-item {
  margin-bottom: 10px;
}
</style>
<style lang="scss" scoped>
// ::v-deep .el-table.el-table--enable-row-hover .el-table__body tr:hover > td {
//   background: $themeColor-8 !important;
// }
</style>
