<template>
    <div class="card flex flex-col items-center justify-center text-center">
        <!-- 图片插画 -->
        <img
            src="@/assets/images/pendding.svg"
            alt="查询中"
            class="w-64 h-64"
        />

        <!-- 提示文字 -->
        <h2 class="text-xl font-semibold text-gray-700 mb-2 floating-text">
            报告正在查询中
        </h2>
        <p class="text-gray-500 text-sm mb-2 leading-relaxed">
            请稍候，我们正在为您查询报告。查询过程可能需要一些时间。
        </p>
        <p class="text-gray-400 text-xs mb-4">
            您可以稍后刷新页面查看结果，或之后访问历史报告列表查看。
        </p>
        <p class="text-gray-400 text-xs mb-4">
            如过久未查询成功，请联系客服为您处理
        </p>
        <!-- 按钮组 -->
        <div class="flex gap-4">
            <!-- 刷新按钮 -->
            <button
                @click="refreshPage"
                class="px-6 py-2 text-white rounded-lg transition duration-300 ease-in-out"
                style="background-color: var(--van-theme-primary);"
                onmouseover="this.style.backgroundColor='var(--van-theme-primary-dark)'"
                onmouseout="this.style.backgroundColor='var(--van-theme-primary)'"
            >
                刷新页面
            </button>
            <!-- 历史报告按钮 -->
            <button
                @click="viewHistory"
                class="px-6 py-2 text-white rounded-lg transition duration-300 ease-in-out"
                style="background-color: var(--van-text-color-2);"
                onmouseover="this.style.backgroundColor='var(--van-text-color)'"
                onmouseout="this.style.backgroundColor='var(--van-text-color-2)'"
            >
                查看历史报告
            </button>
        </div>
    </div>
</template>

<script setup>
const router = useRouter();

// 刷新页面逻辑
function refreshPage() {
    location.reload(); // 浏览器刷新页面
}

// 查看历史报告逻辑
function viewHistory() {
    router.replace({ path: "/historyQuery" }); // 假设历史报告页面的路由名为 'historyReports'
}
</script>

<style scoped>
@keyframes floatUpDown {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
        /* 向上浮动 */
    }

    100% {
        transform: translateY(0);
        /* 返回原位 */
    }
}

/* 给提示文字和其他需要浮动的元素添加动画 */
.floating-text {
    animation: floatUpDown 3s ease-in-out infinite;
    /* 动画持续3秒，缓入缓出，循环播放 */
}
</style>
