<template>
    <div class="card">
        <div class="pb-4">
            <h3 class="text-xl font-semibold mb-4">校验对象</h3>
            <ul>
                <li class="flex justify-between py-2 border-b">
                    <span class="font-medium">手机号码</span>
                    <span>{{ maskMobile(params?.mobile) }}</span>
                </li>
            </ul>
        </div>
        <!-- 手机在网时长状态展示 -->
        <div class=" bg-blue-100 text-blue-700 p-4 rounded-lg mb-6">
            <h3 class="text-xl font-semibold">手机在网时长</h3>
            <p class="text-lg font-medium">{{ getTimeDuration(data?.code) }}</p>
            <p class="text-sm mt-2">运营商：{{ getPhoneType(data?.phoneType) }}</p>
        </div>

        <!-- 手机号码展示 -->

    </div>
</template>

<script setup>
import { defineProps } from 'vue';

// 接收父组件传入的 props
const props = defineProps({
    data: Object,
    params: Object,
});

// 脱敏函数：手机号码脱敏（保留前三位和后四位）
const maskMobile = (mobile) => {
    if (!mobile) return '';
    return mobile.replace(/^(\d{3})(?:\d+)(\d{4})$/, "$1****$2");
};

// 根据 code 获取手机在网时长描述
const getTimeDuration = (code) => {
    switch (code) {
        case 1006:
            return "0 - 3 个月";
        case 1007:
            return "3 - 6 个月";
        case 1008:
            return "6 - 12 个月";
        case 1009:
            return "12 - 24 个月";
        case 1010:
            return "24 个月以上";
        default:
            return "未知时长";
    }
};

// 根据 phoneType 获取运营商名称
const getPhoneType = (phoneType) => {
    switch (phoneType) {
        case "CMCC":
            return "中国移动";
        case "CUCC":
            return "中国联通";
        case "CTCC":
            return "中国电信";
        default:
            return "未知运营商";
    }
};
</script>

<style scoped>
/* 自定义样式 */
</style>