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

    const type = props.data.mobiletype;

    if (type && type.includes("移动")) {
        return { icon: "phone-circle-o", color: "#1976d2" }; // 蓝色 - 移动
    } else if (type && type.includes("联通")) {
        return { icon: "phone-circle-o", color: "#f44336" }; // 红色 - 联通
    } else if (type && type.includes("电信")) {
        return { icon: "phone-circle-o", color: "#ff9800" }; // 橙色 - 电信
    } else if (type && type.includes("广电")) {
        return { icon: "phone-circle-o", color: "#4caf50" }; // 绿色 - 广电
    } else {
        return { icon: "phone-circle-o", 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="phone-info-card p-6 rounded-lg shadow-sm border border-gray-200 bg-white">
                    <!-- 手机归属地头部 -->
                    <div class="flex items-center mb-6">
                        <div class="phone-icon p-3 rounded-full mr-4"
                            :style="{ backgroundColor: operatorInfo.color + '20' }">
                            <van-icon :name="operatorInfo.icon" :color="operatorInfo.color" size="36" />
                        </div>
                        <div>
                            <div class="text-2xl font-bold">{{ data.mobileprovice }} {{ data.mobilearea }}</div>
                            <div class="text-sm text-gray-500">{{ data.mobiletype }}</div>
                        </div>
                    </div>

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

                        <div class="detail-item" v-if="data.mobilearea">
                            <div class="detail-label text-sm text-gray-500">归属地地区</div>
                            <div class="detail-value">{{ data.mobilearea }}</div>
                        </div>

                        <div class="detail-item" v-if="data.proviceid">
                            <div class="detail-label text-sm text-gray-500">归属地省份ID</div>
                            <div class="detail-value">{{ data.proviceid }}</div>
                        </div>

                        <div class="detail-item" v-if="data.areaid">
                            <div class="detail-label text-sm text-gray-500">归属地地区ID</div>
                            <div class="detail-value">{{ data.areaid }}</div>
                        </div>

                        <div class="detail-item" v-if="data.mobiletype">
                            <div class="detail-label text-sm text-gray-500">运营商类别</div>
                            <div class="detail-value">{{ data.mobiletype }}</div>
                        </div>

                        <div class="detail-item" v-if="data.areacode">
                            <div class="detail-label text-sm text-gray-500">城市区号</div>
                            <div class="detail-value">{{ data.areacode }}</div>
                        </div>

                        <div class="detail-item" v-if="data.postcode">
                            <div class="detail-label text-sm text-gray-500">邮政编码</div>
                            <div class="detail-value">{{ data.postcode }}</div>
                        </div>
                    </div>
                </div>


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

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

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

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

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