<template>
  <div class="probe-overview bg-white rounded-lg border border-gray-200">
    <div class="flex items-center p-4">
      <div class="w-8 h-8 flex items-center justify-center mr-2">
        <img src="@/assets/images/report/gl.png" alt="概览" class="w-8 h-8 object-contain" />
      </div>
      <span class="font-bold text-gray-800">概览</span>
    </div>

    <div class="flex items-center justify-between mb-3">
      <LTitle title="探查结果" />
      <div class="text-right mr-4">
        <div class="" :class="getResultCodeClass(resultCode)">
          {{ getResultCodeText(resultCode) }}
        </div>
      </div>
    </div>

    <!-- 评估说明 -->
    <div class="bg-[#D6943E1A] rounded-lg p-4 m-3 border border-[#D6943E33]">
      <div class="flex items-start">
        <div class="w-10 h-10 flex items-center justify-center mr-4 my-2">
          <img src="@/assets/images/report/zfx.png" alt="评估说明" class="w-10 h-10 object-contain" />
        </div>
        <p class="flex-1 text-sm text-[#999999] leading-relaxed mb-2">
          {{ getResultDescription(resultCode) }}
        </p>
      </div>
      <!-- 探查明细 -->
      <div class="mt-3 py-2 px-4 rounded-lg border" :class="getDetailBorderClass(resultCode)">
        <div class="flex items-center">
          <span class="font-semibold text-gray-700">探查明细</span>
        </div>
        <p class="text-sm text-[#999999] leading-relaxed">
          {{ getDetailDescription(resultCode) }}
        </p>
      </div>
    </div>
    <!-- 温馨提示 -->
    <Remark
      content="探针概览提供申请人的整体风险状况总结和关键指标概览。包括风险等级评估、主要风险点和建议措施等。数据基于多个风险模型的综合分析结果，提供快速的风险判断和决策支持。探针结果仅供初步参考，建议结合详细的风险分析报告和具体业务场景进行综合判断。探针数据实时更新，可以提供及时的风险预警。" />

  </div>

</template>

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

const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  resultCode: {
    type: String,
    default: ''
  }
})

// 结果编码文字映射
const getResultCodeText = (code) => {
  const codeMap = {
    '1': '用户最近一笔订单未结清',
    '2': '用户订单结清情况良好',
    '3': '用户最近订单已结清，历史存在未结清订单',
    '4': '用户数据不充分'
  }
  return codeMap[code] || '未知状态'
}

// 结果编码颜色映射
const getResultCodeClass = (code) => {
  const classMap = {
    '1': 'text-red-500',    // 逾期 - 红色
    '2': 'text-green-500',  // 正常 - 绿色
    '3': 'text-yellow-500', // 延迟 - 黄色
    '4': 'text-gray-500'    // 数据不足 - 灰色
  }
  return classMap[code] || 'text-gray-500'
}

// 结果描述
const getResultDescription = (code) => {
  const descriptionMap = {
    '1': '通过模型计算展现该用户行为画像，用户最近一笔订单未结清，建议谨慎评估其信用状况和还款能力。',
    '2': '通过模型计算展现该用户行为画像，多笔订单用户最近一笔订单已结清且历史所有订单均已结清，或单笔订单用户该订单发生时间在3个月之内且该订单结清，信贷表现良好。',
    '3': '通过模型计算展现该用户行为画像，用户最近一笔订单已结清，但历史存在未结清订单，建议关注其历史还款记录。',
    '4': '用户数据不充分无法展现该用户行为画像。建议通过其他征信渠道补充信息进行综合评估。'
  }
  return descriptionMap[code] || '信贷表现主要为企业在背景调查过程中探查用户近期信贷表现时提供参考，帮助企业对其内部员工、外部业务进行个人信用过滤。'
}

// 探查明细描述
const getDetailDescription = (code) => {
  const detailMap = {
    '1': '用户最近一笔订单未结清',
    '2': '多笔订单用户最近一笔订单已结清且历史所有订单均已结清，或单笔订单用户该订单发生时间在3个月之内且该订单结清',
    '3': '用户最近一笔订单已结清，但历史存在未结清订单',
    '4': '数据不充分'
  }
  return detailMap[code] || '无明细信息'
}

// 探查明细边框颜色
const getDetailBorderClass = (code) => {
  const borderMap = {
    '1': 'border-red-200 bg-red-50',      // 逾期 - 淡红色边框+背景
    '2': 'border-green-200 bg-green-50',  // 正常 - 淡绿色边框+背景
    '3': 'border-yellow-200 bg-yellow-50',// 延迟 - 淡黄色边框+背景
    '4': 'border-gray-200 bg-gray-50'     // 数据不足 - 淡灰色边框+背景
  }
  return borderMap[code] || 'border-gray-400'
}
</script>

<style scoped></style>
