<template>
  <div class="behavior-report-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/yqxxxq.png" alt="放款还款详情" class="w-8 h-8 object-contain" />
      </div>
      <span class="font-bold text-gray-800">放款还款详情</span>
    </div>

    <div class="p-4">
      <!-- 核心指标 -->
      <div class="grid grid-cols-2 gap-4 mb-6">
        <!-- 贷款行为分 -->
        <div class="rounded-lg border border-[#2B79EE8F] bg-[#2B79EE1A] p-4 text-center">
          <div class="text-2xl font-bold text-[#2B79EE] mb-1">
            {{ getValue(data.B22170001, '0') }}
          </div>
          <div class="text-sm font-medium text-gray-700 mb-1">贷款行为分</div>
          <div class="text-xs text-gray-500">1-1000分</div>
        </div>

        <!-- 贷款行为置信度 -->
        <div class="rounded-lg border border-[#2B79EE8F] bg-[#2B79EE1A] p-4 text-center">
          <div class="text-2xl font-bold text-[#2B79EE] mb-1">
            {{ formatConfidence(data.B22170051) }}
          </div>
          <div class="text-sm font-medium text-gray-700 mb-1">贷款行为置信度</div>
          <div class="text-xs text-gray-500">50-100</div>
        </div>
      </div>

      <!-- 贷款笔数统计 -->
      <LTitle title="贷款笔数统计" />
      <div class="mt-3 mb-6">
        <van-tabs v-model:active="activeLoanTab" color="var(--color-primary)">
          <van-tab title="近1个月">
            <div class="p-4 bg-gray-50 rounded-lg">
              <div class="grid grid-cols-2 gap-3">
                <div>
                  <div class="text-sm text-gray-600 mb-1">贷款笔数</div>
                  <div class="text-lg font-bold text-gray-800">{{ getValue(data.B22170002, '0') }} 笔</div>
                </div>
                <div>
                  <div class="text-sm text-gray-600 mb-1">贷款机构数</div>
                  <div class="text-lg font-bold text-gray-800">{{ getValue(data.B22170016, '0') }} 家</div>
                </div>
                <div>
                  <div class="text-sm text-gray-600 mb-1">贷款总金额</div>
                  <div class="text-lg font-bold text-gray-800">{{ formatAmountRange(data.B22170007) }}</div>
                </div>
                <div>
                  <div class="text-sm text-gray-600 mb-1">履约贷款总金额</div>
                  <div class="text-lg font-bold text-gray-800">{{ formatAmountRange(data.B22170040) }}</div>
                </div>
                <div>
                  <div class="text-sm text-gray-600 mb-1">履约贷款次数</div>
                  <div class="text-lg font-bold text-gray-800">{{ getValue(data.B22170045, '0') }} 次</div>
                </div>
                <div>
                  <div class="text-sm text-gray-600 mb-1">失败扣款笔数</div>
                  <div class="text-lg font-bold text-gray-800">{{ getValue(data.B22170035, '0') }} 笔</div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="近3个月">
            <div class="p-4 bg-gray-50 rounded-lg">
              <div class="grid grid-cols-2 gap-3">
                <div>
                  <div class="text-sm text-gray-600 mb-1">贷款笔数</div>
                  <div class="text-lg font-bold text-gray-800">{{ getValue(data.B22170003, '0') }} 笔</div>
                </div>
                <div>
                  <div class="text-sm text-gray-600 mb-1">贷款机构数</div>
                  <div class="text-lg font-bold text-gray-800">{{ getValue(data.B22170017, '0') }} 家</div>
                </div>
                <div>
                  <div class="text-sm text-gray-600 mb-1">贷款总金额</div>
                  <div class="text-lg font-bold text-gray-800">{{ formatAmountRange(data.B22170008) }}</div>
                </div>
                <div>
                  <div class="text-sm text-gray-600 mb-1">履约贷款总金额</div>
                  <div class="text-lg font-bold text-gray-800">{{ formatAmountRange(data.B22170041) }}</div>
                </div>
                <div>
                  <div class="text-sm text-gray-600 mb-1">履约贷款次数</div>
                  <div class="text-lg font-bold text-gray-800">{{ getValue(data.B22170046, '0') }} 次</div>
                </div>
                <div>
                  <div class="text-sm text-gray-600 mb-1">失败扣款笔数</div>
                  <div class="text-lg font-bold text-gray-800">{{ getValue(data.B22170036, '0') }} 笔</div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="近6个月">
            <div class="p-4 bg-gray-50 rounded-lg">
              <div class="grid grid-cols-2 gap-3">
                <div>
                  <div class="text-sm text-gray-600 mb-1">贷款笔数</div>
                  <div class="text-lg font-bold text-gray-800">{{ getValue(data.B22170004, '0') }} 笔</div>
                </div>
                <div>
                  <div class="text-sm text-gray-600 mb-1">贷款机构数</div>
                  <div class="text-lg font-bold text-gray-800">{{ getValue(data.B22170018, '0') }} 家</div>
                </div>
                <div>
                  <div class="text-sm text-gray-600 mb-1">贷款总金额</div>
                  <div class="text-lg font-bold text-gray-800">{{ formatAmountRange(data.B22170009) }}</div>
                </div>
                <div>
                  <div class="text-sm text-gray-600 mb-1">履约贷款总金额</div>
                  <div class="text-lg font-bold text-gray-800">{{ formatAmountRange(data.B22170042) }}</div>
                </div>
                <div>
                  <div class="text-sm text-gray-600 mb-1">履约贷款次数</div>
                  <div class="text-lg font-bold text-gray-800">{{ getValue(data.B22170047, '0') }} 次</div>
                </div>
                <div>
                  <div class="text-sm text-gray-600 mb-1">失败扣款笔数</div>
                  <div class="text-lg font-bold text-gray-800">{{ getValue(data.B22170037, '0') }} 笔</div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="近12个月">
            <div class="p-4 bg-gray-50 rounded-lg">
              <div class="grid grid-cols-2 gap-3">
                <div>
                  <div class="text-sm text-gray-600 mb-1">贷款笔数</div>
                  <div class="text-lg font-bold text-gray-800">{{ getValue(data.B22170005, '0') }} 笔</div>
                </div>
                <div>
                  <div class="text-sm text-gray-600 mb-1">贷款机构数</div>
                  <div class="text-lg font-bold text-gray-800">{{ getValue(data.B22170019, '0') }} 家</div>
                </div>
                <div>
                  <div class="text-sm text-gray-600 mb-1">贷款总金额</div>
                  <div class="text-lg font-bold text-gray-800">{{ formatAmountRange(data.B22170010) }}</div>
                </div>
                <div>
                  <div class="text-sm text-gray-600 mb-1">履约贷款总金额</div>
                  <div class="text-lg font-bold text-gray-800">{{ formatAmountRange(data.B22170043) }}</div>
                </div>
                <div>
                  <div class="text-sm text-gray-600 mb-1">履约贷款次数</div>
                  <div class="text-lg font-bold text-gray-800">{{ getValue(data.B22170048, '0') }} 次</div>
                </div>
                <div>
                  <div class="text-sm text-gray-600 mb-1">失败扣款笔数</div>
                  <div class="text-lg font-bold text-gray-800">{{ getValue(data.B22170038, '0') }} 笔</div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="近24个月">
            <div class="p-4 bg-gray-50 rounded-lg">
              <div class="grid grid-cols-2 gap-3">
                <div>
                  <div class="text-sm text-gray-600 mb-1">贷款笔数</div>
                  <div class="text-lg font-bold text-gray-800">{{ getValue(data.B22170006, '0') }} 笔</div>
                </div>
                <div>
                  <div class="text-sm text-gray-600 mb-1">贷款机构数</div>
                  <div class="text-lg font-bold text-gray-800">{{ getValue(data.B22170020, '0') }} 家</div>
                </div>
                <div>
                  <div class="text-sm text-gray-600 mb-1">贷款总金额</div>
                  <div class="text-lg font-bold text-gray-800">{{ formatAmountRange(data.B22170011) }}</div>
                </div>
                <div>
                  <div class="text-sm text-gray-600 mb-1">履约贷款总金额</div>
                  <div class="text-lg font-bold text-gray-800">{{ formatAmountRange(data.B22170044) }}</div>
                </div>
                <div>
                  <div class="text-sm text-gray-600 mb-1">履约贷款次数</div>
                  <div class="text-lg font-bold text-gray-800">{{ getValue(data.B22170049, '0') }} 次</div>
                </div>
                <div>
                  <div class="text-sm text-gray-600 mb-1">失败扣款笔数</div>
                  <div class="text-lg font-bold text-gray-800">{{ getValue(data.B22170039, '0') }} 笔</div>
                </div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>

      <!-- 逾期情况 -->
      <LTitle title="逾期情况" />
      <div class="mt-3 mb-6">
        <div class="grid grid-cols-2 gap-4">
          <!-- M0+逾期 -->
          <div class="rounded-lg border border-[#EB3C3C8F] bg-[#EB3C3C1A] p-4">
            <div class="text-sm font-medium text-gray-700 mb-3">M0+逾期</div>
            <div class="space-y-2">
              <div class="flex justify-between">
                <span class="text-xs text-gray-600">近6个月</span>
                <span class="text-sm font-bold text-[#EB3C3C]">{{ getValue(data.B22170025, '0') }} 笔</span>
              </div>
              <div class="flex justify-between">
                <span class="text-xs text-gray-600">近12个月</span>
                <span class="text-sm font-bold text-[#EB3C3C]">{{ getValue(data.B22170026, '0') }} 笔</span>
              </div>
              <div class="flex justify-between">
                <span class="text-xs text-gray-600">近24个月</span>
                <span class="text-sm font-bold text-[#EB3C3C]">{{ getValue(data.B22170027, '0') }} 笔</span>
              </div>
            </div>
          </div>

          <!-- M1+逾期 -->
          <div class="rounded-lg border border-[#EB3C3C8F] bg-[#EB3C3C1A] p-4">
            <div class="text-sm font-medium text-gray-700 mb-3">M1+逾期</div>
            <div class="space-y-2">
              <div class="flex justify-between">
                <span class="text-xs text-gray-600">近6个月</span>
                <span class="text-sm font-bold text-[#EB3C3C]">{{ getValue(data.B22170028, '0') }} 笔</span>
              </div>
              <div class="flex justify-between">
                <span class="text-xs text-gray-600">近12个月</span>
                <span class="text-sm font-bold text-[#EB3C3C]">{{ getValue(data.B22170029, '0') }} 笔</span>
              </div>
              <div class="flex justify-between">
                <span class="text-xs text-gray-600">近24个月</span>
                <span class="text-sm font-bold text-[#EB3C3C]">{{ getValue(data.B22170030, '0') }} 笔</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 累计逾期金额 -->
        <div class="mt-4 grid grid-cols-3 gap-3">
          <div class="bg-gray-50 rounded-lg p-3 text-center">
            <div class="text-sm text-gray-600 mb-1">近6个月累计逾期金额</div>
            <div class="text-lg font-bold text-gray-800">{{ formatAmountRange(data.B22170031) }}</div>
          </div>
          <div class="bg-gray-50 rounded-lg p-3 text-center">
            <div class="text-sm text-gray-600 mb-1">近12个月累计逾期金额</div>
            <div class="text-lg font-bold text-gray-800">{{ formatAmountRange(data.B22170032) }}</div>
          </div>
          <div class="bg-gray-50 rounded-lg p-3 text-center">
            <div class="text-sm text-gray-600 mb-1">近24个月累计逾期金额</div>
            <div class="text-lg font-bold text-gray-800">{{ formatAmountRange(data.B22170033) }}</div>
          </div>
        </div>
      </div>

      <!-- 其他重要信息 -->
      <LTitle title="其他重要信息" />
      <div class="mt-3 mb-6">
        <div class="bg-gray-50 rounded-lg p-4 space-y-3">
          <div class="flex justify-between items-center">
            <span class="text-sm text-gray-600">正常还款订单数占比</span>
            <span class="text-lg font-bold text-gray-800">{{ getValue(data.B22170034, '0%') }}</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-sm text-gray-600">最近一次履约距今天数</span>
            <span class="text-lg font-bold text-gray-800">{{ formatDayRange(data.B22170050) }}</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-sm text-gray-600">贷款已结清订单数</span>
            <span class="text-lg font-bold text-gray-800">{{ getValue(data.B22170052, '0') }} 笔</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-sm text-gray-600">信用贷款时长</span>
            <span class="text-lg font-bold text-gray-800">{{ getValue(data.B22170053, '0') }} 天</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-sm text-gray-600">最近一次贷款放款时间</span>
            <span class="text-lg font-bold text-gray-800">{{ formatTime(data.B22170054) }}</span>
          </div>
        </div>

        <!-- 近12个月贷款金额分布 -->
        <div class="mt-4 bg-gray-50 rounded-lg p-4">
          <div class="text-sm font-medium text-gray-700 mb-3">近12个月贷款金额分布</div>
          <div class="grid grid-cols-2 gap-3">
            <div class="flex justify-between">
              <span class="text-xs text-gray-600">1k及以下</span>
              <span class="text-sm font-bold text-gray-800">{{ getValue(data.B22170012, '0') }} 笔</span>
            </div>
            <div class="flex justify-between">
              <span class="text-xs text-gray-600">1k-3k</span>
              <span class="text-sm font-bold text-gray-800">{{ getValue(data.B22170013, '0') }} 笔</span>
            </div>
            <div class="flex justify-between">
              <span class="text-xs text-gray-600">3k-10k</span>
              <span class="text-sm font-bold text-gray-800">{{ getValue(data.B22170014, '0') }} 笔</span>
            </div>
            <div class="flex justify-between">
              <span class="text-xs text-gray-600">1w以上</span>
              <span class="text-sm font-bold text-gray-800">{{ getValue(data.B22170015, '0') }} 笔</span>
            </div>
          </div>
        </div>

        <!-- 机构类型统计 -->
        <div class="mt-4 bg-gray-50 rounded-lg p-4">
          <div class="text-sm font-medium text-gray-700 mb-3">机构类型统计（近12个月/近24个月）</div>
          <div class="space-y-2">
            <div class="flex justify-between">
              <span class="text-xs text-gray-600">消金类贷款机构数</span>
              <span class="text-sm font-bold text-gray-800">{{ getValue(data.B22170021, '0') }} / {{ getValue(data.B22170022, '0') }} 家</span>
            </div>
            <div class="flex justify-between">
              <span class="text-xs text-gray-600">网贷类贷款机构数</span>
              <span class="text-sm font-bold text-gray-800">{{ getValue(data.B22170023, '0') }} / {{ getValue(data.B22170024, '0') }} 家</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 温馨提示 -->
    <LRemark
      content="放款还款详情展示申请人的贷款行为、还款记录和逾期情况，包括贷款笔数、贷款金额、履约情况、逾期记录等。数据来源于各金融机构的贷款和还款记录。还款记录是评估信用状况的重要指标，正常还款反映良好的信用习惯，逾期记录则反映信用风险。建议特别关注逾期次数、逾期金额和正常还款比例，这些指标直接影响信用评分和借贷审批。" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import LTitle from '@/components/LTitle.vue'
import LRemark from '@/components/LRemark.vue'
import { formatAmountRange, formatDayRange, formatTime, formatConfidence, getValue } from '../utils/formatUtils'

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

const activeLoanTab = ref(0)
</script>

<style scoped></style>

