<script setup>
import LTitle from "@/components/LTitle.vue";
import { defineProps, ref, computed } from "vue";

const props = defineProps({
    data: {
        type: Object,
        required: true,
    },
});

// 判断是否为空数据
const isEmptyData = computed(() => !props.data || Object.keys(props.data).length === 0);

// 运营商映射
const providerMap = {
    "1": "移动",
    "2": "电信",
    "3": "联通"
};

// 获取运营商名称
const providerName = computed(() => {
    if (isEmptyData.value || !props.data.provider) return '';
    return providerMap[props.data.provider] || '未知运营商';
});

// 获取消费档次
const consumptionLevel = computed(() => {
    if (isEmptyData.value || !props.data.level) return '';
    return props.data.level;
});

// 获取消费档次的人性化描述
const getLevelDescription = computed(() => {
    if (isEmptyData.value || !props.data.level || !props.data.provider) return '未知';

    const level = props.data.level;
    const provider = props.data.provider;

    // 移动运营商档次描述
    if (provider === "1") {
        if (level === "[0,50)") return "月消费低于50元";
        if (level === "[50,100)") return "月消费50-100元";
        if (level === "[100,150)") return "月消费100-150元";
        if (level === "[150,200)") return "月消费150-200元";
        if (level === "[200,-)") return "月消费200元以上";
    }

    // 电信运营商档次描述
    if (provider === "2") {
        if (level === "[0,50)") return "月消费低于50元";
        if (level === "[50,100)") return "月消费50-100元";
        if (level === "[100,200)") return "月消费100-200元";
        if (level === "[200,300)") return "月消费200-300元";
        if (level === "[300,400)") return "月消费300-400元";
        if (level === "[400,-)") return "月消费400元以上";
    }

    // 联通运营商档次描述
    if (provider === "3") {
        if (level === "[0,40)") return "月消费低于40元";
        if (level === "[40,80)") return "月消费40-80元";
        if (level === "[80,160)") return "月消费80-160元";
        if (level === "[160,-)") return "月消费160元以上";
    }

    return level; // 如果没有匹配到，返回原始值
});

// 获取运营商对应的颜色
const providerColor = computed(() => {
    if (isEmptyData.value) return '#10b981';

    const colorMap = {
        "1": "#1976d2", // 移动蓝色
        "2": "#f44336", // 电信红色
        "3": "#ff9800"  // 联通橙色
    };

    return colorMap[props.data.provider] || '#10b981';
});

onMounted(() => {
    console.log('CMOB035');
    console.log(props.data);
});
</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="info-o" size="60" color="#10b981" />
                    <div class="mt-4 text-lg font-bold text-green-600">无消费档次数据</div>
                    <div class="mt-2 text-gray-500 text-center">暂无该手机号的月消费档次数据或未获取到相关信息</div>
                </div>
            </template>

            <template v-else>
                <div class="consumption-card">
                    <div class="provider-info" :style="{ borderColor: providerColor }">
                        <van-icon name="phone-o" :color="providerColor" size="24" />
                        <span class="provider-name" :style="{ color: providerColor }">{{ providerName }}</span>
                    </div>

                    <div class="level-info">
                        <div class="level-title">消费档次</div>
                        <div class="level-value" :style="{ color: providerColor }">{{ getLevelDescription }}</div>
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.consumption-card {
    @apply p-4 border rounded-lg shadow-sm;
}

.provider-info {
    @apply flex items-center mb-6 pb-3 border-b-2 border-solid;
}

.provider-name {
    @apply ml-2 text-xl font-bold;
}

.level-info {
    @apply flex flex-col items-center justify-center;
}

.level-title {
    @apply text-gray-600 text-sm mb-2;
}

.level-value {
    @apply text-3xl font-bold;
}

.original-level {
    @apply text-center mt-4;
}
</style>