<template>
    <div class="card">
        <!-- 状态展示 -->
        <div :class="stateClass" class="text-center rounded-lg py-2">
            <h2 class="text-xl font-semibold mb-2">银行卡四要素校验</h2>
            <p class="text-sm">{{ stateMessage }}</p>
        </div>

    </div>
</template>

<script setup>
import { defineProps, computed } from 'vue'

// 接收 props 参数
const props = defineProps({
    data: {
        type: Object,
        required: true,
    },
    params: {
        type: Object,
        required: true,
    }
})
// 校验状态对应的消息和样式
const stateMessage = computed(() => {
    const state = props.data.data.state
    switch (state) {
        case '1':
            return '验证一致';
        case '2':
            return '验证不一致';
        case '3':
            return '异常情况';
        default:
            return '未知状态';
    }
})

const stateClass = computed(() => {
    const state = props.data.data.state
    switch (state) {
        case '1':
            return 'bg-green-100 text-green-600';
        case '2':
            return 'bg-red-100 text-red-600';
        case '3':
            return 'bg-yellow-100 text-yellow-600';
        default:
            return 'bg-gray-100 text-gray-600';
    }
})
// 脱敏函数，根据类型判断如何脱敏
const maskValue = (value, type) => {
    if (!value) return ''; // 处理空值

    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");
    } else if (type === "mobile") {
        // 手机号脱敏（保留前三位和后四位）
        return value.replace(/^(\d{3})(?:\d+)(\d{4})$/, "$1****$2");
    } else if (type === "bank_card") {
        // 银行卡号脱敏（保留前四位和后四位）
        return value.replace(/^(\d{4})(?:\d+)(\d{4})$/, "$1 **** **** $2");
    }
    return value; // 如果没有匹配的类型，返回原值
};

</script>

<style scoped>
/* 使按钮和状态信息的显示更为美观 */
.bg-green-100 {
    background-color: #d1fad6;
}

.bg-red-100 {
    background-color: #fcd0d0;
}

.bg-yellow-100 {
    background-color: #fdf2b8;
}

.text-green-600 {
    color: #16a34a;
}

.text-red-600 {
    color: #dc2626;
}

.text-yellow-600 {
    color: #e4b200;
}
</style>