<template>
    <div class="bg-gradient-to-b from-[#aeceff] to-white min-h-screen relative">
        <!-- banner -->
        <div class="w-full flex justify-center" style="clip-path: ellipse(100% 95% at 50% 0%)">
            <img src="@/assets/images/hygj_banner.png" alt="核验工具" class="w-full h-auto" />
        </div>
        <div class="p-6 -my-24 z-1000 absolute">
            <!-- 功能菜单 -->
            <div class="card">
                <van-skeleton :row="5" :loading="isFetching">
                    <div class="grid grid-cols-3 gap-6">
                        <div v-for="(item, index) in availableMenuItems" :key="index" class="flex flex-col items-center"
                            @click="toInquire(item.product)">
                            <div class="bg-slate-100 rounded-full p-4">
                                <img :src="item.icon" :alt="item.title" class="w-10 h-10" />
                            </div>
                            <p class="mt-2 text-sm font-semibold">
                                {{ item.title }}
                            </p>
                        </div>
                        <div class="flex flex-col items-center" @click="toMore">
                            <div class="bg-slate-100 rounded-full p-4">
                                <img src="@/assets/images/more.svg" alt="更多功能" class="w-10 h-10" />
                            </div>
                            <p class="mt-2 text-sm font-semibold">更多功能</p>
                        </div>
                    </div>
                </van-skeleton>
            </div>
            <!-- 详情文本 -->

            <div class="card mt-4" v-if="availableMenuItems.length !== 0">
                <h2 class="text-lg font-bold text-blue-500 mb-4">
                    核验工具服务
                </h2>
                <p class="text-gray-700 leading-6">
                    本平台提供全方位核验工具服务，助您全面防范风险。功能包括：
                </p>
                <van-skeleton :row="3" :loading="isFetching">
                    <ul class="list-disc list-inside mt-4 space-y-2 text-gray-600">
                        <li v-for="(item, index) in availableMenuItems" :key="index">
                            <strong>{{ item.title }}：</strong>
                            {{ item.description }}
                        </li>
                    </ul>
                </van-skeleton>
            </div>
        </div>
    </div>
    <QrcodePop v-model:show="show"></QrcodePop>
</template>

<script setup>
import { onMounted } from "vue";
const router = useRouter();

const { fetchRenderData, availableMenuItems, isFetching } = useMenuItems();
const toInquire = (product) => {
    router.push("/inquire/" + product);
};
onMounted(() => {
    fetchRenderData("verify");
});
const toMore = () => {
    show.value = true;
    // showConfirmDialog({
    //     title: "更多服务",
    //     message:
    //         "更多服务请访问全能查官网: https://www.quannengcha.com 或关注全能查公众号",
    // })
    //     .then(() => { })
    //     .catch(() => { });
};
const show = ref(false)
</script>

<style scoped></style>
