<template>
    <div class="flex items-center justify-center card">
        <div class="max-w-md w-full p-2">
            <!-- 核验结果 -->
            <h3 class="text-xl font-semibold text-gray-700 mb-4">核验结果</h3>
            <div v-if="result" class="flex items-center space-x-4">
                <div
                    :class="['h-12 w-12 rounded-full flex flex-shrink-0 items-center justify-center', result.statusClass]">
                    <span class="text-white text-lg font-bold">{{ result.icon }}</span>
                </div>
                <div>
                    <p class="text-lg font-medium text-gray-800">{{ result.message }}</p>
                    <p class="text-sm text-gray-500">{{ result.description }}</p>
                </div>
            </div>
            <div v-else class="text-center mb-6">
                <p class="text-gray-500">无效的核验代码</p>
            </div>

            <!-- 三要素请求参数 -->

        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    data: {
        type: Object,
        required: true,
    },
    params: {
        type: Object,
        required: true,
    },
});
// 核验结果映射
const codeMapping = {
    1000: {
        statusClass: "bg-green-500",
        icon: "✔",
        message: "一致",
        description: "姓名、证件号与手机号码信息完全匹配。",
    },
    1003: {
        statusClass: "bg-yellow-500",
        icon: "⚠",
        message: "不一致",
        description: "姓名、证件号与手机号码信息不一致。",
    },
    1004: {
        statusClass: "bg-red-500",
        icon: "✘",
        message: "姓名不正确",
        description: "请检查姓名输入是否正确。",
    },
    1005: {
        statusClass: "bg-red-500",
        icon: "✘",
        message: "证件号码不正确",
        description: "请检查证件号码输入是否正确。",
    },
};

const result = codeMapping[props.data.code];

// 对请求参数进行脱敏处理
const maskValue = (value, type) => {
    if (type === "name") {
        // 姓名脱敏（保留首位）
        return value.length > 1 ? value[0] + "*".repeat(value.length - 1) : "*";
    } else if (type === "id_card") {
        // 身份证号脱敏（保留前6位和最后4位）
        return value.replace(/^(.{6})(?:\d+)(.{4})$/, "$1****$2");
    } else if (type === "mobile") {
        // 手机号脱敏（保留前三位和后四位）
        return value.replace(/^(\d{3})(?:\d+)(\d{4})$/, "$1****$2");
    }
    return value;
};

const maskedParams = {
    name: maskValue(props.params.name, "name"),
    id_card: maskValue(props.params.id_card, "id_card"),
    mobile: maskValue(props.params.mobile, "mobile"),
};
</script>

<style scoped></style>