<template>
    <div class="card" style="padding-left: 0; padding-right: 0; padding-bottom: 24px;">
        <div class="flex flex-col gap-y-2">
            <!-- 报告信息 -->
            <div class="flex items-center justify-between py-2">
                <LTitle title="报告信息"></LTitle>
                <!-- 分享按钮 -->
                <ShareReportButton v-if="!isShare" :order-id="orderId" :order-no="orderNo" :is-example="!orderId"
                    class="mr-4" />
            </div>
            <div class="flex flex-col gap-2 my-2 mx-4">
                <div class="flex pb-2 pl-2">
                    <span class="text-[#666666] w-[6em]">报告时间：</span>
                    <span class="text-gray-600">{{
                        reportDateTime ||
                        "2025-01-01 12:00:00"
                        }}</span>
                </div>
                <div class="flex  pb-2 pl-2" v-if="!isEmpty">
                    <span class="text-[#666666] w-[6em]">报告项目：</span>
                    <span class="text-gray-600 font-bold">
                        {{ reportName }}</span>
                </div>
            </div>

            <!-- 报告对象 -->
            <template v-if="Object.keys(reportParams).length != 0">
                <LTitle title="报告对象"></LTitle>
                <div class="flex flex-col gap-2 my-2 mx-4">
                    <!-- 姓名 -->
                    <div class="flex pb-2 pl-2" v-if="reportParams?.name">
                        <span class="text-[#666666] w-[6em]">姓名</span>
                        <span class="text-gray-600">{{
                            maskValue(
                            "name",
                            reportParams?.name
                            )
                            }}</span>
                    </div>

                    <!-- 身份证号 -->
                    <div class="flex  pb-2 pl-2" v-if="reportParams?.id_card">
                        <span class="text-[#666666] w-[6em]">身份证号</span>
                        <span class="text-gray-600">{{
                            maskValue(
                            "id_card",
                            reportParams?.id_card
                            )
                            }}</span>
                    </div>

                    <!-- 手机号 -->
                    <div class="flex  pb-2 pl-2" v-if="reportParams?.mobile">
                        <span class="text-[#666666] w-[6em]">手机号</span>
                        <span class="text-gray-600">{{
                            maskValue(
                            "mobile",
                            reportParams?.mobile
                            )
                            }}</span>
                    </div>

                    <!-- 验证卡片 -->
                    <div class="flex flex-col gap-4 mt-4">
                        <!-- 身份证检查结果 -->
                        <div class="flex items-center px-4 py-3 flex-1 border border-[#EEEEEE] rounded-lg bg-[#F9F9F9]">
                            <div class="w-11 h-11 flex items-center justify-center mr-4">
                                <img src="@/assets/images/report/sfz.png" alt="身份证" class="w-10 h-10 object-contain" />
                            </div>
                            <div class="flex-1">
                                <div class="font-bold text-gray-800 text-lg">
                                    身份证检查结果
                                </div>
                                <div class="text-sm text-[#999999]">
                                    身份证信息核验通过
                                </div>
                            </div>
                            <div class="w-11 h-11 flex items-center justify-center ml-4">
                                <img src="@/assets/images/report/zq.png" alt="资金安全" class="w-10 h-10 object-contain" />
                            </div>
                        </div>

                        <!-- 手机号检测结果 -->
                        <!-- <div class="flex items-center px-4 py-3 flex-1 border border-[#EEEEEE] rounded-lg bg-[#F9F9F9]">
                            <div class="w-11 h-11 flex items-center justify-center mr-4">
                                <img src="@/assets/images/report/sjh.png" alt="手机号" class="w-10 h-10 object-contain" />
                            </div>
                            <div class="flex-1">
                                <div class="font-bold text-gray-800 text-lg">
                                    手机号检测结果
                                </div>
                                <div class="text-sm text-[#999999]">
                                    被查询人姓名与运营商提供的一致
                                </div>
                                <div class="text-sm text-[#999999]">
                                    被查询人身份证与运营商提供的一致
                                </div>
                            </div>
                            <div class="w-11 h-11 flex items-center justify-center ml-4">
                                <img src="@/assets/images/report/zq.png" alt="资金安全" class="w-10 h-10 object-contain" />
                            </div>
                        </div> -->
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>

<script setup>
import LTitle from './LTitle.vue'
import ShareReportButton from './ShareReportButton.vue'

const props = defineProps({
    reportParams: {
        type: Object,
        required: true
    },
    reportDateTime: {
        type: [String, null],
        required: false,
        default: null
    },
    reportName: {
        type: String,
        required: true
    },
    isEmpty: {
        type: Boolean,
        required: true
    },
    isShare: {
        type: Boolean,
        required: false,
        default: false
    },
    orderId: {
        type: [String, Number],
        required: false,
        default: null
    },
    orderNo: {
        type: String,
        required: false,
        default: null
    }
})

// 脱敏函数
const maskValue = (type, value) => {
    if (!value) return value;
    if (type === "name") {
        // 姓名脱敏（保留首位）
        if (value.length === 1) {
            return "*"; // 只保留一个字，返回 "*"
        } else if (value.length === 2) {
            return value[0] + "*"; // 两个字，保留姓氏，第二个字用 "*" 替代
        } else {
            return (
                value[0] +
                "*".repeat(value.length - 2) +
                value[value.length - 1]
            ); // 两个字以上，保留第一个和最后一个字，其余的用 "*" 替代
        }
    } else if (type === "id_card") {
        // 身份证号脱敏（保留前6位和最后4位）
        return value.replace(/^(.{6})(?:\d+)(.{4})$/, "$1****$2");
    } else if (type === "mobile") {
        if (value.length === 11) {
            return value.substring(0, 3) + "****" + value.substring(7);
        }
        return value; // 如果手机号不合法或长度不为 11 位，直接返回原手机号
    }
    return value;
};
</script>

<style scoped>
/* 组件样式已通过 Tailwind CSS 类实现 */
</style>
