<template>
    <div class="table-container">
        <div class="title">{{ props.title }}</div>
        <div class="content">
            <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>
        </div>
    </div>
</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>
::v-deep(.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;
}
::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>
