<template>
  <div class="report-overview card" style="padding:0">
    <!-- 审核建议 -->
    <div class="suggestion-card p-4">
      <div class="flex items-center justify-between p-4 border border-[#EEEEEE] rounded-lg bg-[#F9F9F9]">
        <div class="flex items-center">
          <div class="w-12 h-12 flex items-center justify-center mr-3">
            <img src="@/assets/images/report/shjy.png" alt="审核建议" class="w-10 h-10 object-contain" />
          </div>
          <div>
            <div class="font-bold text-lg text-[#333333]">审核建议</div>
            <div class="text-sm text-[#999999]">系统综合评估结果</div>
          </div>
        </div>
        <div class="text-right">
          <div class="text-lg font-bold" :class="getCheckSuggestColor">
            {{ checkSuggest || '建议拒绝' }}
          </div>
        </div>
      </div>
    </div>

    <!-- 基本信息卡片 -->
    <div class="basic-info-card mb-4">
      <LTitle title="基本信息" class="mb-4" />
      <div class="flex flex-col gap-2 px-4">
        <div class="flex pb-2 pl-2">
          <span class="text-[#666666] w-[6em]">姓名：</span>
          <span class="text-[#333333]">{{ maskName(baseInfo.name) }}</span>
        </div>
        <div class="flex pb-2 pl-2">
          <span class="text-[#666666] w-[6em]">年龄：</span>
          <span class="text-[#333333]">{{ baseInfo.age }}岁</span>
        </div>
        <div class="flex pb-2 pl-2">
          <span class="text-[#666666] w-[6em]">性别：</span>
          <span class="text-[#333333]">{{ baseInfo.sex }}</span>
        </div>
        <div class="flex pb-2 pl-2">
          <span class="text-[#666666] w-[6em]">手机号：</span>
          <span class="text-[#333333]">{{ maskPhone(baseInfo.phone) }}</span>
        </div>
        <div class="flex pb-2 pl-2">
          <span class="text-[#666666] w-[6em]">身份证号：</span>
          <span class="text-[#333333]">{{ maskIdCard(baseInfo.idCard) }}</span>
        </div>
        <div class="flex pb-2 pl-2">
          <span class="text-[#666666] w-[6em]">户籍所在地：</span>
          <span class="text-[#333333]">{{ baseInfo.location }}</span>
        </div>
        <div class="flex pb-2 pl-2">
          <span class="text-[#666666] w-[6em]">号码归属地：</span>
          <span class="text-[#333333]">{{ baseInfo.phoneArea }}</span>
        </div>
      </div>
    </div>

    <!-- 风险评分和等级概览 -->
    <div class="risk-overview-card">
      <div class="">
        <LTitle title="风险评分与等级" class="" />
        <div class="grid grid-cols-2 gap-3 p-4">
          <!-- 反欺诈评分 -->
          <div class="relative p-4 rounded-xl" :class="getFraudScoreBgClass(fraudScore)">
            <div class="absolute top-0 right-0">
              <div class="px-2 py-1 text-xs text-white rounded-bl-xl rounded-tr-xl"
                :class="getRiskTagClass(getFraudRiskLevel(fraudScore))">
                {{ getFraudRiskLevel(fraudScore) }}</div>
            </div>
            <div class="flex items-center">
              <div class="w-12 h-12 flex items-center justify-center mr-3">
                <img src="@/assets/images/report/fqzpf.png" alt="反欺诈评分" class="w-8 h-8 object-contain" />
              </div>
              <div class="flex flex-col">
                <div class="text-lg font-bold text-[#E53935]">{{ fraudScore === -1 ? '未命中' : fraudScore }}</div>
                <div class="text-sm text-[#666666]">反欺诈评分</div>
              </div>
            </div>
          </div>

          <!-- 信用评分 -->
          <div class="relative p-4 rounded-xl" :class="getCreditScoreBgClass(creditScore)">
            <div class="absolute top-0 right-0">
              <div class="px-2 py-1 text-xs text-white rounded-bl-xl rounded-tr-xl"
                :class="getRiskTagClass(getCreditLevel(creditScore))">
                {{ getCreditLevel(creditScore) }}</div>
            </div>
            <div class="flex items-center">
              <div class="w-12 h-12 flex items-center justify-center mr-3">
                <img src="@/assets/images/report/xypf.png" alt="信用评分" class="w-8 h-8 object-contain" />
              </div>
              <div class="flex flex-col">
                <div class="text-lg font-bold text-[#E53935]">{{ creditScore === -1 ? '未命中' : creditScore }}</div>
                <div class="text-sm text-[#666666]">信用评分</div>
              </div>
            </div>
          </div>

          <!-- 验证规则 -->
          <div class="relative p-4 rounded-xl" :class="getRiskLevelClass(verifyRule)">
            <div class="absolute top-0 right-0">
              <div class="px-2 py-1 text-xs text-white rounded-bl-xl rounded-tr-xl"
                :class="getRiskTagClass(verifyRule)">
                {{ verifyRule || '未评估' }}</div>
            </div>
            <div class="flex items-center">
              <div class="w-12 h-12 flex items-center justify-center mr-3">
                <img src="@/assets/images/report/yzgz.png" alt="验证规则" class="w-8 h-8 object-contain" />
              </div>
              <div class="flex flex-col">
                <div class="text-lg font-bold text-[#E53935]">{{ verifyRule || '未评估' }}</div>
                <div class="text-sm text-[#666666]">验证规则</div>
              </div>
            </div>
          </div>

          <!-- 反欺诈规则 -->
          <div class="relative p-4 rounded-xl" :class="getRiskLevelClass(fraudRule)">
            <div class="absolute top-0 right-0">
              <div class="px-2 py-1 text-xs text-white rounded-bl-xl rounded-tr-xl" :class="getRiskTagClass(fraudRule)">
                {{ fraudRule || '未评估' }}</div>
            </div>
            <div class="flex items-center">
              <div class="w-12 h-12 flex items-center justify-center mr-3">
                <img src="@/assets/images/report/fqzgz.png" alt="反欺诈规则" class="w-8 h-8 object-contain" />
              </div>
              <div class="flex flex-col">
                <div class="text-lg font-bold text-[#E53935]">{{ fraudRule || '未评估' }}</div>
                <div class="text-sm text-[#666666]">反欺诈规则</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 温馨提示 -->
  <LRemark
    content="报告概览提供申请人的基本信息和风险评分概览。基本信息已进行脱敏处理保护隐私。反欺诈评分和信用评分采用不同的评估模型，分数越高风险越大。验证规则和反欺诈规则基于多维度数据分析得出。审核建议综合所有评估结果生成，仅供参考，最终决策需结合具体业务场景和风险政策。评分模型会定期优化更新。" />
</template>

<script setup>
import { computed } from 'vue'
import LTitle from '@/components/LTitle.vue'
import LRemark from '@/components/LRemark.vue'
import { useRiskNotifier } from '@/composables/useRiskNotifier'

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

// 从data中解构出需要的字段
const {
  baseInfo = {},
  checkSuggest = '',
  fraudScore = -1,
  creditScore = -1,
  verifyRule = '',
  fraudRule = ''
} = props.data

// 数据脱敏函数
const maskName = (name) => {
  if (!name) return ''
  if (name.length === 1) return '*'
  if (name.length === 2) return name[0] + '*'
  return name[0] + '*'.repeat(name.length - 2) + name[name.length - 1]
}

const maskPhone = (phone) => {
  if (!phone) return ''
  if (phone.length === 11) {
    return phone.substring(0, 3) + '****' + phone.substring(7)
  }
  return phone
}

const maskIdCard = (idCard) => {
  if (!idCard) return ''
  return idCard.replace(/^(.{6})(?:\d+)(.{4})$/, '$1****$2')
}

// 获取风险等级样式类
const getRiskLevelClass = (level) => {
  if (level === '高风险') return 'bg-[#FFF0F0] border border-red-200'
  if (level === '中风险') return 'bg-[#FFFBF0] border border-yellow-200'
  if (level === '低风险') return 'bg-[#F0FFF0] border border-green-200'
  return 'bg-gray-50 border border-gray-200'
}

const getFraudRiskLevel = (score) => {
  if (score === -1) return '未评估'
  if (score >= 80) return '高风险'
  if (score >= 60) return '中风险'
  return '低风险'
}


const getCreditLevel = (score) => {
  if (score === -1) return '未评估'
  if (score >= 800) return '信用较好'
  if (score >= 500) return '信用良好'
  return '信用一般'
}


const getFraudScoreBgClass = (score) => {
  if (score === -1) return 'bg-gray-50 border border-gray-200'
  if (score >= 80) return 'bg-[#FFF0F0] border border-red-200'
  if (score >= 60) return 'bg-[#FFFBF0] border border-yellow-200'
  return 'bg-[#F0FFF0] border border-green-200'
}

const getCreditScoreBgClass = (score) => {
  if (score === -1) return 'bg-gray-50 border border-gray-200'
  if (score >= 800) return 'bg-[#F0FFF0] border border-green-200'
  if (score >= 500) return 'bg-[#F0F8FF] border border-blue-200'
  return 'bg-[#FFFBF0] border border-yellow-200'
}

// 风险标签颜色映射
const getRiskTagClass = (level) => {
  if (level === '高风险') return 'bg-[#E53935]'
  if (level === '中风险') return 'bg-[#FFC107]'
  if (level === '低风险') return 'bg-[#4CAF50]'
  if (level === '信用较好') return 'bg-[#4CAF50]'
  if (level === '信用良好') return 'bg-[#2196F3]'
  if (level === '信用一般') return 'bg-[#FFC107]'
  return 'bg-gray-500'
}

// 审核建议颜色映射
const getCheckSuggestColor = computed(() => {
  const suggest = checkSuggest || '建议拒绝'

  if (suggest.includes('拒绝')) {
    return 'text-[#EB3C3C]' // 红色
  } else if (suggest.includes('通过')) {
    return 'text-[#1FBE5D]' // 绿色
  } else {
    return 'text-[#FF8C00]' // 黄色
  }
})

// 计算风险评分（0-100分，分数越高越安全）
const riskScore = computed(() => {
  // 审核建议为"建议拒绝" -> 高风险 -> 20分
  if (checkSuggest === '建议拒绝') {
    return 20;
  }
  // 审核建议为"建议人工审核" -> 中高风险 -> 50分
  if (checkSuggest === '建议人工审核') {
    return 50;
  }
  // 审核建议为"建议通过" -> 低风险 -> 90分
  if (checkSuggest === '建议通过') {
    return 90;
  }

  // 根据反欺诈评分和信用评分计算
  let score = 80; // 默认中等分数

  // 反欺诈评分（分数越高风险越大）
  if (fraudScore !== -1) {
    if (fraudScore >= 80) {
      score -= 50; // 高风险
    } else if (fraudScore >= 60) {
      score -= 30; // 中风险
    } else if (fraudScore >= 40) {
      score -= 10; // 低风险
    }
  }

  // 信用评分（分数越高信用越好）
  if (creditScore !== -1) {
    if (creditScore >= 800) {
      score += 10; // 信用较好
    } else if (creditScore >= 500) {
      score += 5; // 信用良好
    } else {
      score -= 5; // 信用一般
    }
  }

  // 验证规则和反欺诈规则
  if (verifyRule === '高风险' || fraudRule === '高风险') {
    score -= 20;
  } else if (verifyRule === '中风险' || fraudRule === '中风险') {
    score -= 10;
  }
  return Math.max(20, Math.min(100, score));
});

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

// 暴露给父组件
defineExpose({
  riskScore
});

</script>

<style lang="scss" scoped></style>
