<template>
  <div class="Tables">
    <el-table
      :ref="tableName"
      :data="data"
      :headerData="headerData"
      :border="border"
      :stripe="stripe"
      :size="size"
      :fit="fit"
      :indent="indent"
      :show-header="showHeader"
      :height="height"
      :highlight-current-row="highlightCurrentRow"
      :lazy="lazy"
      :downShiftKey="shiftKey"
      :limitStart="limitStart"
      :row-key="rowKey"
      :default-expand-all="defaultExpandAll"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      v-loading="loading"
      @sort-change="sortChange"
      @select="tableSelect"
      @select-all="tableSelectAll"
      @select-change="SelectChange"
    >
      <el-table-column
        v-for="(item, index) in headerData"
        :column-key="item.value"
        :type="item.type"
        :prop="item.value"
        :label="item.name"
        :width="item.width"
        :align="item.align"
        :fixed="item.fixed"
        :show-overflow-tooltip="showOverflowTooltip"
        :sortable="item.sorTable"
        :formatter="formatter"
        header-align="center"
        :sort-orders="['descending', 'ascending', null]"
        :slotHeader="slotHeader"
        :key="index"
      >
        <!-- <template v-if="item.slot" slot-scope="">
          <Item :dom="item.slot" @change="itemChange"></Item>
        </template> -->
      </el-table-column>
      <slot></slot>
    </el-table>
    <el-pagination
      :total="totalCount"
      :page-size.sync="limitSize"
      :current-page.sync="pageNum"
      background
      layout="prev, pager, next, jumper, ->, total, slot"
      class="tablePagination"
      @next-click="nextClick"
      @prev-click="prevClick"
      @current-change="currentChange"
    >
    </el-pagination>
    <!-- <infoTable
      v-bind="$attrs"
      @checkChange="checkChange"
      @top="top"
      @bottom="bottom"
    ></infoTable> -->
  </div>
</template>

<script>
// import infoTable from "./info.vue";
import Item from "./item.vue";
import dictLabels from "../../assets/languages/dictLabels.js";
import { scrollTo } from "@/utils/scroll-to";
export default {
  name: "Table",
  components: {
    // infoTable,
    Item,
  },
  props: {
    tableName: { type: String, default: "tables" },
    data: {
      type: Array,
      default() {
        return [];
      },
    },
    headerData: {
      type: Array,
      default: null,
    },
    border: {
      type: Boolean,
      default: true,
    },
    stripe: {
      type: Boolean,
      default: true,
    },
    size: {
      type: String,
      default: "mini",
    },
    height: {
      type: String,
      default: "400",
    },
    fit: {
      type: Boolean,
      default: true,
    },
    indent: {
      type: Number,
      default: 16,
    },
    showHeader: {
      type: Boolean,
      default: true,
    },
    slotHeader: {
      type: Boolean,
      default: true,
    },
    highlightCurrentRow: {
      type: Boolean,
      default: true,
    },
    lazy: {
      type: Boolean,
      default: true,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    hidden: {
      type: Boolean,
      default: false,
    },
    showOverflowTooltip: {
      type: Boolean,
      default: true,
    },
    shiftKey: {
      type: Boolean,
      default: false,
    },
    page: {
      type: Number,
      default: 1,
    },
    limitSize: {
      type: Number,
      default: 20,
    },
    limitStart: {
      type: Number,
      default: 0,
    },
    paginationBackground: {
      type: Boolean,
      default: true,
    },
    pageSize: {
      type: Number,
      default: 20,
    },
    totalCount: {
      type: Number,
      default: 0,
    },
    rowKey: {
      type: String,
      default: "",
    },
    defaultExpandAll: {
      type: Boolean,
      default: false,
    },
  },
  inheritAttrs: false,
  data() {
    return {
      newHeader: [],
      selectTable: [],
      pageNum: 1,
      start: -1,
      // {
      //   type: "selection",
      //   name: "",
      //   value: "",
      //   slot: null,
      //   width: "",
      //   align: "center",
      //   sorTable: false,
      //   fixed:false,
      // },
    };
  },
  created() {
    this.newHeader = this.headerData;
  },
  watch:{
    page(){
      this.pageNum = this.page;
    }
  },
  mounted() {},
  methods: {
    nextClick() {
      this.$emit("currentChange", {
        page: this.pageNum + 1,
        start: this.limitStart + this.limitSize,
      });
      scrollTo(0, 800);
    },
    prevClick() {
      this.$emit("currentChange", {
        page: this.pageNum - 1,
        start: this.limitStart - this.limitSiz,
      });
      scrollTo(0, 800);
    },
    currentChange(val) {
      this.$emit("currentChange", {
        page: val,
        start:  val > 1 ? (val-1) * this.limitSize + 1 : val,
      });
      scrollTo(0, 800);
    },
    tableSelect(selection, row) {
      let end = row.index;
      if (this.shiftKey) {
        const sum = Math.abs(this.start - end);
        const min = Math.min(this.start, end);
        const max = Math.max(this.start, end);
        let i;
        if (this.start === -1 && selection.includes(this.data[row.index])) {
          for (i = 0; i < sum; i++) {
            this.$refs.tables.toggleRowSelection(this.data[i], true);
            this.selectTable.push(this.data[i]);
          }
        } else if (selection.includes(this.data[row.index])) {
          if (!selection.includes(this.data[this.start])) {
            this.$refs.tables.toggleRowSelection(this.data[this.start], true);
            if(this.selectTable.includes(this.data[this.start])){
              this.selectTable.push(this.data[this.start]);
            }
          }
          for (i = min; i <= sum + min; i++) {
            this.$refs.tables.toggleRowSelection(this.data[i], true);
            if(!this.selectTable.includes(this.data[i])){
              this.selectTable.push(this.data[i]);
            } 
          }
        } else if (!selection.includes(this.data[row.index])) {
          this.selectTable.splice(min > 1 ? min - 2 : min, sum + 1);
          for (i = min; i <= max; i++) {
            this.$refs.tables.toggleRowSelection(this.data[i], false);
          }
        }
        this.start = end;
      } else {
        this.start = end;
        if (selection.includes(this.data[end])) {
          this.selectTable = selection;
        } else {
          for (let i = 0; i < this.selectTable.length; i++) {
            if (this.selectTable[i].index == row.index) {
              this.selectTable.splice(i, 1);
            }
          }
        }
      }
      selection = this.selectTable.sort(this.compare('index','ascending'));
      this.$emit("tableSelect", { selection, row });
    },
    tableSelectAll(selection) {
      this.selectTable = selection;
      this.$emit("tableSelectAll", selection);
    },
    SelectChange(selection) {
      this.$emit("SelectChange", selection);
    },
    clearTable() {
      this.selectTable = [];
      this.$refs.tables.clearSelection();
    },
    sortChange({ column, prop, order }) {
      this.$emit("sortChange", { prop: prop, order: order });
    },
    compare(propertyName, sort) {
      return function (obj1, obj2) {
        var value1 = obj1[propertyName];
        var value2 = obj2[propertyName];
        if (typeof value1 === "string" && typeof value2 === "string") {
          const res = value1.localeCompare(value2, "zh");
          return sort === "ascending" ? res : -res;
        } else {
          if (value1 <= value2) {
            return sort === "ascending" ? -1 : 1;
          } else if (value1 > value2) {
            return sort === "ascending" ? 1 : -1;
          }
        }
      };
    },
    formatter(row, column, cellValue, index) {
      if (dictLabels[column.property]) {
        if (dictLabels[column.property][cellValue]) {
          return dictLabels[column.property][cellValue];
        }
      }
      return cellValue;
    },
  },
};
</script>

<style>
.Tables {
  width: 100%;
  margin-top: 20px;
}
.tablePagination {
  margin-top: 40px;
  text-align: right;
}
</style>