<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/sfss_banner.png"
                alt="司法涉诉"
                class="w-full h-auto"
            />
        </div>
        <div class="p-6 -my-24 z-1000 absolute">
            <div class="card">
                <div class="grid grid-cols-3 gap-6">
                    <div
                        v-for="(item, index) in menuItems"
                        :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 text-center font-semibold">
                            {{ item.title }}
                        </p>
                    </div>
                </div>
            </div>
            <div class="card mt-4">
                <h2 class="text-lg font-bold text-blue-500 mb-4">
                    司法涉诉查询服务
                </h2>
                <p class="text-gray-700 leading-6">
                    本平台提供全方位司法涉诉查询服务，助您全面防范。功能包括：
                </p>
                <ul class="list-disc list-inside mt-4 space-y-2 text-gray-600">
                    <li>
                        <strong>个人涉诉：</strong>
                        查看个人是否涉及诉讼、失信、限高案件，了解其法律纠纷情况，帮助您判断该个人的法律风险。
                    </li>
                    <li>
                        <strong>企业涉诉：</strong>
                        查看企业是否涉及诉讼、失信、限高案件，了解企业的法律风险及潜在的经营问题，帮助您评估与该企业合作的安全性。
                    </li>
                    <li>
                        <strong>个人失信：</strong
                        >个人限高功能帮助您查询个人是否被法院采取限制高消费措施，了解其是否因未履行法院判决而受到出行、消费等方面的限制。通过该功能，您可以评估该个人的履约能力和信用状况，帮助您在商业合作、雇佣关系或其他交易场景中规避潜在风险，做出更加明智的决策。
                    </li>
                    <li>
                        <strong>个人限高：</strong>
                        个人失信功能帮助您查看个人是否被列入失信被执行人名单，了解其是否存在严重违约、拒不履行生效法律文书确定义务的情况。通过该功能，您可以全面评估该个人的信用状况和诚信水平，帮助您在融资、合作或其他重要决策场景中识别潜在风险，保护自身权益，避免不必要的损失
                    </li>
                    <li>
                        <strong>股东人企关系：</strong>
                        股东人企关系功能帮助您查看个人为哪些企业的股东，了解其与该企业的关系以及企业所涉诉讼、失信、限高案件情况，帮助您评估与该企业的合作风险。
                    </li>
                    <li>
                        <strong>人企关系加强版：</strong>
                        <p>
                            人企关系加强版功能通过查询个人关联的企业，帮助您了解该个人可能涉及的风险，特别是与高风险企业有联系的个人。查询结果包括投资企业详情、高管任职记录以及企业涉诉情况，全面展示个人商业网络。该功能帮助您评估个人的风险水平，确保在合作过程中识别潜在的法律、财务或信誉风险。
                        </p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script setup>
import grssIcon from "@/assets/images/grss_icon.svg";
import qyssIcon from "@/assets/images/qyss_icon.svg";
import sxIcon from "@/assets/images/sx_icon.svg";
import xgIcon from "@/assets/images/xg_icon.svg";
import gdrqgxIcon from "@/assets/images/gdrqgx_icon.svg";
import rqgxProIcon from "@/assets/images/rqgxpro_icon.svg";
const router = useRouter();
const menuItems = [
    { title: "个人涉诉", icon: grssIcon, product: "toc_PersonalLawsuit" },
    { title: "企业涉诉", icon: qyssIcon, product: "toc_EnterpriseLawsuit" },
    { title: "个人失信", icon: sxIcon, product: "toc_PersonalDiscredit" },
    {
        title: "个人限高",
        icon: xgIcon,
        product: "toc_PersonalConsumptionRestriction",
    },
    {
        title: "股东人企关系",
        icon: gdrqgxIcon,
        product: "toc_ShareholderBusinessRelation",
    },
    {
        title: "人企关系加强版",
        icon: rqgxProIcon,
        product: "toc_PersonEnterprisePro",
    },
];

const toInquire = (product) => {
    if (!product) return;
    router.push("/inquire/" + product);
};
</script>

<style scoped></style>
