<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() {
    // { page: page.value, page_size: pageSize.value }
    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>
    <!-- Vant 通知栏 -->
    <van-notice-bar
        color="#1989fa"
        background="#ecf9ff"
        left-icon="info-o"
        text="为保证用户的隐私以及数据安全，您的报告生成15天之后将自动清除，请及时保存您的报告。"
    />

    <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>
