<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/yqxxxq.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-[#EB3C3C8F] bg-[#EB3C3C1A] p-2 text-center">
          <div class="text-xl font-bold text-[#EB3C3C] mb-1">
            {{ formatAmountRange(maxOverdueAmt) }}
          </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-[#EB3C3C8F] bg-[#EB3C3C1A] p-2 text-center">
          <div class="text-xl font-bold text-[#EB3C3C] mb-1">
            {{ formatDaysRange(maxOverdueDays) }}
          </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-[#EB3C3C8F] bg-[#EB3C3C1A] p-2 text-center">
          <div class="text-xl font-bold text-[#EB3C3C] mb-1">
            {{ formatTime(latestOverdueTime) }}
          </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-[#EB3C3C8F] bg-[#EB3C3C1A] p-2 text-center">
          <div class="text-xl font-bold text-[#EB3C3C] mb-1">
            {{ currentlyOverdue || '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> <!-- 温馨提示 -->
    <Remark
      content="逾期信息展示申请人的逾期记录和逾期风险情况，包括当前逾期状态、历史逾期次数、逾期金额和最长逾期天数等。数据来源于各金融机构的逾期报告和信用记录。逾期信息是信用风险评估的核心指标，直接影响信用评级和借贷审批。当前逾期可能导致拒绝放款，历史逾期则影响风险定价。建议特别关注连续逾期和大额逾期的情况。" />

  </div>

</template>

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

const props = defineProps({
  maxOverdueAmt: {
    type: String,
    default: ''
  },
  maxOverdueDays: {
    type: String,
    default: ''
  },
  latestOverdueTime: {
    type: String,
    default: ''
  },
  currentlyOverdue: {
    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 formatDaysRange = (days) => {
  if (!days || days === '0') return '无逾期记录'

  // 处理区间格式，如 "1-15"
  if (days.includes('-')) {
    const [min, max] = days.split('-')
    return `${min}天 - ${max}天`
  }

  return days + '天'
}

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

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

  return time
}
</script>

<style scoped>
.info-card {
  @apply bg-gray-50 rounded-lg p-3;
}
</style>
