<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.final_auth_result;

    switch (result) {
        case "0":
            return { text: "验证一致", color: "#4caf50", icon: "checked" };
        case "1":
            return { text: "验证不一致", color: "#f44336", icon: "close" };
        default:
            return { text: "未知结果", color: "#9e9e9e", icon: "question-o" };
    }
});
</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">
                            银行卡和身份证号信息验证{{ verificationStatus.text === "验证一致" ? "通过" : "未通过" }}
                        </div>
                    </div>

                    <!-- 验证详情 -->
                    <!-- <div class="verification-details mt-6 p-4 rounded-lg border border-gray-200">
                        <div class="flex items-center mb-2">
                            <van-icon name="info-o" color="#2196f3" class="mr-2" />
                            <span class="font-bold">验证结果</span>
                        </div>
                        <div class="ml-6">
                            <div class="flex items-center">
                                <span class="text-gray-700 mr-2">结果代码:</span>
                                <span class="font-medium">{{ props.data.final_auth_result }}</span>
                            </div>
                        </div>
                    </div> -->
                </div>

                <!-- 结果说明 -->
                <!-- <div class="result-info mt-4 p-4 bg-gray-50 rounded-lg">
                    <div class="text-sm text-gray-700">
                        <div class="mb-2 font-bold">结果说明：</div>
                        <div class="grid grid-cols-1 gap-1">
                            <div class="flex items-start">
                                <span class="font-bold w-16">0：</span>
                                <span>验证一致</span>
                            </div>
                            <div class="flex items-start">
                                <span class="font-bold w-16">1：</span>
                                <span>验证不一致</span>
                            </div>
                        </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>