<template>
  <div class="export" style="padding: 0px">
    过了筛选:
    <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-button
      @click="exporeCSV(tables)"
      size="small"
      type="primary"
      style="float: right; margin-right: 10px; margin-bottom: 10px"
      >导出CSV文件</el-button
    >
    <el-table
      stripe
      id="rebateSetTable"
      ref="multipleTable"
      :data="tables"
      border
      :height="mainHeight - 155 + 'px'"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="sort"
        label="序号"
        width="120"
      ></el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="date"
        label="日期"
        width="180"
        column-key="date"
        :filters="date"
        :filter-method="filterHandler"
      ></el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="name2"
        label="名称2"
        width="180"
      ></el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="name3"
        label="名称3"
        width="180"
      ></el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="name4"
        label="名称4"
        width="180"
      ></el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="name5"
        label="名称5"
        width="180"
      ></el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="address"
        label="地址"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="province"
        label="省份"
        width="120"
      ></el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="city"
        label="市区"
        width="120"
      ></el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="address1"
        label="地址2"
        width="300"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="zip"
        label="邮编"
        width="120"
      ></el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="270">
        <template slot-scope="scope">
          <el-button
            @click="handleViewClick(scope.row)"
            type="primary"
            icon="el-icon-search"
            size="mini"
            >查看</el-button
          >
          <el-button
            @click="handleEditClick(scope.row)"
            type="primary"
            size="mini"
            icon="el-icon-edit"
            >编辑</el-button
          >
          <el-button
            @click="handleDeleClick(scope.row)"
            type="danger"
            size="mini"
            icon="el-icon-delete"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
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 {
      mainHeight: undefined,
      mainHeight1: undefined,
      search: "",
      pageData: {
        pageNum: 3,
        pageSize: 15,
        total: 100,
      },
    };
  },
  props: {
    type: Array,
    tableData: undefined,
    type: Array,
    date: undefined,
  },
  mounted() {
    this.mainHeight = window.sessionStorage.getItem("mainHeight");
  },
  methods: {
    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;
    },
    // 判断是否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;
    },
    exporeCSV(rows) {
      console.log(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);
      }
    },
    //创建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);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    filterHandler(value, row, column) {
      console.log(value, row, column);
      const property = column["property"];
      return row[property] === value;
    },
    handleViewClick(data) {
      this.$emit("handleViewClick", data);
    },
    handleEditClick(data) {
      this.$emit("handleEditClick", data);
    },
    handleDeleClick(data) {
      this.$emit("handleDeleClick", data);
    },
  },
};
</script>