<template>
    <div class="box">
        <!-- 表格数据 -->
        <div class="box-content">
            <el-table :data="currentTableData" highlight-current-row border table-layout="fixed"
                style="width: 100%;height: 100%;min-height: 200px" empty-text="暂无数据"
                @current-change="g_props.currentChange">
                <slot name="table"></slot>
            </el-table>
        </div>

        <!-- 分页栏 -->
        <div class="box-foot">
            <el-pagination v-model:current-page="g_PagingData.currentPage" :hide-on-single-page="true"
                v-model:page-size="g_PagingData.pageSize" :page-sizes="g_PagingData.pageSizes"
                :small="g_PagingData.small" :disabled="g_PagingData.disabled" :background="g_PagingData.background"
                layout="total, sizes, prev, pager, next, jumper" :total="g_PagingData.total"
                @size-change="act_handleSizeChange" @current-change="act_handleCurrentChange" />
        </div>
    </div>
</template>

<script setup>
/************************************************
 * 引入文件
 ************************************************/
import { ref, reactive, watch, onMounted, defineProps, computed } from 'vue';



/************************************************
 * 全局变量
 * 
 * 格式: g_ + 事件名     例如: getAppDataList
 ************************************************/
// 接收外部属性
const g_props = defineProps({
    data: Array,
    currentChange: Function,
    PagingData: Object,
});

// 表格数据
const g_tableData = ref([]);

// 分页数据
const g_PagingData = reactive({
    currentPage: 1,
    pageSize: 10,
    pageSizes: [10, 20, 50, 200],
    total: 0,
    small: false,
    background: false,
    disabled: false,
    ...g_props.PagingData
});



/************************************************
 * 生命周期函数
 ************************************************/
// 挂载完成
onMounted(() => {

})

// 计算属性
const currentTableData = computed(() => {
    if (!g_tableData.value.length) {
        return [];
    }
    const start = (g_PagingData.currentPage - 1) * g_PagingData.pageSize;
    const end = start + g_PagingData.pageSize;
    return g_tableData.value.slice(start, end);
});

/************************************************
* 事件处理
* 
* 格式: act_ + 事件名 例如: act_handleSizeChange
************************************************/;
// 初始化
const act_init = () => {
    g_PagingData.total = g_tableData.value.length;
};

// 改变每页显示条数
const act_handleSizeChange = (newSize) => {
    g_PagingData.pageSize = newSize;
    g_PagingData.currentPage = 1;
};

// 改变当前页码
const act_handleCurrentChange = (newPage) => {
    g_PagingData.currentPage = newPage;
};


// 监听属性变化
watch(() => g_props.data, (newData) => {
    if (newData) {
        g_tableData.value = newData;
        act_init();
    }
}, { immediate: true });

watch(() => g_props.PagingData, (newPagingData) => {
    if (newPagingData) {
        Object.assign(g_PagingData, newPagingData);
    }
}, { immediate: true });
</script>

<style scoped>
.box {
    width: 100%;
    height: 100%;
    min-height: 300px;
    background-color: rgb(240, 240, 240);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

.box-content {
    flex: 1 1 1px;
    overflow: auto;
}

.box-foot {
    overflow: auto;
}

::v-deep .el-pagination {
    padding: 8px;
}

/* 自定义滚动条样式 */
.box-foot::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.box-foot::-webkit-scrollbar-thumb {
    background-color: rgb(83, 43, 255);
}

.box-foot::-webkit-scrollbar-thumb:hover {
    background-color: #50bfff;
}

.box-foot::-webkit-scrollbar-track {
    background: #d3d3d3;
    border: 1px solid rgb(173, 173, 173);
}
</style>
