<template>
    <div class="network-social-abnormal 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/gazdryhycp.png" alt="网络社交异常" class="w-8 h-8 object-contain" />
                    </div>
                    <span class="font-bold text-gray-800">网络社交异常</span>
                </div>

                <div class="verification-details">
                    <div class="space-y-2">
                        <div v-for="item in detectionItems" :key="item.key" class="rounded-xl p-4 relative"
                            :class="getItemResultClass(item.hit)">
                            <div class="absolute top-0 right-0">
                                <div class="px-2 py-1 text-sm text-white rounded-bl-xl rounded-tr-xl"
                                    :class="getItemTagClass(item.hit)">
                                    {{ getItemText(item.hit) }}
                                </div>
                            </div>
                            <div class="flex items-center">
                                <div class="w-10 h-10 mr-4">
                                    <img :src="getItemIcon(item.hit)" :alt="getItemText(item.hit)"
                                        class="w-10 h-10 object-contain" />
                                </div>
                                <div class="flex-1">
                                    <div class="font-bold text-gray-800">{{ item.hit ? '存在' + item.name : item.name }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 温馨提示 -->
        <LRemark
            content="是否与黑中介有关联：与从事包装客户资料，伪造客户资料，冒用客户资料，套取机构政策等职业的用户或者机构成员有关联。\n是否疑似与异常行业有关联：互联网行为疑似涉嫌色情、赌博、毒品等不良行为。\n是否疑似虚假资料：在社交平台提供过虚假资料，或者有恶意申请/操作记录，或者个人信息疑似泄漏、冒用、伪造等。\n是否疑似羊毛党：在网贷、电商、O2O等平台有薅羊毛行为的用户。\n是否身份信息存疑：未获取到社交平台中的身份信息或者身份信息（身份证、手机号、姓名）疑似涉嫌伪造。\n是否严重异常行为：疑似有恶意消费的行为。\n是否存在失信行为：客户有失信行为。\n是否存在支付异常行为：支付行为异常包括支付频次、额度、场景等方面有过异常行为。\n是否存在其他异常行为：用户和以下高风险行为可能存在较高关联度：被盗风险较高、社交圈子不固定、地理圈子变化较大。\n是否上网环境异常：用户上网时，有使用虚拟机、代理设备、代理IP、猫池等行为。" />
    </div>
</template>

<script setup>
import { computed } from 'vue'
import LRemark from '@/components/LRemark.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 detectionItems = computed(() => {
    // 尝试多种可能的数据路径
    const data = props.data?.data?.data || props.data?.data || props.data || {}

    return [
        {
            key: 'sjbq_zlbz',
            name: '资料包装中介',
            hit: parseValue(data.sjbq_zlbz) === 1
        },
        {
            key: 'sjbq_ychy',
            name: '异常行业',
            hit: parseValue(data.sjbq_ychy) === 1
        },
        {
            key: 'sjbq_xjzl',
            name: '虚假资料',
            hit: parseValue(data.sjbq_xjzl) === 1
        },
        {
            key: 'sjbq_ymd',
            name: '羊毛党',
            hit: parseValue(data.sjbq_ymd) === 1
        },
        {
            key: 'sjbq_sfcy',
            name: '身份信息存疑',
            hit: parseValue(data.sjbq_sfcy) === 1
        },
        {
            key: 'sjbq_ycxw',
            name: '严重异常行为',
            hit: parseValue(data.sjbq_ycxw) === 1
        },
        {
            key: 'sjbq_sxxw',
            name: '失信行为',
            hit: parseValue(data.sjbq_sxxw) === 1
        },
        {
            key: 'sjbq_zfyc',
            name: '支付异常行为',
            hit: parseValue(data.sjbq_zfyc) === 1
        },
        {
            key: 'sjbq_qtyc',
            name: '其他异常行为',
            hit: parseValue(data.sjbq_qtyc) === 1
        },
        {
            key: 'sjbq_swhjyc',
            name: '上网环境异常',
            hit: parseValue(data.sjbq_swhjyc) === 1
        }
    ]
})

// 解析值（处理字符串和数字）
const parseValue = (value) => {
    if (value === undefined || value === null || value === '') {
        return 0
    }
    const num = Number(value)
    return isNaN(num) ? 0 : num
}

// 命中数量
const hitCount = computed(() => {
    return detectionItems.value.filter(item => item.hit).length
})

// 总数量
const totalCount = computed(() => {
    return detectionItems.value.length
})

// 风险标识文本
const getRiskFlagText = () => {
    if (hitCount.value === 0) {
        return '无风险'
    }
    return '存在风险'
}

// 风险标识标签颜色
const getRiskFlagTagClass = () => {
    if (hitCount.value === 0) {
        return 'bg-[#4CAF50]'
    }
    return 'bg-[#E53935]'
}

// 项目状态文本
const getItemText = (hit) => {
    if (hit) return '异常'
    return '正常'
}

// 项目结果背景样式
const getItemResultClass = (hit) => {
    if (hit) return 'bg-[#FFF0F0] border border-red-200'
    return 'bg-[#F0FFF0] border border-green-200'
}

// 项目标签颜色
const getItemTagClass = (hit) => {
    if (hit) return 'bg-[#E53935]'
    return 'bg-[#4CAF50]'
}

// 项目图标
const getItemIcon = (hit) => {
    if (hit) return new URL('@/assets/images/report/gfx.png', import.meta.url).href
    return new URL('@/assets/images/report/zq.png', import.meta.url).href
}

// 计算风险评分（0-100分，分数越高越安全）
const riskScore = computed(() => {
    const hit = hitCount.value
    const total = totalCount.value

    if (hit === 0) {
        return 100 // 全部未命中，最安全
    }

    // 命中越多，分数越低
    const hitRatio = hit / total
    return Math.max(10, Math.round(100 * (1 - hitRatio * 0.8)))
})

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

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

<style lang="scss" scoped>
.network-social-abnormal {
    @apply space-y-4;
}

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