<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="font-bold" :class="getAmountColor(item.status)">{{ item.amount.toFixed(2) }}元</span>
                </div>
                <div class="flex items-center mb-2">
                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium"
                        :class="getStatusStyle(item.status)">
                        <span class="w-2 h-2 rounded-full mr-1" :class="getDotColor(item.status)"></span>
                        {{ statusToChinese(item.status) }}
                    </span>
                </div>
                <div class="text-xs text-gray-500">
                    <div v-if="item.payee_account">收款账户：{{ maskName(item.payee_account) }}</div>
                    <div v-if="item.remark">备注：{{ item.remark }}</div>
                </div>
            </div>
        </van-list>
    </div>
</template>

<script setup>
// 状态映射配置
const statusConfig = {
    1: {
        chinese: '处理中',
        color: {
            bg: 'bg-yellow-100',
            text: 'text-yellow-800',
            dot: 'bg-yellow-500',
            amount: 'text-yellow-500'
        }
    },
    2: {
        chinese: '提现成功',
        color: {
            bg: 'bg-green-100',
            text: 'text-green-800',
            dot: 'bg-green-500',
            amount: 'text-green-500'
        }
    },
    3: {
        chinese: '提现失败',
        color: {
            bg: 'bg-red-100',
            text: 'text-red-800',
            dot: 'bg-red-500',
            amount: 'text-red-500'
        }
    }
}

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

// 账户脱敏处理
const maskName = (name) => {
    if (!name || typeof name !== 'string') return ''
    if (name.length <= 7) return name
    return name.substring(0, 3) + '****' + name.substring(7)
}

// 状态转中文
const statusToChinese = (status) => {
    return statusConfig[status]?.chinese || '未知状态'
}

// 获取状态样式
const getStatusStyle = (status) => {
    const config = statusConfig[status] || {}
    return `${config.color?.bg || 'bg-gray-100'} ${config.color?.text || 'text-gray-800'}`
}

// 获取小圆点颜色
const getDotColor = (status) => {
    return statusConfig[status]?.color.dot || 'bg-gray-500'
}

// 获取金额颜色
const getAmountColor = (status) => {
    return statusConfig[status]?.color.amount || 'text-gray-500'
}

// 加载更多数据
const onLoad = async () => {

    if (!finished.value) {

        await getData()
    }
}

// 获取数据（修改分页逻辑）
const getData = async () => {
    try {
        loading.value = true
        const { data: res, error } = await useApiFetch(
            `/agent/withdrawal?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)
            }

            // 更新分页状态
            page.value++

            // 判断是否加载完成
            if (data.value.list.length >= res.value.data.total ||
                res.value.data.list.length < pageSize.value) {
                finished.value = true
            }
        }
    } finally {
        loading.value = false
    }
}

// 初始化加载
onMounted(async () => {
    // 重置分页状态
    page.value = 1
    finished.value = false
    await 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>