<template>
    <div class="mobile-portability card">
        <div class="verification-section mb-4">
            <div class="bg-white rounded-xl border border-gray-200 p-4 relative">
                <div class="flex items-center mb-3">
                    <div class="w-8 h-8 flex items-center justify-center mr-3">
                        <img src="@/assets/images/report/sjh.png" alt="手机携号转网" class="w-8 h-8 object-contain" />
                    </div>
                    <span class="font-bold text-gray-800">手机携号转网</span>
                </div>
                <!-- 查询结果列表 -->
                <div class="verification-details">
                    <div v-if="queryResults.length > 0" class="space-y-3">
                        <div v-for="(item, index) in queryResults" :key="index" 
                            class="rounded-xl p-4 border border-gray-200 bg-white">
                            <div class="space-y-3">
                                <!-- 手机号 -->
                                <div class="flex justify-between items-center">
                                    <span class="text-sm text-gray-600">手机号</span>
                                    <span class="text-sm font-bold text-gray-800">{{ item.mobile }}</span>
                                </div>

                                <!-- 是否转网 -->
                                <div class="flex justify-between items-center">
                                    <span class="text-sm text-gray-600">是否转网</span>
                                    <div class="flex items-center">
                                        <span class="px-2 py-1 text-sm text-white rounded-md mr-2"
                                            :class="getPortabilityTagClass(item.result)">
                                            {{ getPortabilityText(item.result) }}
                                        </span>
                                    </div>
                                </div>

                                <!-- 原始运营商 -->
                                <div class="flex justify-between items-center">
                                    <span class="text-sm text-gray-600">原始运营商</span>
                                    <span class="text-sm font-medium text-gray-800">{{ getOperatorText(item.before) }}</span>
                                </div>

                                <!-- 转网后运营商 -->
                                <div v-if="item.result === '1'" class="flex justify-between items-center">
                                    <span class="text-sm text-gray-600">转网后运营商</span>
                                    <span class="text-sm font-medium text-gray-800">{{ getOperatorText(item.after) }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-else class="p-8 text-center text-gray-500">
                        <div class="flex flex-col items-center justify-center">
                            <van-empty description="暂无查询结果" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRiskNotifier } from '@/composables/useRiskNotifier'

const props = defineProps({
    data: {
        type: Object,
        required: true,
        default: () => ({})
    },
    apiId: {
        type: String,
        default: '',
    },
    index: {
        type: Number,
        default: 0,
    },
    notifyRiskStatus: {
        type: Function,
        default: () => { },
    },
})

// 获取数据
const reportData = computed(() => {
    return props.data?.data?.data || props.data?.data || props.data || {}
})

// 批次号
const batchNo = computed(() => {
    return reportData.value.batchNo || ''
})

// 查询结果列表
const queryResults = computed(() => {
    return reportData.value.queryResult || []
})

// 是否转网文本
const getPortabilityText = (result) => {
    if (result === '1') return '是'
    if (result === '0') return '否'
    return '未知'
}

// 是否转网标签颜色
const getPortabilityTagClass = (result) => {
    if (result === '1') return 'bg-[#B71C1C]' // 转网 - 深红色
    if (result === '0') return 'bg-[#4CAF50]' // 未转网 - 绿色
    return 'bg-gray-500' // 未知 - 灰色
}

// 运营商类型文本
const getOperatorText = (operator) => {
    const operatorMap = {
        '-1': '未知',
        '1': '中国移动',
        '2': '中国联通',
        '3': '中国电信',
        '4': '中国广电'
    }
    return operatorMap[String(operator)] || '未知'
}

// 计算风险评分（转网次数越多，风险越高）
const riskScore = computed(() => {
    const portabilityCount = queryResults.value.filter(item => item.result === '1').length
    const totalCount = queryResults.value.length

    if (totalCount === 0) {
        return 100 // 无数据，默认安全
    }

    if (portabilityCount === 0) {
        return 100 // 未转网，最安全
    }

    // 转网次数越多，分数越低
    const portabilityRatio = portabilityCount / totalCount
    return Math.max(10, Math.round(100 * (1 - portabilityRatio * 0.6)))
})

// 使用 composable 通知父组件风险评分
useRiskNotifier(props, riskScore)

// 暴露给父组件
defineExpose({
    riskScore
})
</script>

<style lang="scss" scoped>
.mobile-portability {
    @apply space-y-4;
}

.verification-section {
    .verification-details {
        @apply mt-3;
    }
}
</style>

