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

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

// 获取风险数据数组
const riskItems = computed(() => {
    if (!props.data || !props.data.value || !Array.isArray(props.data.value)) {
        return [];
    }
    return props.data.value;
});

// 判断是否为空数据
const isEmptyData = computed(() => !riskItems.value || riskItems.value.length === 0);

// 风险类型映射
const riskTypeMap = {
    "110": "疑似欺诈",
    "130": "疑似赌博庄家",
    "150": "疑似赌博玩家",
    "170": "疑似涉赌跑分"
};

// 获取风险数据整理后的展示
const riskData = computed(() => {
    if (isEmptyData.value) return [];

    return riskItems.value.map(item => {
        return {
            type: riskTypeMap[item.riskType] || `未知风险(${item.riskType})`,
            level: item.riskLevel || "0",
            riskType: item.riskType,
            color: getRiskColor(item.riskLevel),
            levelText: getRiskLevelText(item.riskLevel)
        };
    });
});

// 计算风险最高的类型
const highestRisk = computed(() => {
    if (isEmptyData.value) return null;

    let highest = null;
    riskItems.value.forEach(item => {
        if (!highest || Number(item.riskLevel) > Number(highest.riskLevel)) {
            highest = item;
        }
    });

    if (!highest) return null;

    return {
        type: riskTypeMap[highest.riskType] || `未知风险(${highest.riskType})`,
        level: highest.riskLevel || "0",
        color: getRiskColor(highest.riskLevel),
        levelText: getRiskLevelText(highest.riskLevel)
    };
});

// 获取风险等级颜色
function getRiskColor(level) {
    const numLevel = Number(level);
    if (numLevel === 0) return "#4caf50"; // 绿色 - 无风险
    if (numLevel < 30) return "#2196f3";  // 蓝色 - 低风险
    if (numLevel < 60) return "#ff9800";  // 橙色 - 中风险
    return "#f44336";                     // 红色 - 高风险
}

// 获取风险等级文字描述
function getRiskLevelText(level) {
    const numLevel = Number(level);
    if (numLevel === 0) return "无风险";
    if (numLevel < 30) return "低风险";
    if (numLevel < 60) return "中风险";
    if (numLevel < 80) return "高风险";
    return "极高风险";
}
</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="checked" size="60" color="#4caf50" />
                    <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="risk-overview p-4 rounded-lg" v-if="highestRisk">
                    <div class="flex items-center">
                        <div class="flex-1">
                            <div class="text-sm text-gray-700 font-semibold">最高风险类型</div>
                            <div class="text-lg font-bold mt-1">{{ highestRisk.type }}</div>
                        </div>
                        <div class="risk-level-indicator" :style="{ backgroundColor: highestRisk.color }">
                            <span>{{ highestRisk.level }}</span>
                        </div>
                    </div>
                    <div class="mt-2 text-sm" :style="{ color: highestRisk.color }">
                        风险等级: {{ highestRisk.levelText }}
                    </div>
                </div>

                <!-- 风险详情列表 -->
                <div class="risk-details mt-4">
                    <div class="text-lg font-bold mb-2">风险详情</div>

                    <van-cell-group :border="false">
                        <van-cell v-for="(item, index) in riskData" :key="index" :border="false">
                            <template #title>
                                <div class="flex items-center">
                                    <div class="w-3 h-3 rounded-full mr-2" :style="{ backgroundColor: item.color }">
                                    </div>
                                    <span>{{ item.type }}</span>
                                </div>
                            </template>
                            <template #right-icon>
                                <div class="flex items-center">
                                    <span class="mr-2 text-sm" :style="{ color: item.color }">{{ item.levelText
                                    }}</span>
                                    <div class="risk-level-badge" :style="{ backgroundColor: item.color }">
                                        {{ item.level }}
                                    </div>
                                </div>
                            </template>
                        </van-cell>
                    </van-cell-group>
                </div>

                <!-- 风险说明 -->
                <div class="risk-info mt-4 p-4 bg-gray-50 rounded-lg">
                    <div class="text-sm text-gray-700">
                        <div class="mb-2 font-bold">风险类型说明：</div>
                        <div class="grid grid-cols-1 gap-2">
                            <div class="flex items-start">
                                <div class="w-3 h-3 rounded-full bg-red-500 mt-1 mr-2"></div>
                                <div>
                                    <span class="font-bold">疑似欺诈：</span>
                                    <span>可能参与诈骗活动</span>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <div class="w-3 h-3 rounded-full bg-red-700 mt-1 mr-2"></div>
                                <div>
                                    <span class="font-bold">疑似赌博庄家：</span>
                                    <span>可能作为赌博活动组织者</span>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <div class="w-3 h-3 rounded-full bg-orange-500 mt-1 mr-2"></div>
                                <div>
                                    <span class="font-bold">疑似赌博玩家：</span>
                                    <span>可能作为赌博活动参与者</span>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <div class="w-3 h-3 rounded-full bg-yellow-500 mt-1 mr-2"></div>
                                <div>
                                    <span class="font-bold">疑似涉赌跑分：</span>
                                    <span>可能参与赌博资金转移</span>
                                </div>
                            </div>
                        </div>

                        <div class="mt-4 mb-2 font-bold">风险等级说明：</div>
                        <div>风险值范围在0-100之间，数值越大风险越高。0表示无风险，100表示风险极大。</div>
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.risk-overview {
    @apply border border-gray-200 shadow-sm;
}

.risk-level-indicator {
    @apply flex items-center justify-center w-12 h-12 rounded-full text-white font-bold;
}

.risk-level-badge {
    @apply flex items-center justify-center w-8 h-8 rounded-full text-white text-sm font-bold;
}
</style>