<template>
    <el-card class="box-card" style="margin-top: 12px">
        <div class="table-pagination-container">
            <!-- 数据列表 -->
            <el-table ref="table" :data="data" @selection-change="selectionChange" v-loading="isLoading" current-row-key="aaa" element-loading-text="给我一点时间" :show-header="showHeader" fit highlight-current-row border stripe>
                <el-table-column header-align="center" align="center" type="selection" width="55" v-if="showCheck"> </el-table-column>
                <el-table-column v-if="getShowIndex" align="center" :label="$t('message.index')">
                    <template slot-scope="scope">
                        <span>{{ (pagination.current - 1) * pagination.size + scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <slot></slot>
            </el-table>

            <!-- 分页信息 -->
            <div v-show="!isLoading" class="pagination-container">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pagination.current" :page-sizes="pageSizes" :page-size="pagination.size" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" ref="pagination"> </el-pagination>
            </div>
        </div>
    </el-card>
</template>

<script>
import merge from 'merge'
import request from '@/utils/request'
export default {
    props: {
        renderFun: {
            type: Function
        },
        showHeader: {
            type: Boolean,
            default: true
        },
        showIndex: {
            type: Boolean,
            default: false
        },
        // 数据请求地址
        uri: {
            type: String,
            required: true
        },
        // 请求参数
        requestParams: {
            type: Object,
            required: false
        },
        // 每页记录数
        pageSize: {
            type: Number,
            required: false
        },
        // 页码
        page: {
            type: Number,
            required: false
        },
        selectionChange: {
            type: Function,
            default: function () {}
        },
        onResponse: {
            type: Function,
            default: function () {}
        },
        showCheck: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            isLoading: true,
            // 分页参数
            pagination: {
                current: this.page || 1,
                size: this.pageSize || 10,
                total: null
            },
            pageSizes: [],
            data: []
        }
    },
    created() {
        this.pageRequest()
        this.pageSizes = [this.pagination.size, this.pagination.size * 5, this.pagination.size * 10, this.pagination.size * 30, this.pagination.size * 50]
    },
    computed: {
        getShowIndex() {
            return this.showIndex
        }
    },

    methods: {
        /**
         * 分页请求
         */
        pageRequest(isLoading) {
            if (isLoading === undefined) {
                isLoading = true
            }
            this.isLoading = isLoading
            request({
                url: this.uri,
                method: 'get',
                params: merge(
                    {},
                    {
                        pageNum: this.pagination.current,
                        pageSize: this.pagination.size
                    },
                    this.requestParams
                )
            }).then((data) => {
                this.isLoading = false
                if (data && data.code === 200) {
                    this.pagination.total = data.total
                    if (this.renderFun) {
                        this.renderFun(data.rows, data)
                    } else {
                        this.data = data.rows
                    }
                } else {
                    this.$message.error(data.msg)
                }
            })
        },
        handleSearch(isLoading) {
            this.pagination.current = 1
            this.$refs.pagination.lastEmittedPage = 1
            this.pageRequest(isLoading)
        },

        clearPage() {
            this.pagination.current = 1
        },

        /**
         * 切换页面
         */
        handleSizeChange(size) {
            this.pagination.size = size
            this.pageRequest()
        },

        /**
         * 当前页码
         */
        handleCurrentChange(currentPage) {
            this.pagination.current = currentPage
            this.pageRequest()
        },
        refresh() {
            this.pageRequest(true)
        },
        /**
         * 删除一行
         */
        removeItem(row) {
            const index = this.data.indexOf(row)
            this.data.splice(index, 1)
        },

        // 清除多选
        clearTableSelection() {
            this.$refs.table.clearSelection()
        },

        // 获取数据
        setData(e) {
            this.data = e
        }
    }
}
</script>
