  <template>
    <div class="overdue-risk-section card">
      <!-- 逾期概览 -->
      <div class="overdue-overview mb-4">
        <div class="bg-white rounded-xl border border-gray-200 p-4 relative">
          <div class="absolute top-0 right-0">
            <div class="px-2 py-1 text-xs text-white rounded-bl-xl rounded-tr-xl"
              :class="getOverdueStatusTagClass(overdueRiskProduct.hasUnsettledOverdue)">
              {{ getOverdueStatusText(overdueRiskProduct.hasUnsettledOverdue) }}
            </div>
          </div>
          <div class="flex items-center mb-3">
            <div class="w-8 h-8 flex items-center justify-center mr-2">
              <img src="@/assets/images/report/yqfxgl.png" alt="逾期风险概览" class="w-8 h-8 object-contain" />
            </div>
            <span class="font-bold text-gray-800">逾期风险概览</span>
          </div>

          <!-- 逾期统计 -->
          <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
            <div class="text-center p-2 bg-red-50 rounded-lg">
              <div class="text-lg font-bold text-red-600">{{
                formatInstitutionInterval(overdueRiskProduct.currentOverdueInstitutionCount) }}</div>
              <div class="text-xs text-red-600">当前逾期机构数</div>
            </div>
            <div class="text-center p-2 bg-orange-50 rounded-lg">
              <div class="text-lg font-bold text-orange-600">{{
                formatAmountInterval(overdueRiskProduct.currentOverdueAmount) }}</div>
              <div class="text-xs text-orange-600">当前逾期金额</div>
            </div>
            <div class="text-center p-2 bg-blue-50 rounded-lg">
              <div class="text-lg font-bold text-blue-600">{{
                formatInstitutionInterval(overdueRiskProduct.settledInstitutionCount) }}</div>
              <div class="text-xs text-blue-600">已结清机构数</div>
            </div>
            <div class="text-center p-2 bg-green-50 rounded-lg">
              <div class="text-lg font-bold text-green-600">{{
                formatInstitutionInterval(overdueRiskProduct.totalLoanInstitutions) }}</div>
              <div class="text-xs text-green-600">贷款总机构</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 逾期时间分布 -->
      <div class="overdue-time-distribution mb-4">
        <div class="bg-white rounded-xl border border-gray-200 p-4 relative">
          <div class="absolute top-0 right-0">
            <div class="px-2 py-1 text-xs text-white rounded-bl-xl rounded-tr-xl"
              :class="getOverdueTimeDistributionTagClass(overdueRiskProduct)">
              {{ getOverdueTimeDistributionTagText(overdueRiskProduct) }}
            </div>
          </div>
          <div class="flex items-center mb-3">
            <div class="w-8 h-8 flex items-center justify-center mr-2">
              <img src="@/assets/images/report/yqsjfb.png" alt="逾期时间分布" class="w-8 h-8 object-contain" />
            </div>
            <span class="font-bold text-gray-800">逾期时间分布</span>
          </div>

          <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
            <div class="text-center p-2 rounded-lg" :class="getOverdueTimeClass(overdueRiskProduct.overdueLast1Day)">
              <div class="text-sm font-bold">{{ getOverdueTimeText(overdueRiskProduct.overdueLast1Day) }}</div>
              <div class="text-xs">近1天</div>
            </div>
            <div class="text-center p-2 rounded-lg" :class="getOverdueTimeClass(overdueRiskProduct.overdueLast7Days)">
              <div class="text-sm font-bold">{{ getOverdueTimeText(overdueRiskProduct.overdueLast7Days) }}</div>
              <div class="text-xs">近7天</div>
            </div>
            <div class="text-center p-2 rounded-lg" :class="getOverdueTimeClass(overdueRiskProduct.overdueLast14Days)">
              <div class="text-sm font-bold">{{ getOverdueTimeText(overdueRiskProduct.overdueLast14Days) }}</div>
              <div class="text-xs">近14天</div>
            </div>
            <div class="text-center p-2 rounded-lg" :class="getOverdueTimeClass(overdueRiskProduct.overdueLast30Days)">
              <div class="text-sm font-bold">{{ getOverdueTimeText(overdueRiskProduct.overdueLast30Days) }}</div>
              <div class="text-xs">近30天</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 还款统计 -->
      <div class="repayment-statistics mb-4">
        <div class="bg-white rounded-lg border border-gray-200 p-4">
          <div class="flex items-center mb-3">
            <div class="w-8 h-8 flex items-center justify-center mr-2">
              <img src="@/assets/images/report/hktj.png" alt="逾期风险概览" class="w-8 h-8 object-contain" />
            </div>
            <span class="font-bold text-gray-800">还款统计</span>
          </div>

          <!-- 最近一次成功还款 -->
          <div class="mb-4 p-3 bg-[#99999933] rounded-lg">
            <div class="flex justify-between items-center">
              <span class="text-[#999999] text-sm">最近一次成功还款距今天数</span>
              <span class=" text-[#333333]">{{
                formatDaysInterval(overdueRiskProduct.daysSinceLastSuccessfulRepayment) }}</span>
            </div>
          </div>

          <!-- 还款失败统计 -->
          <div class="space-y-4">
            <LTitle title="还款失败统计" />

            <div class="space-y-3">
              <!-- 最近7天 -->
              <div>
                <div class="text-sm font-medium text-gray-700 mb-2">最近7天</div>
                <div class="grid grid-cols-2 gap-3">
                  <div class="text-center p-3 bg-[#FFF0F0] border border-red-200 rounded-lg">
                    <div class="text-lg font-bold text-red-600">{{
                      formatCountInterval(overdueRiskProduct.repaymentFailureCountLast7Days) }}</div>
                    <div class="text-xs text-gray-600">失败次数</div>
                  </div>
                  <div class="text-center p-3 bg-[#FFF0F0] border border-red-200 rounded-lg">
                    <div class="text-lg font-bold text-red-600">{{
                      formatAmountInterval(overdueRiskProduct.repaymentFailureAmountLast7Days) }}</div>
                    <div class="text-xs text-gray-600">失败金额</div>
                  </div>
                </div>
              </div>

              <!-- 最近14天 -->
              <div>
                <div class="text-sm font-medium text-gray-700 mb-2">最近14天</div>
                <div class="grid grid-cols-2 gap-3">
                  <div class="text-center p-3 bg-[#FFF0F0] border border-red-200 rounded-lg">
                    <div class="text-lg font-bold text-red-600">{{
                      formatCountInterval(overdueRiskProduct.repaymentFailureCountLast14Days) }}</div>
                    <div class="text-xs text-gray-600">失败次数</div>
                  </div>
                  <div class="text-center p-3 bg-[#FFF0F0] border border-red-200 rounded-lg">
                    <div class="text-lg font-bold text-red-600">{{
                      formatAmountInterval(overdueRiskProduct.repaymentFailureAmountLast14Days) }}</div>
                    <div class="text-xs text-gray-600">失败金额</div>
                  </div>
                </div>
              </div>

              <!-- 最近1个月 -->
              <div>
                <div class="text-sm font-medium text-gray-700 mb-2">最近1个月</div>
                <div class="grid grid-cols-2 gap-3">
                  <div class="text-center p-3 bg-[#FFF0F0] border border-red-200 rounded-lg">
                    <div class="text-lg font-bold text-red-600">{{
                      formatCountInterval(overdueRiskProduct.repaymentFailureCountLastMonth) }}</div>
                    <div class="text-xs text-gray-600">失败次数</div>
                  </div>
                  <div class="text-center p-3 bg-[#FFF0F0] border border-red-200 rounded-lg">
                    <div class="text-lg font-bold text-red-600">{{
                      formatAmountInterval(overdueRiskProduct.repaymentFailureAmountLastMonth) }}</div>
                    <div class="text-xs text-gray-600">失败金额</div>
                  </div>
                </div>
              </div>

              <!-- 最近3个月 -->
              <div>
                <div class="text-sm font-medium text-gray-700 mb-2">最近3个月</div>
                <div class="grid grid-cols-2 gap-3">
                  <div class="text-center p-3 bg-[#FFF0F0] border border-red-200 rounded-lg">
                    <div class="text-lg font-bold text-red-600">{{
                      formatCountInterval(overdueRiskProduct.repaymentFailureCountLast3Months) }}</div>
                    <div class="text-xs text-gray-600">失败次数</div>
                  </div>
                  <div class="text-center p-3 bg-[#FFF0F0] border border-red-200 rounded-lg">
                    <div class="text-lg font-bold text-red-600">{{
                      formatAmountInterval(overdueRiskProduct.repaymentFailureAmountLast3Months) }}</div>
                    <div class="text-xs text-gray-600">失败金额</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 还款成功统计 -->
          <div class="mt-6 space-y-4">
            <LTitle title="还款成功统计" />

            <div class="space-y-3">
              <!-- 最近7天 -->
              <div>
                <div class="text-sm font-medium text-gray-700 mb-2">最近7天</div>
                <div class="grid grid-cols-2 gap-3">
                  <div class="text-center p-3 bg-[#F0FFF0] border border-green-200 rounded-lg">
                    <div class="text-lg font-bold text-green-600">{{
                      formatCountInterval(overdueRiskProduct.repaymentSuccessCountLast7Days) }}</div>
                    <div class="text-xs text-gray-600">成功次数</div>
                  </div>
                  <div class="text-center p-3 bg-[#F0FFF0] border border-green-200 rounded-lg">
                    <div class="text-lg font-bold text-green-600">{{
                      formatAmountInterval(overdueRiskProduct.repaymentSuccessAmountLast7Days) }}</div>
                    <div class="text-xs text-gray-600">成功金额</div>
                  </div>
                </div>
              </div>

              <!-- 最近14天 -->
              <div>
                <div class="text-sm font-medium text-gray-700 mb-2">最近14天</div>
                <div class="grid grid-cols-2 gap-3">
                  <div class="text-center p-3 bg-[#F0FFF0] border border-green-200 rounded-lg">
                    <div class="text-lg font-bold text-green-600">{{
                      formatCountInterval(overdueRiskProduct.repaymentSuccessCountLast14Days) }}</div>
                    <div class="text-xs text-gray-600">成功次数</div>
                  </div>
                  <div class="text-center p-3 bg-[#F0FFF0] border border-green-200 rounded-lg">
                    <div class="text-lg font-bold text-green-600">{{
                      formatAmountInterval(overdueRiskProduct.repaymentSuccessAmountLast14Days) }}</div>
                    <div class="text-xs text-gray-600">成功金额</div>
                  </div>
                </div>
              </div>

              <!-- 最近1个月 -->
              <div>
                <div class="text-sm font-medium text-gray-700 mb-2">最近1个月</div>
                <div class="grid grid-cols-2 gap-3">
                  <div class="text-center p-3 bg-[#F0FFF0] border border-green-200 rounded-lg">
                    <div class="text-lg font-bold text-green-600">{{
                      formatCountInterval(overdueRiskProduct.repaymentSuccessCountLastMonth) }}</div>
                    <div class="text-xs text-gray-600">成功次数</div>
                  </div>
                  <div class="text-center p-3 bg-[#F0FFF0] border border-green-200 rounded-lg">
                    <div class="text-lg font-bold text-green-600">{{
                      formatAmountInterval(overdueRiskProduct.repaymentSuccessAmountLastMonth) }}</div>
                    <div class="text-xs text-gray-600">成功金额</div>
                  </div>
                </div>
              </div>

              <!-- 最近3个月 -->
              <div>
                <div class="text-sm font-medium text-gray-700 mb-2">最近3个月</div>
                <div class="grid grid-cols-2 gap-3">
                  <div class="text-center p-3 bg-[#F0FFF0] border border-green-200 rounded-lg">
                    <div class="text-lg font-bold text-green-600">{{
                      formatCountInterval(overdueRiskProduct.repaymentSuccessCountLast3Months) }}</div>
                    <div class="text-xs text-gray-600">成功次数</div>
                  </div>
                  <div class="text-center p-3 bg-[#F0FFF0] border border-green-200 rounded-lg">
                    <div class="text-lg font-bold text-green-600">{{
                      formatAmountInterval(overdueRiskProduct.repaymentSuccessAmountLast3Months) }}</div>
                    <div class="text-xs text-gray-600">成功金额</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 风险标识 -->
      <div class="risk-flags">
        <div class="bg-white rounded-lg border border-[#EB3C3C33] p-4">
          <div class="flex items-center mb-3">
            <div class="w-8 h-8 flex items-center justify-center mr-2">
              <img src="@/assets/images/report/fxbs.png" alt="风险标识" class="w-8 h-8 object-contain" />
            </div>
            <span class="font-bold text-gray-800">风险标识</span>
          </div>

          <div class="space-y-3">
            <div class="flex items-center">
              <div class="px-2 py-1 text-xs text-white rounded"
                :class="getRiskFlagTagClass(overdueRiskProduct.lyjlhyFlag)">
                {{ getRiskFlagText(overdueRiskProduct.lyjlhyFlag) }}
              </div>
              <span class="text-sm text-gray-600 ml-3">逾期风险产品</span>
            </div>
            <div class="flex items-center">
              <div class="px-2 py-1 text-xs text-white rounded"
                :class="getRiskFlagTagClass(overdueRiskProduct.dkzhktjFlag)">
                {{ getRiskFlagText(overdueRiskProduct.dkzhktjFlag) }}
              </div>
              <span class="text-sm text-gray-600 ml-3">贷款中还款统计</span>
            </div>
            <div class="flex items-center">
              <div class="px-2 py-1 text-xs text-white rounded"
                :class="getRiskFlagTagClass(overdueRiskProduct.tsmdyzFlag)">
                {{ getRiskFlagText(overdueRiskProduct.tsmdyzFlag) }}
              </div>
              <span class="text-sm text-gray-600 ml-3">特殊名单验证</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 温馨提示 -->
    <LRemark
      content="逾期风险全面分析申请人的逾期情况和还款行为。包括当前逾期状态、逾期时间分布、还款失败/成功统计等关键指标。逾期机构数和逾期金额是重要的风险评估依据，还款失败次数和金额反映还款能力。建议关注最近一次成功还款时间，连续还款失败可能预示更高风险。数据来源于各金融机构报送，更新频率为T+1。" />
  </template>

<script setup>
import LTitle from '@/components/LTitle.vue'
import LRemark from '@/components/LRemark.vue'
import { useRiskNotifier } from '@/composables/useRiskNotifier'
import {
  formatAmountInterval,
  formatCountInterval,
  formatDaysInterval,
  formatInstitutionInterval,
  formatTimeInterval
} from '@/ui/CDWBG8B4D/utils/intervalFormatter.js'

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

// 从data中解构出需要的字段
const overdueRiskProduct = computed(() => props.data?.overdueRiskProduct || {});

// 获取逾期状态文本
const getOverdueStatusText = (status) => {
  if (status === '逾期') return '逾期'
  if (status === '未逾期') return '未逾期'
  return '未知'
}

// 获取逾期状态样式
const getOverdueStatusClass = (status) => {
  if (status === '逾期') return 'text-red-600'
  if (status === '未逾期') return 'text-green-600'
  return 'text-gray-600'
}

// 获取逾期状态标签颜色
const getOverdueStatusTagClass = (status) => {
  if (status === '逾期') return 'bg-[#E53935]'
  if (status === '未逾期') return 'bg-[#4CAF50]'
  return 'bg-gray-500'
}

// 获取逾期时间文本
const getOverdueTimeText = (status) => {
  if (status === '逾期') return '逾期'
  if (status === '未逾期') return '正常'
  return '未知'
}

// 获取逾期时间样式
const getOverdueTimeClass = (status) => {
  if (status === '逾期') return 'bg-red-50 text-red-700'
  if (status === '未逾期') return 'bg-green-50 text-green-700'
  return 'bg-gray-50 text-gray-700'
}

// 获取风险标识文本
const getRiskFlagText = (flag) => {
  if (flag === 1) return '高风险'
  if (flag === 2) return '低风险'
  return '未查得'
}

// 获取风险标识样式
const getRiskFlagClass = (flag) => {
  if (flag === 1) return 'bg-red-50 text-red-700'
  if (flag === 2) return 'bg-green-50 text-green-700'
  return 'bg-gray-50 text-gray-700'
}

// 获取风险标识标签颜色
const getRiskFlagTagClass = (flag) => {
  if (flag === 1) return 'bg-[#E53935]'
  if (flag === 2) return 'bg-[#4CAF50]'
  return 'bg-[#999999]'
}

// 获取逾期时间分布标签文本
const getOverdueTimeDistributionTagText = (product) => {
  const overdueFields = ['overdueLast1Day', 'overdueLast7Days', 'overdueLast14Days', 'overdueLast30Days']
  const hasOverdue = overdueFields.some(field => product[field] === '逾期')
  if (hasOverdue) return '逾期'
  return '无逾期'
}

// 获取逾期时间分布标签颜色
const getOverdueTimeDistributionTagClass = (product) => {
  const overdueFields = ['overdueLast1Day', 'overdueLast7Days', 'overdueLast14Days', 'overdueLast30Days']
  const hasOverdue = overdueFields.some(field => product[field] === '逾期')
  if (hasOverdue) return 'bg-[#E53935]'
  return 'bg-[#4CAF50]'
}

// 计算风险评分（0-100分，分数越高越安全）
const riskScore = computed(() => {
  const product = overdueRiskProduct.value || {};

  // 有未结清逾期 -> 高风险 -> 20分
  if (product.hasUnsettledOverdue === '逾期') {
    return 20;
  }

  // 当前逾期机构数
  const currentOverdueInstitutionCount = product.currentOverdueInstitutionCount || 0;
  // 当前逾期金额
  const currentOverdueAmount = product.currentOverdueAmount || 0;

  // 当前逾期机构数 >= 3 -> 高风险 -> 30分
  if (currentOverdueInstitutionCount >= 3) {
    return 30;
  }
  // 当前逾期机构数 >= 1 -> 中高风险 -> 50分
  if (currentOverdueInstitutionCount >= 1) {
    return 50;
  }

  // 检查逾期时间分布
  const hasRecentOverdue =
    product.overdueLast1Day === '逾期' ||
    product.overdueLast7Days === '逾期' ||
    product.overdueLast14Days === '逾期';

  if (hasRecentOverdue) {
    return 40; // 近期有逾期
  }

  // 检查还款失败情况
  const repaymentFailureCountLast7Days = product.repaymentFailureCountLast7Days || 0;
  const repaymentFailureCountLast14Days = product.repaymentFailureCountLast14Days || 0;
  const repaymentFailureCountLastMonth = product.repaymentFailureCountLastMonth || 0;

  // 最近7天还款失败次数 >= 5 -> 高风险 -> 40分
  if (repaymentFailureCountLast7Days >= 5) {
    return 40;
  }
  // 最近7天还款失败次数 >= 3 -> 中风险 -> 60分
  if (repaymentFailureCountLast7Days >= 3) {
    return 60;
  }
  // 最近14天还款失败次数 >= 5 -> 中风险 -> 60分
  if (repaymentFailureCountLast14Days >= 5) {
    return 60;
  }
  // 最近1个月还款失败次数 >= 10 -> 中风险 -> 60分
  if (repaymentFailureCountLastMonth >= 10) {
    return 60;
  }

  // 最近一次成功还款距今天数
  const daysSinceLastSuccessfulRepayment = product.daysSinceLastSuccessfulRepayment || 0;

  // 超过30天没有成功还款 -> 高风险 -> 40分
  if (daysSinceLastSuccessfulRepayment > 30) {
    return 40;
  }
  // 超过14天没有成功还款 -> 中风险 -> 60分
  if (daysSinceLastSuccessfulRepayment > 14) {
    return 60;
  }
  // 超过7天没有成功还款 -> 中低风险 -> 75分
  if (daysSinceLastSuccessfulRepayment > 7) {
    return 75;
  }

  // 有逾期记录但已结清 -> 中低风险 -> 80分
  if (product.settledInstitutionCount > 0) {
    return 80;
  }

  // 无逾期记录 -> 低风险 -> 100分
  return 100;
});

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

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

<style lang="scss" scoped>
.overdue-risk-section {
  @apply space-y-4;
}
</style>
