<script setup>
import LTitle from "@/components/LTitle.vue";
import { defineProps, computed } from "vue";

const props = defineProps({
    data: {
        type: Object,
        required: true,
    },
});

// 判断是否为空数据
const isEmptyData = computed(() => !props.data || Object.keys(props.data).length === 0);

// 根据验证结果获取对应状态信息
const verificationStatus = computed(() => {
    if (isEmptyData.value) return { text: "无数据", color: "#9e9e9e", icon: "question-o" };

    const result = props.data.verification;

    switch (result) {
        case "0":
            return { text: "验证一致", color: "#4caf50", icon: "checked" };
        case "1":
            return { text: "验证不一致", color: "#f44336", icon: "close" };
        case "2":
            return { text: "卡状态异常", color: "#ff9800", icon: "warning-o" };
        default:
            return { text: "未知结果", color: "#9e9e9e", icon: "question-o" };
    }
});

// 获取详细说明文本
const getDetailText = computed(() => {
    if (isEmptyData.value) return "";

    const result = props.data.verification;

    switch (result) {
        case "0":
            return "银行卡三要素信息验证一致";
        case "1":
            return "银行卡三要素信息验证不一致";
        case "2":
            return "卡状态异常或无法验证，请联系银行或发卡行";
        default:
            return "未知验证结果";
    }
});
</script>

<template>
    <div class="card">
        <div class="flex flex-col gap-y-4">
            <LTitle title="银行卡三要素综合验证" type="blue-green" />

            <template v-if="isEmptyData">
                <div class="flex flex-col items-center justify-center p-6">
                    <van-icon name="question-o" size="60" color="#9e9e9e" />
                    <div class="mt-4 text-lg font-bold text-gray-600">无验证数据</div>
                    <div class="mt-2 text-gray-500 text-center">未能获取到银行卡验证信息</div>
                </div>
            </template>

            <template v-else>
                <!-- 验证结果卡片 -->
                <div class="verification-card p-6 rounded-lg shadow-sm border border-gray-200 bg-white">
                    <div class="flex items-center justify-center mb-6">
                        <div class="result-icon">
                            <van-icon :name="verificationStatus.icon" :color="verificationStatus.color" size="72" />
                        </div>
                    </div>

                    <div class="flex flex-col items-center">
                        <div class="text-2xl font-bold mb-2" :style="{ color: verificationStatus.color }">
                            {{ verificationStatus.text }}
                        </div>
                        <div class="text-sm text-gray-500 text-center">
                            {{ getDetailText }}
                        </div>
                    </div>
                </div>


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

<style lang="scss" scoped>
.verification-card {
    @apply bg-white;
}

.result-icon {
    @apply flex items-center justify-center p-4 rounded-full;
}
</style>