<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2023-06-13 14:35:07
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2023-06-25 09:57:57
 * @FilePath: \agentManage\src\components\Table\index.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
    <div class="table-container">
        <el-table :border="border" :data="tableData" style="width: 100%">
            <el-table-column align="center" show-overflow-tooltip v-for="(item, index) in labelObj" :key="index" :prop="item.prop"
                :label="item.label" :width="item.width || ''">
            </el-table-column>
            <el-table-column align="center" label="操作" v-if="btnObj.btnList" :width="btnObj.width || ''">
                <template slot-scope="scope">
                    <el-button v-for="(i, d) in btnObj.btnList" :key="d" type="text" size="small"
                        @click="handleBtn(scope.row, i.text)">{{ i.text }}</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current"
                :page-sizes="pageSizes" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        tableData: {
            type: Array,
            default: () => []
        },
        // 行key和label
        labelObj: {
            type: Array,
            default: () => []
        },
        /**
         * @description: 操作按钮对象
         * @width {参数类型} 参数名称
         * @btnList {Array} [{text: '查看'}]
         */
        btnObj: {
            type: Object,
            default: () => { }
        },
        total: {
            type: Number,
            default: 0
        },
        page: {
            type: Number,
            default: 1
        },
        pageSize: {
            type: Number,
            default: 10
        },
        pageSizes: {
            type: Array,
            default: () => [10, 20, 50]
        },
        border: {
            type: Boolean,
            default: true
        },
    },
    data() {
        return {
            size: this.pageSize,
            current: this.page
        }
    },
    methods: {
        // 单页显示数据量变化
        handleSizeChange() {
            this.$emit('sizeChange', this.size)
        },
        // 页码变化
        handleCurrentChange() {
            this.$emit('pageChange', this.current)
        },
        handleBtn(row, text) {
            this.$emit('handleBtn',{row,text})
        }


    },
}
</script>

<style lang="scss" scoped>
.table-container {
    .pagination {
        display: flex;
        justify-content: center;
        margin-top: 30px;
    }
}
</style>