<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 genderInfo = computed(() => {
    if (isEmptyData.value) return { icon: "question-o", color: "#9e9e9e" };

    const gender = props.data.sex;

    if (gender === "男") {
        return { icon: "contact", color: "#1976d2" }; // 蓝色 - 男性
    } else if (gender === "女") {
        return { icon: "like-o", color: "#f44336" }; // 红色 - 女性
    } else {
        return { icon: "contact", color: "#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="idcard-info-card p-6 rounded-lg shadow-sm border border-gray-200 bg-white">
                    <!-- 身份证信息头部 -->
                    <div class="flex items-center mb-6">
                        <div class="id-icon p-3 rounded-full mr-4"
                            :style="{ backgroundColor: genderInfo.color + '20' }">
                            <van-icon :name="genderInfo.icon" :color="genderInfo.color" size="36" />
                        </div>
                        <div>
                            <div class="text-2xl font-bold">{{ data.address }}</div>
                            <div class="text-sm text-gray-500">{{ data.sex }} · {{ data.age }}岁 · {{ data.birthday }}
                            </div>
                        </div>
                    </div>

                    <!-- 身份证信息详情 -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-2">
                        <div class="detail-item" v-if="data.address">
                            <div class="detail-label text-sm text-gray-500">身份证归属地</div>
                            <div class="detail-value">{{ data.address }}</div>
                        </div>

                        <div class="detail-item" v-if="data.birthday">
                            <div class="detail-label text-sm text-gray-500">出生日期</div>
                            <div class="detail-value">{{ data.birthday }}</div>
                        </div>

                        <div class="detail-item" v-if="data.age">
                            <div class="detail-label text-sm text-gray-500">年龄</div>
                            <div class="detail-value">{{ data.age }}岁</div>
                        </div>

                        <div class="detail-item" v-if="data.sex">
                            <div class="detail-label text-sm text-gray-500">性别</div>
                            <div class="detail-value">{{ data.sex }}</div>
                        </div>

                        <div class="detail-item" v-if="data.zodiac">
                            <div class="detail-label text-sm text-gray-500">生肖</div>
                            <div class="detail-value">{{ data.zodiac }}生肖</div>
                        </div>

                        <div class="detail-item" v-if="data.xingzuo">
                            <div class="detail-label text-sm text-gray-500">星座</div>
                            <div class="detail-value">{{ data.xingzuo }}</div>
                        </div>
                    </div>
                </div>

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

<style lang="scss" scoped>
.idcard-info-card {
    @apply transition-all duration-200;

    &:hover {
        @apply shadow-md;
    }
}

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

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