<template>
    <div class="flex items-center justify-center card">
        <div class="max-w-md w-full p-4">

            <!-- 核验结果 -->
            <h3 class="text-xl font-semibold text-gray-700 mb-2">二要素验证结果</h3>
            <div v-if="data.result === 0" class="flex items-center space-x-4 mb-6">
                <div class="h-12 w-12 rounded-full flex flex-shrink-0 items-center justify-center bg-green-500">
                    <span class="text-white text-lg font-bold">✔</span>
                </div>
                <div>
                    <p class="text-lg font-medium text-gray-800">一致</p>
                    <p class="text-sm text-gray-500">姓名和身份证号匹配成功。</p>
                </div>
            </div>
            <div v-else class="flex items-center space-x-4 mb-6">
                <div class="h-12 w-12 rounded-full flex items-center justify-center bg-red-500">
                    <span class="text-white text-lg font-bold">✘</span>
                </div>
                <div>
                    <p class="text-lg font-medium text-gray-800">不一致</p>
                    <p class="text-sm text-gray-500">姓名和身份证号不匹配。</p>
                </div>
            </div>

            <!-- 核验详情 -->
            <!-- <h3 class="text-lg font-semibold text-gray-700 mb-2">附加信息</h3> -->
            <div class="text-sm text-gray-600 space-y-2 ">
                <p>
                    <span class="font-medium text-gray-800">地址：</span>
                    {{ data.address }}
                </p>
                <p>
                    <span class="font-medium text-gray-800">生日：</span>
                    {{ formatBirthday(data.birthday) }}
                </p>
                <p>
                    <span class="font-medium text-gray-800">性别：</span>
                    {{ data.sex }}
                </p>
            </div>

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

<script setup>
const props = defineProps({
    data: {
        type: Object,
        required: true,
    },
    params: {
        type: Object,
        required: true,
    },
});

// 对生日进行格式化显示
const formatBirthday = (birthday) => {
    if (!birthday) return "未知";
    const year = birthday.slice(0, 4);
    const month = birthday.slice(4, 6);
    const day = birthday.slice(6, 8);
    return `${year}年${month}月${day}日`;
};

// 对请求参数进行脱敏处理
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");
    }
    return value;
};

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

<style scoped></style>