<template>
    <div class="flex items-center justify-center card">
        <div class="max-w-md w-full p-4">
            <!-- 请求参数 -->
            <h3 class="text-lg font-semibold text-gray-700 mb-2">核验对象</h3>
            <div class="text-sm text-gray-600 space-y-2 mb-6">
                <p>
                    <span class="font-medium text-gray-800">姓名：</span>
                    {{ maskedParams.name }}
                </p>
                <p>
                    <span class="font-medium text-gray-800">手机号：</span>
                    {{ maskedParams.mobile }}
                </p>
            </div>
            <!-- 核验结果 -->
            <h3 class="text-xl font-semibold text-gray-700 mb-4">手机二要素验证结果</h3>
            <div v-if="data.code === '1000'" 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 flex-shrink-0 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>
                    {{ getPhoneType(data.data.phoneType) }}
                </p>
            </div>


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

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

// 手机号类型映射
const getPhoneType = (type) => {
    const phoneTypeMapping = {
        CMCC: "中国移动",
        CUCC: "中国联通",
        CTCC: "中国电信",
    };
    return phoneTypeMapping[type] || "未知类型";
};

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

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

<style scoped></style>