<script setup>
import CBad from "@/ui/CBad.vue";
import CBankLoanApplication from "@/ui/CBankLoanApplication.vue";
import CBankLoanBehavior from "@/ui/CBankLoanBehavior.vue";
import CLawsuit from "@/ui/CLawsuit.vue";
import CRelatedEnterprises from "@/ui/CRelatedEnterprises.vue";
import CSpecialList from "@/ui/CSpecialList.vue";
import { useHttp } from "@/composables/useHttp";

// import CTabs from "@/ui/CTabs.vue";
// import { queryResultByOrder } from "@/api/apis";
import CMarriage from "@/ui/CMarriage.vue";
import { useFetch } from "@vueuse/core";

const productMap = {
    1: "背景调查",
    2: "企业报告",
    3: "家政服务",
    4: "婚姻状态",
    5: "贷前背景调查",
    6: "租赁服务",
    7: "个人风险评估",
};

// 根据 product_id 获取产品名称
function getProductName(productId) {
    return productMap[productId] || "未知类型";
}
const productId = ref(null);
const isDone = ref(true);
const entData = ref(null);
const lawsuitData = ref(null);
const badData = ref(null);
const specialData = ref(null);
const bankLoanApplicationData = ref(null);
const marriageData = ref(null);
const bankLoanBehavior = ref(null);
const feature = ref(null);
const token = ref(null);
const tabs = ref([{ label: "报告概述", value: "overdiv" }]);
const reportItems = ref([]);
const sortedReportItems = computed(() => {
    return reportItems.value.slice().sort((a, b) => a.sort - b.sort);
});
const sortedTabs = computed(() => {
    return tabs.value.slice().sort((a, b) => a.sort - b.sort);
});

onMounted(() => {
    const query = new URLSearchParams(window.location.search);
    feature.value = query.get("feature");
    token.value = query.get("token") || "";
    if (!feature.value) return;

    const { data, isFetching, error, onFetchResponse } = useFetch(
        `/api/v1/query/example?feature=${feature.value}`,
        {
            async beforeFetch({ url, options, cancel }) {
                options.headers = {
                    ...options.headers,
                    Authorization: token.value,
                };

                return {
                    options,
                };
            },
        }
    )
        .get()
        .json();

    onFetchResponse(() => {
        console.log("data", data.value);
        if (data.value.code === 200) {
            productId.value = data.value.data.product_id;
            data.value.data.query_data.forEach((item) => {
                if (item.success) {
                    switch (item.apiID) {
                        case "G09SC02":
                            marriageData.value = item.data;
                            tabs.value.push({
                                label: "婚姻状态",
                                value: "marriage",
                                sort: 1,
                            });
                            reportItems.value.push({
                                label: "婚姻状态",
                                value: "marriage",
                                sort: 1,
                            });
                            break;
                        case "G27BJ05":
                            bankLoanApplicationData.value = item.data;
                            tabs.value.push({
                                label: "借贷申请记录",
                                value: "netloan",
                                sort: 7,
                            });
                            reportItems.value.push({
                                label: "借贷申请记录",
                                value: "netloan",
                                sort: 7,
                            });
                            break;
                        case "G28BJ05":
                            bankLoanBehavior.value = item.data;
                            tabs.value.push({
                                label: "借贷记录",
                                value: "loan",
                                sort: 6,
                            });
                            reportItems.value.push({
                                label: "借贷记录",
                                value: "loan",
                                sort: 6,
                            });
                            break;
                        case "G26BJ05":
                            specialData.value = item.data;
                            tabs.value.push({
                                label: "异常名单",
                                value: "special",
                                sort: 5,
                            });
                            reportItems.value.push({
                                label: "异常名单",
                                value: "special",
                                sort: 5,
                            });
                            break;
                        case "G05HZ01":
                            entData.value = item.data;
                            tabs.value.push({
                                label: "关联企业",
                                value: "ent",
                                sort: 4,
                            });
                            reportItems.value.push({
                                label: "关联企业",
                                value: "ent",
                                sort: 4,
                            });
                            break;
                        case "G34BJ03":
                            badData.value = item.data;
                            tabs.value.push({
                                label: "不良风险评估",
                                value: "bad",
                                sort: 3,
                            });
                            reportItems.value.push({
                                label: "不良风险评估",
                                value: "bad",
                                sort: 3,
                            });
                            break;
                        case "G35SC01":
                            lawsuitData.value = item.data;
                            tabs.value.push({
                                label: "涉诉案件",
                                value: "lawsuit",
                                sort: 2,
                            });
                            reportItems.value.push({
                                label: "涉诉案件",
                                value: "lawsuit",
                                sort: 2,
                            });
                            break;
                        default:
                            console.log(`未知的apiID: ${item.apiID}`);
                    }
                }
            });
        }
    });
});
</script>

<template>
    <div class="min-h-full from-blue-100 to-white bg-gradient-to-b">
        <template v-if="isDone">
            <div class="flex flex-col gap-y-4 p-4 pt-12">
                <div id="overdiv" class="title">报告概述</div>
                <div class="card">
                    <div class="flex flex-col gap-y-2">
                        <div class="flex justify-between">
                            <span class="text-gray-700 font-bold">报告时间：</span>
                            <span class="text-gray-600">2024年11月18日 23:11:23</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-700 font-bold">报告项目：</span>
                            <span class="text-gray-600">{{
                                getProductName(productId)
                                }}</span>
                        </div>
                    </div>
                    <div>
                        <LTitle class="my-4" title="报告内容" type="blue-green" />
                        <div class="flex flex-col gap-y-2">
                            <div v-for="item in sortedReportItems" :key="item.value" class="flex justify-between">
                                <span class="text-gray-700 font-bold">{{ item.label }}：</span>
                                <span class="text-green-500 font-bold">已解锁</span>
                            </div>
                        </div>
                    </div>
                </div>
                <template v-if="marriageData">
                    <div id="marriage" class="title">婚姻状态</div>
                    <CMarriage :data="marriageData" />
                </template>
                <template v-if="lawsuitData">
                    <div id="lawsuit" class="title">涉诉案件</div>
                    <CLawsuit :data="lawsuitData" />
                </template>
                <template v-if="badData">
                    <div id="bad" class="title">不良风险评估</div>
                    <CBad :data="badData" />
                </template>
                <template v-if="entData">
                    <div id="ent" class="title">关联企业</div>
                    <CRelatedEnterprises :data="entData" />
                </template>
                <template v-if="specialData">
                    <div id="special" class="title">异常名单</div>
                    <CSpecialList :data="specialData" />
                </template>
                <template v-if="bankLoanBehavior">
                    <div id="loan" class="title">借贷记录</div>
                    <CBankLoanBehavior :data="bankLoanBehavior" />
                </template>
                <template v-if="bankLoanApplicationData">
                    <div id="netloan" class="title">贷款申请记录</div>
                    <CBankLoanApplication :data="bankLoanApplicationData" />
                </template>
                <div class="card">
                    <div>
                        <div class="text-bold text-blue-500 mb-2">报告说明</div>
                        <div>
                            本报告的数据由用户本人明确授权后，我们才向相关合法存有用户个人数据的机构调取本报告相关内容，本平台只做大数据的获取与分析，仅向用户个人展示参考。
                        </div>
                        <p>
                            &nbsp; &nbsp; 报告有效期<strong class="text-red-500">30天</strong>，过期自动删除。
                        </p>
                        <p>
                            &nbsp; &nbsp;
                            若您的数据不全面，可能是数据具有延迟性或者合作信息机构未获取到您的数据。若数据有错误请联系客服
                        </p>
                    </div>
                </div>
            </div>
        </template>
    </div>
</template>

<style lang="scss" scoped>
.title {
    @apply mx-auto mt-2 w-64 border rounded-3xl bg-gradient-to-r from-blue-400 via-green-500 to-teal-500 py-2 text-center text-white font-bold;
}
</style>
