<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 statusMap = {
    "0": {
        text: "空号",
        description: "近一个月内出现过空号的号码",
        color: "#f44336", // 红色
        icon: "close-circle-o"
    },
    "1": {
        text: "实号",
        description: "活跃号码（命中准确率100%，误差率<5%），出现误差原因，可能是手机的包月套餐使用",
        color: "#4caf50", // 绿色
        icon: "checked"
    },
    "2": {
        text: "停机",
        description: "近一个月内出现过停机的号码（命中准确率100%，误差率5%），出现误差的原因，可能是停机的号码重新开通使用",
        color: "#ff9800", // 橙色
        icon: "warning-o"
    },
    "3": {
        text: "未知",
        description: "无该号码相关记录，可能为特殊号码",
        color: "#9e9e9e", // 灰色
        icon: "question-o"
    },
    "4": {
        text: "沉默号",
        description: "可能为两种情况，一种是超过半年没有激活过的空号，二是近三月流量均消耗低于30MB的用户也有可能随时停机",
        color: "#607d8b", // 蓝灰色
        icon: "info-o"
    },
    "5": {
        text: "风险号",
        description: "属于长时间关机或未开通语音服务以及易投诉的用户",
        color: "#e91e63", // 粉红色
        icon: "warning"
    }
};

// 获取状态
const phoneStatus = computed(() => {
    if (isEmptyData.value || props.data.status === undefined) {
        return {
            text: "未知",
            description: "未能获取到手机号状态信息",
            color: "#9e9e9e",
            icon: "question-o"
        };
    }

    return statusMap[props.data.status] || {
        text: `未知状态(${props.data.status})`,
        description: "系统未识别的状态代码",
        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="status-card p-6 rounded-lg" :style="{ borderColor: phoneStatus.color }">
                    <div class="flex items-center mb-6">
                        <van-icon :name="phoneStatus.icon" :color="phoneStatus.color" size="40" />
                        <div class="ml-4">
                            <div class="text-2xl font-bold" :style="{ color: phoneStatus.color }">{{ phoneStatus.text }}
                            </div>
                            <div class="text-sm text-gray-500 mt-1">手机号状态</div>
                        </div>
                    </div>

                    <div class="description p-4 bg-gray-50 rounded-lg text-sm text-gray-700">
                        {{ phoneStatus.description }}
                    </div>
                </div>

                <!-- 状态说明 -->
                <div class="status-info mt-6 p-4 bg-gray-50 rounded-lg">
                    <div class="text-sm text-gray-700">
                        <div class="mb-3 font-bold">状态说明：</div>
                        <div class="grid grid-cols-1 gap-3">
                            <div class="flex items-start" v-for="(status, key) in statusMap" :key="key">
                                <div class="flex-shrink-0 w-3 h-3 rounded-full mt-1 mr-2"
                                    :style="{ backgroundColor: status.color }">
                                </div>
                                <div>
                                    <span class="font-bold">{{ status.text }}：</span>
                                    <span>{{ status.description }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.status-card {
    @apply border-2 border-solid shadow-sm;
    transition: all 0.3s ease;
}
</style>