<template>
    <ele-data-table
        ref="tableRef"
        class="flex-1"
        row-key="id"
        :columns="columns"
        :data="dataList"
    />
</template>

<script setup>
    import { reactive, defineExpose } from 'vue';
    import request from '@/utils/request';

    const columns = reactive([
        { label: '排行榜', prop: 'rank', align: 'center' },
        { label: '上报地区', prop: 'areaName', align: 'center' },
        { label: '上报数量', prop: 'cancelOrderCount', align: 'center' }
    ]);

    const dataList = reactive([]);

    // 更新排行榜数据
    const updateRankData = (data) => {
        if (!data || !Array.isArray(data)) return;

        // 清空现有数据
        dataList.length = 0;

        // 添加新数据，同时设置排名
        data.forEach((item, index) => {
            dataList.push({
                ...item,
                rank: index + 1
            });
        });
    };

    // 暴露更新方法给父组件使用
    defineExpose({
        updateRankData
    });
</script>
