<script setup>
const router = useRouter();
import { storeToRefs } from "pinia";
import { showConfirmDialog } from "vant";
import SectionTitle from "@/components/SectionTitle.vue";

const agentStore = useAgentStore();
const { isAgent } = storeToRefs(agentStore);
import personalDataIcon from "@/assets/images/index/personal_data_bg.png";
import companyIcon from "@/assets/images/index/company_bg.png";
import loanCheckIcon from "@/assets/images/index/loan_check_bg.png";
import marriageRiskIcon from "@/assets/images/index/marriage_risk_bg.png";
import housekeepingRiskIcon from "@/assets/images/index/housekeeping_risk_bg.png";
import preLoanRiskIcon from "@/assets/images/index/preloan_risk_bg.png";

function toInquire(name) {
    // if (name === "marriage") {
    //     showConfirmDialog({
    //         title: "婚恋风险查询",
    //         message: "是否进入天远查进行婚恋查询？",
    //         confirmButtonText: "进入",
    //         cancelButtonText: "取消",
    //     })
    //         .then(() => {
    //             // 在当前标签页打开，不新开tab
    //             window.location.href = "https://www.tianyuancha.cn";
    //         })
    //         .catch(() => {
    //             // 取消则继续后续逻辑
    //             router.push(`/inquire/marriage`);
    //         });
    //     return; // 阻止继续跳转，等待 dialog 回调
    // }
    router.push(`/inquire/${name}`);
}
function toInvitation() {
    router.push({ name: "invitation" });
}
const toPromote = () => {
    router.push({ name: "promote" });
};

const toHelp = () => {
    router.push("/help");
};

const toService = () => {
    router.push({ name: "service" });
};

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

const services = ref([
    {
        title: "个人大数据",
        name: "personalData",
        subtitle: "数据洞察，规避风险",
        bg: personalDataIcon,
        goColor: "#6699ff",
    },
    {
        title: "婚恋风险",
        name: "marriage",
        subtitle: "深度了解，坦诚相爱",
        bg: marriageRiskIcon,
        goColor: "#ff99cc",
    },
    {
        title: "入职背调",
        name: "backgroundcheck",
        subtitle: "人才甄选，用人无忧",
        bg: preLoanRiskIcon,
        goColor: "#7db3ff",
    },
]);

const riskServices = ref([
    {
        title: "小微企业",
        name: "companyinfo",
        subtitle: "风险监控，稳健经营",
        bg: companyIcon,
        goColor: "#ffaa66",
    },
    {
        title: "家政风险",
        name: "homeservice",
        subtitle: "身份核验，守护家庭",
        bg: housekeepingRiskIcon,
        goColor: "#66cccc",
    },
    {
        title: "贷前风险",
        name: "preloanbackgroundcheck",
        subtitle: "信用评估，放款无忧",
        bg: loanCheckIcon,
        goColor: "var(--color-service-loan)",
    },
]);

const noticeText = ref([]);
const toCooperation = () => {
    window.location.href = "https://ass.tianyuandata.com";
};
const toBigData = () => {
    window.location.href = "https://www.tybigdata.com/";
};
</script>

<template>
    <div class="box-border min-h-screen">
        <div class="relative p-4">
            <img
                class="h-full w-full rounded-xl overflow-hidden"
                src="@/assets/images/index/banner.png"
            />
        </div>
        <div class="px-6">
            <!-- 菜单项一行显示 -->
            <div class="grid grid-cols-4 gap-3">
                <div
                    class="text-center flex flex-col justify-center items-center"
                    @click="toPromote"
                >
                    <div
                        class="h-16 w-16 p-1 box-content bg-gradient-to-b from-white to-blue-100/10 rounded-full shadow-lg flex items-center justify-center"
                    >
                        <img
                            src="@/assets/images/index/tgbg.png"
                            alt="推广报告"
                            class="h-12 w-12"
                        />
                    </div>
                    <div class="text-center mt-1 font-bold">推广报告</div>
                </div>

                <div
                    class="text-center flex flex-col justify-center items-center"
                    @click="toInvitation"
                >
                    <div
                        class="h-16 w-16 p-1 box-content bg-gradient-to-b from-white to-blue-100/10 rounded-full shadow-lg flex items-center justify-center"
                    >
                        <img
                            src="@/assets/images/index/yqhy.png"
                            alt="邀请下级"
                            class="h-12 w-12"
                        />
                    </div>
                    <div class="text-center mt-1 font-bold">邀请下级</div>
                </div>
                <div
                    class="text-center flex flex-col justify-center items-center"
                    @click="toHelp"
                >
                    <div
                        class="h-16 w-16 p-1 box-content bg-gradient-to-b from-white to-blue-100/10 rounded-full shadow-lg flex items-center justify-center"
                    >
                        <img
                            src="@/assets/images/index/bzzx.png"
                            alt="帮助中心"
                            class="h-12 w-12"
                        />
                    </div>
                    <div class="text-center mt-1 font-bold">帮助中心</div>
                </div>
                <div
                    class="text-center flex flex-col justify-center items-center"
                    @click="toHistory"
                >
                    <div
                        class="h-16 w-16 p-1 box-content bg-gradient-to-b from-white to-blue-100/10 rounded-full shadow-lg flex items-center justify-center"
                    >
                        <img
                            src="@/assets/images/index/wdbg.png"
                            alt="我的报告"
                            class="h-12 w-12"
                        />
                    </div>
                    <div class="text-center mt-1 font-bold">我的报告</div>
                </div>
            </div>
        </div>
        <div class="relative p-4 pt-0">
            <div
                class="grid grid-cols-2 gap-4 my-4"
                style="grid-template-rows: repeat(2, 1fr)"
            >
                <template v-for="(service, index) in services" :key="index">
                    <div
                        class="relative flex flex-col px-4 py-2 rounded-xl min-h-24 shadow-lg"
                        :class="index === 0 ? 'row-span-2' : ''"
                        :style="`background: url(${service.bg}) no-repeat; background-size: cover; background-position: center;`"
                        @click="toInquire(service.name)"
                    >
                        <div class="min-h-18 flex flex-col items-start px-1">
                            <div
                                class="mt-1 max-w-max text-left text-gray-600 font-bold"
                            >
                                {{ service.title }}
                            </div>
                            <!-- <div class="max-w-max text-left text-xs text-gray-600">
                                <div>{{ service.subtitle }}</div>
                            </div> -->
                            <div
                                class="mt-2 rounded-lg px-1 text-sm text-white shadow-xl w-max flex items-center"
                                :style="`background-color: ${service.goColor}`"
                            >
                                GO
                                <img
                                    src="@/assets/images/index/go_icon.png"
                                    alt="右箭头"
                                    class="ml-0.5 h-4 w-4 inline-block align-middle"
                                />
                            </div>
                        </div>
                    </div>
                </template>
            </div>
            <div class="grid grid-cols-3 gap-4 my-4">
                <template v-for="(service, index) in riskServices" :key="index">
                    <div
                        class="relative flex flex-col px-3 py-2 rounded-xl min-h-24 shadow-lg"
                        :style="`background: url(${service.bg}) no-repeat; background-size: cover; background-position: center;`"
                        @click="toInquire(service.name)"
                    >
                        <div class="min-h-18 flex flex-col items-start px-1">
                            <div
                                class="mt-1 max-w-max text-left text-gray-600 font-bold"
                            >
                                {{ service.title }}
                            </div>
                            <!-- <div class="max-w-max text-left text-xs text-gray-600">
                                <div>{{ service.subtitle }}</div>
                            </div> -->
                            <div
                                class="mt-1 rounded-lg px-1 text-xs text-white shadow-xl w-max flex items-center"
                                :style="`background-color: ${service.goColor}`"
                            >
                                GO
                                <img
                                    src="@/assets/images/index/go_icon.png"
                                    alt="右箭头"
                                    class="ml-0.5 h-3 w-3 inline-block align-middle"
                                />
                            </div>
                        </div>
                    </div>
                </template>
            </div>
            <SectionTitle title="商务合作" class="mt-8" />
            <div
                class="mt-4 rounded-xl overflow-hidden bg-white shadow-xl"
                @click="toCooperation"
            >
                <img
                    src="@/assets/images/index_a_banner.png"
                    class="w-full h-full"
                    alt="大数据服务横幅"
                    mode="widthFix"
                />
            </div>
            <!-- <div class="mt-4 rounded-2xl overflow-hidden shadow-xl" @click="toBigData">
                <img src="@/assets/images/index_b_banner.png" class="w-full h-full" mode="widthFix" />
            </div> -->
            <div
                class="mt-4 box-border h-14 w-full flex items-center rounded-lg shadow-lg bg-white text-gray-700 px-4"
                @click="toHistory"
            >
                <div class="mr-4 h-full flex items-center justify-center">
                    <img
                        class="w-10 h-10"
                        src="@/assets/images/bg_icon.png"
                        mode="widthFix"
                    />
                </div>
                <div class="flex-1">
                    <div class="text-gray-800">我的历史查询记录</div>
                    <div class="text-xs text-gray-500">
                        查询记录有效期为30天
                    </div>
                </div>
                <img
                    src="@/assets/images/index/right.png"
                    alt="右箭头"
                    class="h-6 w-6"
                />
            </div>
        </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>

<route type="home" lang="json">
{
    "layout": "home"
}
</route>
