<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 cardTypeColor = computed(() => {
    if (isEmptyData.value) return "#9e9e9e";

    if (props.data.cardtype?.includes("借记卡")) {
        return "#4caf50"; // 绿色 - 借记卡
    } else if (props.data.cardtype?.includes("信用卡")) {
        return "#2196f3"; // 蓝色 - 信用卡
    } else if (props.data.cardtype?.includes("准贷记卡")) {
        return "#ff9800"; // 橙色 - 准贷记卡
    }

    return "#9e9e9e"; // 灰色 - 其他类型
});
</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="bank-card p-6 rounded-lg shadow-sm border border-gray-200">
                    <!-- 银行信息头部 -->
                    <div class="flex items-center mb-6">
                        <div class="bank-logo mr-4" v-if="data.banklogo">
                            <img :src="data.banklogo" alt="银行Logo" class="w-12 h-12 object-contain" />
                        </div>
                        <div>
                            <div class="text-xl font-bold">{{ data.bankname || '未知银行' }}</div>
                            <div class="flex items-center mt-1">
                                <span class="card-type-badge px-2 py-1 rounded text-xs text-white mr-2"
                                    :style="{ backgroundColor: cardTypeColor }">
                                    {{ data.cardtype || '未知类型' }}
                                </span>
                                <span class="text-sm text-gray-500">{{ data.nature || '' }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- 银行卡详情 -->
                    <div class="bank-details grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="detail-item" v-if="data.province || data.city">
                            <div class="detail-label text-sm text-gray-500">发卡行归属地</div>
                            <div class="detail-value">{{ data.province || '' }} {{ data.city || '' }}</div>
                        </div>

                        <div class="detail-item" v-if="data.card_bin">
                            <div class="detail-label text-sm text-gray-500">银行卡BIN码</div>
                            <div class="detail-value">{{ data.card_bin }}</div>
                        </div>

                        <div class="detail-item" v-if="data.bin_digits">
                            <div class="detail-label text-sm text-gray-500">BIN码长度</div>
                            <div class="detail-value">{{ data.bin_digits }} 位</div>
                        </div>

                        <div class="detail-item" v-if="data.card_digits">
                            <div class="detail-label text-sm text-gray-500">银行卡长度</div>
                            <div class="detail-value">{{ data.card_digits }} 位</div>
                        </div>

                        <div class="detail-item" v-if="data.isLuhn">
                            <div class="detail-label text-sm text-gray-500">Luhn校验</div>
                            <div class="detail-value">
                                <van-icon name="checked" color="#4caf50" v-if="data.isLuhn === 'true'" />
                                <van-icon name="close" color="#f44336" v-else />
                                {{ data.isLuhn === 'true' ? '通过' : '未通过' }}
                            </div>
                        </div>
                    </div>

                    <!-- 客服电话 -->
                    <div class="kefu-info mt-6 p-4 bg-gray-50 rounded-lg flex items-center" v-if="data.kefu">
                        <van-icon name="phone-circle-o" color="#2196f3" size="24" />
                        <div class="ml-3">
                            <div class="text-sm text-gray-500">相关银行客服电话</div>
                            <div class="text-lg font-bold">{{ data.kefu }}</div>
                        </div>
                    </div>
                </div>

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

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

.detail-item {
    @apply mb-3;
}

.detail-value {
    @apply text-base font-medium;
}
</style>