<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"
      v-loading="loading"
      @select="tableSelect"
      @select-all="tableSelectAll"
      @select-change="SelectChange"
    >
      <el-table-column
        v-for="(item, index) in newHeader"
        :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"
        header-align="center"
        :formatter="formatter"
        :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"
      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,
    },
  },
  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;
  },
  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*this.limitSize+1});
      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);
        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])) {
          for (i = this.start + 1; i <= end; i++) {
            this.$refs.tables.toggleRowSelection(this.data[i], true);
            this.selectTable.push(this.data[i]);
          }
        } else if (!selection.includes(this.data[row.index])) {
          this.selectTable.splice(end - 1, sum + 1);
          for (i = end; i <= this.start; i++) {
            this.$refs.tables.toggleRowSelection(this.data[i], false);
          }
        }
        this.start = end;
      } else {
        this.start = end;
        if (selection.includes(this.data[end])) {
          this.selectTable.push(row);
        } 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
      this.$emit("tableSelect", { selection, row });
    },
    tableSelectAll(selection) {
      this.$emit("tableSelectAll", selection);
    },
    SelectChange(selection) {
      this.$emit("SelectChange", selection);
    },
    clearTable(){
      this.selectTable = []
      this.$refs.tables.clearSelection()
    },
    // itemChange(val) {},
    // checkChange(val) {
    //   console.log(val);
    // },
    // top(val) {
    //   console.log(val);
    // },
    // bottom(val) {
    //   console.log(val);
    // },
    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>