<template>
  <div class="table-container">
    <el-table :data="data"
              :ref="refs"
              stripe
              fit
              header-cell-class-name="custom-header" @select="handleSelectItem" @select-all="handleSelectAll" @selection-change="handleSelectionChange" @expand-change="expandChange">
      <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'
        },
        params: {
            type: Object,
            default: function () {
                return {};
            }
        },
        total: {},
        getList: {
            type: Function
        },
        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: {
        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);
        },
        handleSizeChange (val) {
            this.params.rows = val;
            this.getList();
        }
    }
};
</script>
