<script setup>
import { ref, onMounted } from 'vue'
const router = useRouter()
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
const reportList = ref([])
const num = ref(0)
const max = ref(60)
const loading = ref(false)
const finished = ref(false)
// 初始加载数据
async function fetchData() {
    loading.value = true
    const { data, error } = await useApiFetch(`query/list?page=${page.value}&page_size=${pageSize.value}`)
        .get()
        .json()
    if (data.value && !error.value) {
        if (data.value.code === 200) {
            total.value = data.value.data.total
            if (data.value.data.list && data.value.data.list.length > 0) {
                reportList.value.push(...data.value.data.list)
                page.value += 1
            }
            if (reportList.value.length >= total.value) {
                finished.value = true
            }
        }
    }
    loading.value = false

}

// 初始加载
onMounted(() => {
    fetchData()
})

// 下拉触底加载更多
const onLoad = () => {
    if (!finished.value) {
        console.log("finished", finished.value)
        if (num.value >= max.value) {
            finished.value = true
        } else {
            fetchData()
        }
    }
}

function toDetail(item) {
    router.push({ path: '/report', query: { orderId: item.order_id } });
}

// 状态文字映射
function stateText(state) {
    switch (state) {
        case 'pending':
            return '查询中'
        case 'success':
            return '查询成功'
        case 'failed':
            return '查询失败'
        default:
            return '未知状态'
    }
}

// 状态颜色映射
function statusClass(state) {
    switch (state) {
        case 'pending':
            return 'status-pending'
        case 'success':
            return 'status-success'
        case 'failed':
            return 'status-failed'
        default:
            return ''
    }
}
</script>

<template>
    <div class="flex flex-col gap-4 p-4">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"><van-cell
                v-for="item in reportList" :key="item.id" @click="toDetail(item)" class="card mb-4">
                <div class=" text-gray-600 flex flex-col gap-2">
                    <div class="flex items-center justify-between">
                        <div>状态:</div>
                        <div class="rounded-xl px-2 py-1" :class="[statusClass(item.query_state)]">
                            {{ stateText(item.query_state) }}
                        </div>
                    </div>
                    <div class="flex items-center justify-between">
                        <div>报告类型</div>
                        <div>{{ item.product_name }}</div>
                    </div>
                    <div class="flex items-center justify-between">
                        <div>查询时间:</div>
                        <div>{{ item.create_time }}</div>
                    </div>
                </div>
            </van-cell>
        </van-list>

    </div>
</template>

<style scoped>
.status-pending {
    background-color: #fff3cd;
    color: #856404;
}

.status-success {
    background-color: #d4edda;
    color: #155724;
}

.status-failed {
    background-color: #f8d7da;
    color: #721c24;
}
</style>
