<template>

    <el-table v-bind="$attrs" :data="tableData" header-row-class-name="table_header" :border="border" :stripe="stripe"
        style="width: 100%;height: 100%;" @selection-change="handleSelectionChange">
        <template v-for="item in columns" :key="item.prop">
            <!-- 选择列 -->
            <el-table-column v-if="item.type === 'selection'" type="selection" width="55" />

            <!-- 序号列 -->
            <el-table-column v-else-if="item.type === 'index'" type="index" :width="item.width || '80'"
                :label="item.label || tLang('common', '序号')" />

            <!-- 普通列 -->
            <el-table-column v-else :prop="item.prop" :label="item.label" :width="item.width" :min-width="item.minWidth"
                :align="item.align || 'center'">
                <!-- 自定义列内容 -->
                <template #default="scope" v-if="item.slot">
                    <slot :name="item.slot" :row="scope.row"></slot>
                </template>
            </el-table-column>
        </template>
    </el-table>
</template>

<script setup>
const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    columns: {
        type: Array,
        required: true
    },
    tableData: {
        type: Array,
        required: true
    },
    border: {
        type: Boolean,
        default: false
    },
    stripe: {
        type: Boolean,
        default: false
    }
})

const emit = defineEmits(['selection-change'])

const handleSelectionChange = (val) => {
    emit('selection-change', val)
}
</script>

<style lang="scss" scoped>
.el-table {
    --el-table-border-color: transparent;
    --el-table-border: none;
    --el-table-text-color: #bdbdbe;
    --el-table-header-text-color: #bdbdbe;
    --el-table-row-hover-bg-color: transparent;
    --el-table-current-row-bg-color: transparent;
    --el-table-header-bg-color: transparent;
    --el-table-bg-color: transparent;
    --el-table-tr-bg-color: transparent;
    --el-table-expanded-cell-bg-color: transparent;
    font-size: 12px;
}

::v-deep(.table_header th) {
    background-color: transparent !important;
    color: #fff;
    text-align: center;
}

.title {
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    color: #cfcfcf;

}

.content {
    width: 100%;
    height: calc(100% - 20px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.table-container {
    width: 100%;
    height: 100%;
}
</style>
