<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 bg-blue-500 rounded-lg hover:bg-blue-600 transition duration-300 ease-in-out">
                刷新页面
            </button>
            <!-- 历史报告按钮 -->
            <button @click="viewHistory"
                class="px-6 py-2 text-white bg-gray-500 rounded-lg hover:bg-gray-600 transition duration-300 ease-in-out">
                查看历史报告
            </button>
        </div>
    </div>
</template>

<script setup>
const router = useRouter();

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

// 查看历史报告逻辑
function viewHistory() {
    router.push({ 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>
