<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: 'cityName', align: 'center' },
        { label: '取消数量', prop: 'count', align: 'center' }
    ]);

    const dataList = reactive([
        { rank: 1, cityName: '北京', count: 10 },
        { rank: 2, cityName: '上海', count: 9 },
        { rank: 3, cityName: '广州', count: 8 },
        { rank: 4, cityName: '深圳', count: 7 },
        { rank: 5, cityName: '成都', count: 6 },
        { rank: 6, cityName: '杭州', count: 5 },
        { rank: 7, cityName: '武汉', count: 4 },
        { rank: 8, cityName: '西安', count: 3 }
    ]);

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

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

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

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