<template>
  <div class="performance-info-section 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/lyxxxq.png" alt="履约信息详情" class="w-8 h-8 object-contain" />
      </div>
      <span class="font-bold text-gray-800">履约信息详情</span>
    </div>
    <div class="">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 p-4">

        <!-- 最大履约金额 -->
        <div class="rounded-lg border border-[#1FBE5D8F] bg-[#1FBE5D1A] p-2 text-center">
          <div class="text-xl font-bold text-[#1FBE5D] mb-1">
            {{ formatAmountRange(maxPerformanceAmt) }}
          </div>
          <div class="text-sm font-medium text-gray-700 mb-1">最大履约金额</div>
          <div class="text-xs text-gray-500">历史最大履约金额区间</div>
        </div>

        <!-- 最近履约时间 -->
        <div class="rounded-lg border border-[#1FBE5D8F] bg-[#1FBE5D1A] p-2 text-center">
          <div class="text-xl font-bold text-[#1FBE5D] mb-1">
            {{ formatTime(latestPerformanceTime) }}
          </div>
          <div class="text-sm font-medium text-gray-700 mb-1">最近履约时间</div>
          <div class="text-xs text-gray-500">最近一次履约时间</div>
        </div>

        <!-- 履约笔数 -->
        <div class="rounded-lg border border-[#1FBE5D8F] bg-[#1FBE5D1A] p-2 text-center">
          <div class="text-xl font-bold text-[#1FBE5D] mb-1">
            {{ countPerformance || '0' }} 笔
          </div>
          <div class="text-sm font-medium text-gray-700 mb-1">履约笔数</div>
          <div class="text-xs text-gray-500">总履约交易笔数</div>
        </div>

        <!-- 当前履约机构数 -->
        <div class="rounded-lg border border-[#1FBE5D8F] bg-[#1FBE5D1A] p-2 text-center">
          <div class="text-xl font-bold text-[#1FBE5D] mb-1">
            {{ currentlyPerformance || '0' }} 个
          </div>
          <div class="text-sm font-medium text-gray-700 mb-1">当前履约机构数</div>
          <div class="text-xs text-gray-500">目前正在履约的机构数量</div>
        </div>

      </div>

      <!-- 履约表现总结 -->
      <div class="mt-4 p-3">
        <div class="flex items-start">
          <div class="w-14 h-14 flex items-center justify-center mx-4">
            <img src="@/assets/images/report/zq.png" alt="履约表现总结" class="w-14 h-14 object-contain" />
          </div>
          <div class="mt-1 text-sm text-[#999999]">
            <div class="font-bold text-lg text-[#1FBE5D]">履约表现总结</div>
            <div v-html="getPerformanceSummaryHtml()"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 温馨提示 -->
    <Remark
      content="表现信息展示申请人的还款表现和信用表现情况，包括还款率、逾期率、还款金额和还款方式等。数据基于历史交易记录和还款记录统计得出。还款表现是评估信用风险的核心指标，直接反映申请人的还款意愿和还款能力。良好的还款记录可以提升信用评级，而频繁的逾期可能导致信用降级。建议重点关注还款稳定性和逾期恢复情况。" />

  </div>

</template>

<script setup>
import Remark from './Remark.vue'

const props = defineProps({
  maxPerformanceAmt: {
    type: String,
    default: ''
  },
  latestPerformanceTime: {
    type: String,
    default: ''
  },
  countPerformance: {
    type: String,
    default: ''
  },
  currentlyPerformance: {
    type: String,
    default: ''
  }
})

// 格式化金额区间
const formatAmountRange = (amount) => {
  if (!amount || amount === '0') return '无履约记录'

  // 处理区间格式，如 "1000-2000"
  if (amount.includes('-')) {
    const [min, max] = amount.split('-')
    return `${min}元 - ${max}元`
  }

  // 处理其他格式
  return amount
}

// 格式化时间
const formatTime = (time) => {
  if (!time) return '无记录'

  // 如果是 YYYY-MM 格式
  if (time.match(/^\d{4}-\d{2}$/)) {
    return time.replace('-', '年') + '月'
  }

  return time
}

// 获取履约表现总结
const getPerformanceSummary = () => {
  const performanceCount = parseInt(props.countPerformance) || 0
  const currentInstitutions = parseInt(props.currentlyPerformance) || 0

  if (performanceCount === 0) {
    return '该用户暂无履约记录，无法评估其履约能力。'
  }

  if (performanceCount > 0 && currentInstitutions > 0) {
    return `该用户有${performanceCount}笔履约记录，目前在${currentInstitutions}个机构保持履约状态，履约表现良好。`
  }

  if (performanceCount > 0 && currentInstitutions === 0) {
    return `该用户有${performanceCount}笔履约记录，但目前无正在履约的机构，建议关注其当前信贷状况。`
  }

  return '履约信息不完整，建议进一步核实。'
}

// 获取履约表现总结HTML版本（带绿色高亮）
const getPerformanceSummaryHtml = () => {
  const performanceCount = parseInt(props.countPerformance) || 0
  const currentInstitutions = parseInt(props.currentlyPerformance) || 0

  if (performanceCount === 0) {
    return '该用户暂无履约记录，无法评估其履约能力。'
  }

  if (performanceCount > 0 && currentInstitutions > 0) {
    return `该用户有<span class="text-[#1FBE5D] font-bold">${performanceCount}</span>笔履约记录，目前在<span class="text-[#1FBE5D] font-bold">${currentInstitutions}</span>个机构保持履约状态，<span class="text-[#1FBE5D] font-bold">履约表现良好</span>。`
  }

  if (performanceCount > 0 && currentInstitutions === 0) {
    return `该用户有<span class="text-[#1FBE5D] font-bold">${performanceCount}</span>笔履约记录，但目前无正在履约的机构，建议关注其当前信贷状况。`
  }

  return '履约信息不完整，建议进一步核实。'
}
</script>
