<script setup>
const router = useRouter();

function toInquire(name) {
    if (name === "Marriage") {
        router.push(`/inquire/marriage`);
        // window.location.href = 'https://www.quannengcha.com?_um_campaign=67bfea379a16fe6dcd53b9a7&_um_channel=67bfea379a16fe6dcd53b9a8';
    } else if (name === "Api") {
        window.location.href = "https://www.tianyuanapi.com/";
    } else {
        router.push(`/list${name}`);
    }
}

function toHistory() {
    router.push(`/historyQuery`);
}

function toPromote() {
    window.location.href =
        "https://www.tianyuandb.com?_um_campaign=67c15d4f8f232a05f1221b82&_um_channel=67c15d4f8f232a05f1221b83"; // 跳转到客服页面
}
</script>

<template>
    <div class="relative p-4">
        <img
            class="h-full w-full overflow-hidden rounded-xl"
            src="@/assets/images/banner.png"
        />
    </div>
    <div class="relative p-4 pb-4 pt-2">
        <div class="grid grid-cols-2 gap-3">
            <div
                class="relative flex flex-col cursor-pointer rounded-bl-[35px] rounded-br-lg rounded-tl-[35px] rounded-tr-lg bg-white px-4 py-6 shadow-lg"
                @click="toInquire('Lawsuit')"
            >
                <div class="min-h-18 gap-2 bg-white px-1">
                    <div class="mb-2 flex justify-around">
                        <img
                            class="h-12 w-12 flex-shrink-0"
                            src="@/assets/images/icon_2.png"
                        />
                        <div
                            class="mt-1 max-w-max flex-shrink-0 text-left text-lg text-gray-600 font-bold"
                        >
                            司法涉诉
                        </div>
                    </div>
                    <div class="max-w-max text-left text-xs text-gray-600">
                        查询个人与企业的民事案件、刑事案件、行政案件、非诉保全审查、执行案件、强制清算与破产、限高、失信等司法涉诉记录
                    </div>
                </div>
            </div>

            <div
                class="relative flex flex-col cursor-pointer rounded-bl-lg rounded-br-[35px] rounded-tl-lg rounded-tr-[35px] bg-white px-4 py-6 shadow-lg"
                @click="toInquire('Marriage')"
            >
                <div class="min-h-18 gap-2 bg-white px-1">
                    <div class="mb-2 flex justify-around">
                        <div
                            class="mt-1 max-w-max flex-shrink-0 text-left text-lg text-gray-600 font-bold"
                        >
                            婚恋风险
                        </div>
                        <img
                            class="h-12 w-12 flex-shrink-0"
                            src="@/assets/images/icon_1.png"
                        />
                    </div>
                    <div class="max-w-max text-left text-xs text-gray-600">
                        全面评估婚恋对象潜在风险，包含个人不良、司法涉诉、婚姻状态、借贷行为等多维数据分析，帮您识别隐藏风险，守护情感安全
                    </div>
                </div>
            </div>

            <div
                class="relative flex flex-col cursor-pointer rounded-bl-[35px] rounded-br-lg rounded-tl-[35px] rounded-tr-lg bg-white px-4 py-6 shadow-lg"
                @click="toInquire('Risk')"
            >
                <div class="min-h-18 gap-2 bg-white px-1">
                    <div class="mb-2 flex justify-around">
                        <img
                            class="h-12 w-12 flex-shrink-0"
                            src="@/assets/images/icon_3.png"
                        />
                        <div
                            class="mt-1 max-w-max flex-shrink-0 text-left text-lg text-gray-600 font-bold"
                        >
                            风险报告
                        </div>
                    </div>
                    <div class="max-w-max text-left text-xs text-gray-600">
                        基于多维度数据整合，准确评估潜在风险的全面报告
                    </div>
                </div>
            </div>
            <div
                class="relative flex flex-col cursor-pointer rounded-bl-lg rounded-br-[35px] rounded-tl-lg rounded-tr-[35px] bg-white px-4 py-6 shadow-lg"
                @click="toInquire('Verify')"
            >
                <div class="min-h-18 gap-2 bg-white px-1">
                    <div class="mb-2 flex justify-around">
                        <div
                            class="mt-1 max-w-max flex-shrink-0 text-left text-lg text-gray-600 font-bold"
                        >
                            核验工具
                        </div>
                        <img
                            class="h-12 w-12 flex-shrink-0"
                            src="@/assets/images/icon_4.png"
                        />
                    </div>
                    <div class="max-w-max text-left text-xs text-gray-600">
                        核验身份证、手机、银行卡、自然人生存状态、学历、人车关系等的查询工具
                    </div>
                </div>
            </div>
            <div
                class="relative flex flex-col cursor-pointer rounded-bl-[35px] rounded-br-lg rounded-tl-[35px] rounded-tr-lg bg-white px-4 py-6 shadow-lg"
                @click="toInquire('Car')"
            >
                <div class="min-h-18 gap-2 bg-white px-1">
                    <div class="mb-2 flex justify-around">
                        <img
                            class="h-12 w-12 flex-shrink-0"
                            src="@/assets/images/icon_index_chacheliang.svg"
                        />
                        <div
                            class="mt-1 max-w-max flex-shrink-0 text-left text-lg text-gray-600 font-bold"
                        >
                            查车辆
                        </div>
                    </div>
                    <div class="max-w-max text-left text-xs text-gray-600">
                        车辆出险信息、车辆维保记录、人车关系、名下车辆、车架号查车等
                    </div>
                </div>
            </div>
            <div
                class="relative flex flex-col cursor-pointer rounded-bl-lg rounded-br-[35px] rounded-tl-lg rounded-tr-[35px] bg-white px-4 py-6 shadow-lg"
                @click="toInquire('Api')"
            >
                <div class="min-h-18 gap-2 bg-white px-1">
                    <div class="mb-2 flex justify-around">
                        <div
                            class="mt-1 max-w-max flex-shrink-0 text-left text-lg text-gray-600 font-bold"
                        >
                            API商店
                        </div>
                        <img
                            class="h-12 w-12 flex-shrink-0"
                            src="@/assets/images/icon_index_apistore.svg"
                        />
                    </div>
                    <div class="max-w-max text-left text-xs text-gray-600">
                        提供婚姻、司法、核验等高效便捷的API服务，帮助企业快速获取数据，提升业务效率。
                    </div>
                </div>
            </div>
        </div>
        <div class="mt-4 font-bold">更多服务</div>
        <div
            class="mt-4 box-border h-14 w-full flex items-center rounded-xl bg-white px-4 text-gray-700 shadow-xl"
            @click="toHistory"
        >
            <img
                class="mr-4 h-10 w-10"
                src="@/assets/images/bg_icon.png"
                mode="widthFix"
            />
            <div class="">
                <div class="font-bold">我的历史查询记录</div>
                <div class="text-xs">查询记录有效期为15天</div>
            </div>
        </div>
        <div class="shadow-3xl mt-8 w-full" @click="toPromote">
            <img
                class="shadow-3xl w-full overflow-hidden rounded-xl"
                src="@/assets/images/liu.png"
                mode="widthFix"
            />
        </div>
    </div>
</template>

<style scoped>
.clip-left {
    clip-path: polygon(0 0, 0 100%, 90% 100%, 0 100%);
}

.clip-right {
    clip-path: polygon(0 0, 0 0, 90% 100%, 0 0);
}
</style>
