<template>
    <div class="card">
        <!-- 手机号码展示 -->
        <!-- 风险等级展示 -->
        <div v-if="data?.filterType === '0'" class="bg-green-100 text-green-700 p-4 rounded-lg">
            <h3 class="text-xl font-semibold">安全号码</h3>
            <p class="text-sm">该手机号码为安全号码，没有发现任何风险。</p>
        </div>

        <div v-if="data?.filterType === '1'" class="bg-red-100 text-red-700 p-4 rounded-lg">
            <h3 class="text-xl font-semibold">高危</h3>
            <p class="text-sm">该手机号码存在较高风险，请谨慎处理。</p>
        </div>

        <div v-if="data?.filterType === '2'" class="bg-yellow-100 text-yellow-700 p-4 rounded-lg">
            <h3 class="text-xl font-semibold">中危</h3>
            <p class="text-sm">该手机号码存在一定风险，请留意相关信息。</p>
        </div>

        <div v-if="data?.filterType === '3'" class="bg-blue-100 text-blue-700 p-4 rounded-lg">
            <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: {
        type: Object,
        required: true,
    },
    params: {
        type: Object,
        required: true,
    }
});
// 脱敏函数：手机号码脱敏（保留前三位和后四位）
const maskMobile = (mobile) => {
    if (!mobile) return '';
    return mobile.replace(/^(\d{3})(?:\d+)(\d{4})$/, "$1****$2");
};
</script>

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