<template>
  <div class="table-container">
    <el-table :data="data"
              :ref="refs"
              stripe
              fit
              :highlight-current-row="highlightCurrentRow"
              :row-key="rowKey"
              header-cell-class-name="custom-header"
              @select="handleSelectItem"
              @select-all="handleSelectAll"
              @selection-change="handleSelectionChange"
              @expand-change="expandChange"
              @current-change="handleCurrentChange"
              @sort-change="handleSortChange"
    >
      <slot></slot>
    </el-table>
    <slot name="pagination">
      <div class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="getList" :current-page.sync="params.page"
                       :page-sizes="[5,10,20,30,50]"
                       :page-size="params.rows"
                       background
                       layout="total, prev, pager, next, sizes, jumper"
                       :total="total">
        </el-pagination>
      </div>
    </slot>
  </div>
</template>

<script>
export default {
    props: {
        data: {
            type: Array,
            default: function () {
                return [];
            }
        },
        refs: {
            type: String,
            default: 'basicTable'
        },
        rowKey: {
            type: String
        },
        params: {
            type: Object,
            default: function () {
                return {};
            }
        },
        total: {},
        getList: {
            type: Function
        },
        highlightCurrentRow: {
            type: Boolean,
            default: false
        },
        expandChange: {
            type: Function,
            default: function () {
                return {};
            }
        }
    },
    watch: {
        // 处理删除最后一页数据返回上一页的数据回现问题
        'params.page': function () {
            const { data, getList } = this;
            if (data.length === 0 && getList && typeof getList === 'function'){
                this.getList();
            }
        }
    },
    data () {
        return {
        };
    },
    methods: {
        setCurrentRow (row) {
            this.$refs.basicTable.setCurrentRow(row);
        },
        handleSortChange (config) {
            this.$emit('sort-change', config);
        },
        toggleRowSelection (row, selected) {
            this.$refs.basicTable.toggleRowSelection(row, selected);
        },
        handleSelectItem (selection, row) {
            this.$emit('select', selection, row);
        },
        handleSelectAll (selection) {
            this.$emit('select-all', selection);
        },
        handleSelectionChange (selection) {
            this.$emit('selection-change', selection);
        },
        handleCurrentChange (currentRow, oldCurrentRow) {
            this.$emit('current-change', currentRow, oldCurrentRow);
        },
        handleSizeChange (val) {
            this.params.rows = val;
            this.getList();
        }
    }
};
</script>
