<template>
    <div class="card">
        <!-- 手机号码展示 -->
        <div class="pb-4">
            <ul>
                <li class="flex justify-between py-2 border-b">
                    <span class="font-medium">手机号码</span>
                    <span>{{ maskMobile(params?.mobile) }}</span>
                </li>
                <li class="flex justify-between py-2 border-b">
                    <span class="font-medium">业务日期</span>
                    <span>{{ formatDate(params?.startDate) }}</span>
                </li>
            </ul>
        </div>
        <!-- 二次卡状态展示 -->
        <div v-if="data?.code === 1026" class="bg-green-100 text-gray-700 p-4 rounded-lg mb-6">
            <h3 class="text-xl font-semibold">非二次卡</h3>
            <p class="text-sm">该手机号码不是二次卡，请注意核对。</p>
        </div>

        <div v-if="data?.code === 1025" class="bg-red-500 text-white p-4 rounded-lg mb-6">
            <h3 class="text-xl font-semibold">二次卡</h3>
            <p class="text-sm">该手机号码是二次卡，请注意核对。</p>
        </div>


    </div>
</template>

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

// 接收父组件传入的 props
const props = defineProps({
    data: Object,
    params: Object,
});
props.data.code = 1025
// 脱敏函数：手机号码脱敏（保留前三位和后四位）
const maskMobile = (mobile) => {
    if (!mobile) return '';
    return mobile.replace(/^(\d{3})(?:\d+)(\d{4})$/, "$1****$2");
};
// 格式化日期函数：将日期格式化为 YYYY-MM-DD
const formatDate = (dateString) => {
    if (!dateString) return '';
    // 确保输入是一个8位数字字符串，格式为 YYYYMMDD
    const year = dateString.slice(0, 4);
    const month = dateString.slice(4, 6);
    const day = dateString.slice(6, 8);

    // 返回格式化后的日期
    return `${year}-${month}-${day}`;
};
</script>

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