<!-- 红包码分享列表 -->
<template>
    <div class="red-bag-share">
        <common-table
            ref="pageRef"
            :pageConfig="pageConfig"
            :columns="columns"
            :tools="false"
            :body-style="{ padding: '0' }"
        >
            <template #shareType="{ row }">
                <el-tag :type="row.shareType === 1 ? 'success' : 'primary'">
                    {{ row.shareType === 1 ? 'A 分享' : 'B 被分享' }}
                </el-tag>
            </template>
        </common-table>
    </div>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';

    const props = defineProps({
        redId: {
            type: String,
            required: true
        }
    });

    // 表格列配置
    const columns = ref([
        {
            label: '用户 ID',
            prop: 'userId',
            align: 'center',
            minWidth: 120
        },
        {
            label: '用户名称',
            prop: 'userName',
            align: 'center',
            minWidth: 120,
            showOverflowTooltip: true
        },
        {
            label: '红包金额',
            prop: 'redPrice',
            align: 'center',
            minWidth: 100
        },
        {
            label: '分享类型',
            prop: 'shareType',
            align: 'center',
            slot: 'shareType',
            minWidth: 100
        },
        {
            label: '领取时间',
            prop: 'drawTime',
            align: 'center',
            minWidth: 180
        }
    ]);

    // 页面配置
    const pageRef = ref(null);
    const pageConfig = reactive({
        pageUrl: '/activity/red/bag/share/activity/redBag/share/pagelist',
        fileName: '红包码分享',
        cacheKey: 'redBagShareTable'
    });

    // 刷新表格
    function reload() {
        pageRef.value?.reload({ redId: props.redId });
    }
</script>

<style lang="scss" scoped>
    .red-bag-share {
        padding: 0;
    }

    // 表格样式优化
    :deep(.el-table) {
        .el-table__header th {
            font-size: 13px;
            font-weight: 600;
            color: #333;
            padding: 12px 8px;
            background-color: #fafafa;
            white-space: nowrap;
        }

        .el-table__body td {
            font-size: 13px;
            padding: 10px 8px;
            white-space: nowrap;
        }
    }
</style>
