<template>
    <div class="min-h-screen bg-gray-50">
        <!-- 收益列表 -->
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <div v-for="(item, index) in data.list" :key="index" class="mx-4 my-2 bg-white rounded-lg p-4 shadow-sm">
                <div class="flex justify-between items-center mb-2">
                    <span class="text-gray-500 text-sm">{{ item.create_time || '-' }}</span>
                    <span class="text-green-500 font-bold">+{{ item.amount.toFixed(2) }}</span>
                </div>
                <div class="flex items-center">
                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium"
                        :class="getReportTypeStyle(item.type)">
                        <span class="w-2 h-2 rounded-full mr-1" :class="getDotColor(item.type)"></span>
                        {{ typeToChinese(item.type) }}
                    </span>
                </div>
            </div>
        </van-list>
    </div>
</template>

<script setup>
// 类型映射配置
const typeConfig = {
    descendant_promotion: {
        chinese: '下级推广奖励',
        color: { bg: 'bg-blue-100', text: 'text-blue-800', dot: 'bg-blue-500' }
    },
    descendant_upgrade_vip: {
        chinese: '下级升级VIP奖励',
        color: { bg: 'bg-green-100', text: 'text-green-800', dot: 'bg-green-500' }
    },
    descendant_upgrade_svip: {
        chinese: '下级升级SVIP奖励',
        color: { bg: 'bg-purple-100', text: 'text-purple-800', dot: 'bg-purple-500' }
    },
    descendant_stay_activedescendant: {
        chinese: '下级活跃奖励',
        color: { bg: 'bg-pink-100', text: 'text-pink-800', dot: 'bg-pink-500' }
    },
    new_active: {
        chinese: '新增活跃奖励',
        color: { bg: 'bg-orange-100', text: 'text-orange-800', dot: 'bg-orange-500' }
    },
    descendant_withdraw: {
        chinese: '下级提现奖励',
        color: { bg: 'bg-indigo-100', text: 'text-indigo-800', dot: 'bg-indigo-500' }
    },
    default: {
        chinese: '其他奖励',
        color: { bg: 'bg-gray-100', text: 'text-gray-800', dot: 'bg-gray-500' }
    }
}

const page = ref(1)
const pageSize = ref(10)
const data = ref({
    total: 0,
    list: []
})
const loading = ref(false)
const finished = ref(false)

// 类型转中文
const typeToChinese = (type) => {
    return typeConfig[type]?.chinese || typeConfig.default.chinese
}

// 获取颜色样式
const getReportTypeStyle = (type) => {
    const config = typeConfig[type] || typeConfig.default
    return `${config.color.bg} ${config.color.text}`
}

// 获取小圆点颜色
const getDotColor = (type) => {
    return typeConfig[type]?.color.dot || typeConfig.default.color.dot
}

// 加载更多数据
const onLoad = async () => {
    if (!finished.value) {
        page.value++
        await getData()
    }
}

// 获取数据
const getData = async () => {
    try {
        loading.value = true
        const { data: res, error } = await useApiFetch(
            `/agent/rewards?page=${page.value}&page_size=${pageSize.value}`
        ).get().json()

        if (res.value?.code === 200 && !error.value) {
            if (page.value === 1) {
                data.value = res.value.data
            } else {
                data.value.list.push(...res.value.data.list)
            }

            if (data.value.list.length >= res.value.data.total ||
                res.value.data.list.length < pageSize.value) {
                finished.value = true
            }
        }
    } finally {
        loading.value = false
    }
}

// 初始化加载
onMounted(() => {
    getData()
})
</script>

<style scoped>
/* 保持原有样式不变 */
.list-enter-active {
    transition: all 0.3s ease;
}

.list-enter-from {
    opacity: 0;
    transform: translateY(20px);
}

:deep(.van-list__finished-text) {
    @apply py-4 text-gray-400 text-sm;
}

:deep(.van-list__loading) {
    @apply py-4;
}
</style>