<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 phonePrimaryInfo = computed(() => {
    if (isEmptyData.value || !props.data.phonePrimaryInfo) return null;
    return props.data.phonePrimaryInfo;
});

// 处理风险标签
const riskLabels = computed(() => {
    if (isEmptyData.value || !props.data.phoneRiskLabels || !props.data.phoneRiskLabels.length) return [];

    return props.data.phoneRiskLabels.map(item => {
        // 按冒号分割描述
        const descriptions = item.description ? item.description.split(':') : [];

        return {
            ...item,
            parsedDescriptions: descriptions,
            timestamp: item.timestamp ? new Date(item.timestamp).toLocaleString() : '未知时间'
        };
    });
});

// 判断是否存在风险
const hasRisk = computed(() => riskLabels.value.length > 0);
</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 v-if="phonePrimaryInfo" class="phone-info p-4 rounded-lg border border-gray-200 bg-white">
                    <div class="flex items-center mb-3">
                        <van-icon name="phone-o" color="#2196f3" size="20" class="mr-2" />
                        <span class="text-lg font-bold">手机号基本信息</span>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mt-2">
                        <div class="flex items-start"
                            v-if="phonePrimaryInfo.intl_phone_country && phonePrimaryInfo.intl_phone_country.length">
                            <span class="font-bold text-gray-600 w-24">归属国家：</span>
                            <span>{{ phonePrimaryInfo.intl_phone_country.join(', ') }}</span>
                        </div>
                        <div class="flex items-start" v-if="phonePrimaryInfo.phone_province">
                            <span class="font-bold text-gray-600 w-24">归属省份：</span>
                            <span>{{ phonePrimaryInfo.phone_province }}</span>
                        </div>
                        <div class="flex items-start" v-if="phonePrimaryInfo.phone_city">
                            <span class="font-bold text-gray-600 w-24">归属城市：</span>
                            <span>{{ phonePrimaryInfo.phone_city }}</span>
                        </div>
                        <div class="flex items-start" v-if="phonePrimaryInfo.phone_operator">
                            <span class="font-bold text-gray-600 w-24">运营商：</span>
                            <span>{{ phonePrimaryInfo.phone_operator }}</span>
                        </div>
                    </div>
                </div>

                <!-- 风险标签信息 -->
                <div class="risk-labels mt-4">
                    <div class="flex items-center mb-3">
                        <van-icon name="warning-o" color="#ff9800" size="20" class="mr-2" />
                        <span class="text-lg font-bold">风险情况</span>
                    </div>

                    <template v-if="hasRisk">
                        <div class="risk-alert p-3 rounded-lg bg-red-50 text-red-800 mb-4 flex items-center">
                            <van-icon name="warning" color="#f44336" size="20" class="mr-2" />
                            <span class="font-bold">检测到该手机号存在高风险行为</span>
                        </div>

                        <div v-for="(risk, index) in riskLabels" :key="index"
                            class="risk-item p-4 rounded-lg border border-red-200 bg-white mb-3">
                            <div class="text-base font-bold text-red-600 mb-2">可疑风险如下</div>

                            <!-- 风险描述（分层显示） -->
                            <div class="risk-desc mb-3">
                                <div class="">
                                    <div v-for="(desc, descIndex) in risk.parsedDescriptions" :key="descIndex"
                                        class="mb-1 p-2 rounded"
                                        :class="descIndex % 2 === 0 ? 'bg-red-50' : 'bg-orange-50'">
                                        <div class="flex items-start">
                                            <span class="font-bold mr-2">{{ descIndex + 1 }}.</span>
                                            <span>{{ desc.trim() }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 时间戳 -->
                            <div class="text-xs text-gray-500 mt-2">
                                <span>检测时间: {{ risk.timestamp }}</span>
                            </div>
                        </div>
                    </template>

                    <div v-else class="no-risk p-4 rounded-lg bg-green-50 flex items-center">
                        <van-icon name="checked" color="#4caf50" size="20" class="mr-2" />
                        <span>未检测到风险标签</span>
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.risk-item {
    @apply transition-all duration-200;

    &:hover {
        @apply shadow-md;
    }
}
</style>