<script setup>
import * as echarts from 'echarts' // 引入 ECharts
import LTable from '@/components/LTable.vue'
import LTitle from '@/components/LTitle.vue'
import { ref, onMounted, watch, computed } from 'vue'
import { useRiskNotifier } from '@/composables/useRiskNotifier'

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
  mode: {
    type: String,
    default: 'idOnly', // 'full' 或 'idOnly'
    validator: value => ['full', 'idOnly'].includes(value),
  },
  apiId: {
    type: String,
    default: '',
  },
  index: {
    type: Number,
    default: 0,
  },
  notifyRiskStatus: {
    type: Function,
    default: () => { },
  },
})

const { data, mode } = props

// 数据类型切换
const dataType = ref('id') // 'id' 或 'cell'

// 监听mode变化，如果是idOnly模式，强制selectedDataSource为"id"
watch(
  () => props.mode,
  newMode => {
    if (newMode === 'idOnly') {
      dataType.value = 'id'
    }
  },
  { immediate: true }
)

// 图表实例
const borrowChartRef = ref(null)
const repayChartRef = ref(null)
const trendChartRef = ref(null)
const borrowChartInstance = ref(null)
const repayChartInstance = ref(null)
const trendChartInstance = ref(null)

// 表格数据
const borrowTable = ref([])
const institutionTable = ref([])

// 获取参考日期
const getReferenceDate = computed(() => {
  const prefix = `tl_${dataType.value}`
  const dateStr = data[`${prefix}_eletail_lasttime`]
  if (dateStr) {
    // 将字符串转为日期对象
    return new Date(dateStr)
  }
  // 如果没有日期信息，则使用当前日期
  return new Date()
})

// 根据相对月份获取实际年月
function getActualMonthYear(monthsBack) {
  const month = monthsBack.replace('m', '')
  if (month === '12') {
    return '近1年'
  }
  return `近${month}月`
  // const refDate = new Date(getReferenceDate.value);
  // refDate.setMonth(refDate.getMonth() - monthsBack);

  // const year = refDate.getFullYear();
  // const month = refDate.getMonth() + 1; // JavaScript月份从0开始

  // return `${year}年${month}月`;
}
function getActualMonthYearT(monthsBack) {
  if (monthsBack === 't0') {
    return '1年内'
  }
  return `近${monthsBack.replace('t', '')}月`
}
// 金额转换函数
function getLevelAmount(level) {
  const levelNum = Number(level) || 1
  const baseAmount = 3000
  return baseAmount * (levelNum - 1)
}

// 等级范围转换
function getLevelRange(level) {
  const levelNum = Number(level) || 1
  const baseAmount = 3000
  const lowerLimit = baseAmount * (levelNum - 1)
  const upperLimit = baseAmount * levelNum
  return `${lowerLimit}元 - ${upperLimit}元`
}

// 计算借贷金额数据（按月）
const monthlyBorrowData = computed(() => {
  const months = ['m1', 'm3', 'm6', 'm9', 'm12']

  const prefix = `tl_${dataType.value}`

  return months
    .map((month, index) => {
      const borrowKey = `${prefix}_${month}_nbank_passlendamt`
      const borrowAmount = getLevelAmount(data[borrowKey])
      console.log(borrowKey, borrowAmount)
      return {
        month: getActualMonthYear(month),
        amount: borrowAmount,
        displayAmount: formatAmount(borrowAmount),
        level: data[borrowKey] || '0',
        levelRange: getLevelRange(data[borrowKey]),
      }
    })
    .reverse()
})
// 计算应还金额数据（按月）
const monthlyRepayData = computed(() => {
  const months = ['m1', 'm3', 'm6', 'm9', 'm12']
  const prefix = `tl_${dataType.value}`

  return months
    .map((month, index) => {
      const repayKey = `${prefix}_${month}_nbank_reamt`
      const repayAmount = getLevelAmount(data[repayKey])
      return {
        month: getActualMonthYear(month),
        amount: repayAmount,
        displayAmount: formatAmount(repayAmount),
        level: data[repayKey] || '0',
        levelRange: getLevelRange(data[repayKey]),
      }
    })
    .reverse()
})

// 计算机构数和借还差值（按月）
const monthlyInstitutionData = computed(() => {
  const months = ['m1', 'm3', 'm6', 'm9', 'm12']
  const prefix = `tl_${dataType.value}`

  return months
    .map((month, index) => {
      const orgKey = `${prefix}_${month}_nbank_passorg`
      const numKey = `${prefix}_${month}_nbank_passnum`
      const borrowKey = `${prefix}_${month}_nbank_passlendamt`
      const repayKey = `${prefix}_${month}_nbank_reamt`

      const orgCount = Number(data[orgKey] || 0)
      const loanCount = Number(data[numKey] || 0)
      const borrowAmount = getLevelAmount(data[borrowKey])
      const repayAmount = getLevelAmount(data[repayKey])

      let ratio = 0
      if (borrowAmount > 0) {
        ratio = ((repayAmount / borrowAmount) * 100).toFixed(2)
      }

      return {
        month: getActualMonthYear(month),
        orgCount,
        loanCount,
        borrowAmount: formatAmount(borrowAmount),
        repayAmount: formatAmount(repayAmount),
        ratio: `${ratio}%`,
      }
    })
    .reverse()
})

// 计算近期借贷趋势数据（3月、6月、9月、12月）
const recentBorrowTrends = computed(() => {
  const months = ['t0']
  const prefix = `tl_${dataType.value}`

  return months
    .map((month, index) => {
      const orgKey = `${prefix}_${month}_nbank_org`
      const numKey = `${prefix}_${month}_nbank_num`
      const borrowKey = `${prefix}_${month}_nbank_lendamt`
      const repayKey = `${prefix}_${month}_nbank_reamt`

      const orgCount = Number(data[orgKey] || 0)
      const loanCount = Number(data[numKey] || 0)
      const borrowAmount = getLevelAmount(data[borrowKey])
      const repayAmount = getLevelAmount(data[repayKey])

      let ratio = 0
      if (borrowAmount > 0) {
        ratio = ((repayAmount / borrowAmount) * 100).toFixed(2)
      }

      return {
        month: getActualMonthYearT(month),
        orgCount,
        loanCount,
        borrowAmount: formatAmount(borrowAmount),
        repayAmount: formatAmount(repayAmount),
        ratio: `${ratio}%`,
      }
    })
    .reverse()
})

// 获取最近一次借贷信息
const lastLoanInfo = computed(() => {
  const prefix = `tl_${dataType.value}`
  return {
    time: data[`${prefix}_eletail_lasttime`] || '--',
    type: getLoanTypeDesc(data[`${prefix}_eletail_lasttype`]),
    count: Number(data[`${prefix}_eletail_num`] || 0),
    orgCount: Number(data[`${prefix}_eletail_org`] || 0),
  }
})

// 获取借贷类型描述
function getLoanTypeDesc(type) {
  const typeMap = {
    a: '传统银行',
    b: '网络零售银行',
    c: '持牌网络小贷',
    d: '持牌小贷',
    e: '持牌消费金融',
    f: '持牌融资租赁',
    g: '持牌汽车金融',
    h: '其他',
  }
  return typeMap[type] || '未知'
}

// 金额格式化
function formatAmount(amount) {
  return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}

// 借贷行为总结
const behaviorSummary = computed(() => {
  const prefix = `tl_${dataType.value}`

  // 获取近一年数据
  const yearData = recentBorrowTrends.value[0]

  // 计算平均月申请次数
  const avgMonthlyApplications = (yearData.loanCount / 12).toFixed(1)

  // 计算平均月审批额度
  const totalBorrowAmount = Number(yearData.borrowAmount.replace(/,/g, ''))
  const avgMonthlyAmount = (totalBorrowAmount / 12).toFixed(0)

  // 计算平均月应还金额
  const totalRepayAmount = Number(yearData.repayAmount.replace(/,/g, ''))
  const avgMonthlyRepay = (totalRepayAmount / 12).toFixed(0)

  // 计算还款比例
  const repayRatio = totalBorrowAmount > 0 ? ((totalRepayAmount / totalBorrowAmount) * 100).toFixed(1) : 0

  // 风险评估
  let riskLevel = '低'
  let riskDesc = '借贷行为健康，借贷金额合理'

  // 基于机构数评估
  if (yearData.orgCount > 5) {
    riskLevel = '高'
    riskDesc = '多头借贷风险较高，借贷机构过多'
  } else if (yearData.orgCount > 3) {
    riskLevel = '中'
    riskDesc = '存在多头借贷风险，借贷机构较多'
  }

  // 基于月均申请次数评估
  if (avgMonthlyApplications > 3) {
    riskLevel = riskLevel === '低' ? '中' : '高'
    riskDesc += '，月均申请次数较多'
  }

  // 基于还款比例评估
  if (repayRatio < 50) {
    riskLevel = riskLevel === '低' ? '中' : '高'
    riskDesc += '，还款比例较低'
  }

  return {
    totalApplications: yearData.loanCount,
    totalOrgs: yearData.orgCount,
    totalAmount: formatAmount(totalBorrowAmount),
    avgMonthlyApplications,
    avgMonthlyAmount: formatAmount(avgMonthlyAmount),
    avgMonthlyRepay: formatAmount(avgMonthlyRepay),
    repayRatio: `${repayRatio}%`,
    riskLevel,
    riskDesc,
  }
})

// 绘制借贷金额图表
function drawBorrowChart() {
  if (!borrowChartRef.value) return

  if (!borrowChartInstance.value) {
    borrowChartInstance.value = echarts.init(borrowChartRef.value)
  }

  const chartData = monthlyBorrowData.value
  const option = {
    title: {
      text: '月度审批额度(元)',
      left: 'center',
      textStyle: {
        fontWeight: 'bold',
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: 'axis',
      formatter: function (params) {
        const data = params[0].data
        return `${params[0].name}<br/>${params[0].seriesName}: ${data.displayAmount}<br/>等级: ${data.level} (${data.levelRange})`
      },
      backgroundColor: 'rgba(255, 255, 255, 0.8)',
      borderColor: '#5470C6',
      borderWidth: 1,
      textStyle: {
        color: '#333',
      },
      shadowBlur: 10,
      shadowColor: 'rgba(0, 0, 0, 0.2)',
    },
    grid: {
      left: '5%',
      right: '5%',
      bottom: '0%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: chartData.map(item => item.month),
      axisLabel: {
        interval: 0,
        rotate: 45,
        fontWeight: 'bold',
        margin: 15,
      },
      axisLine: {
        lineStyle: {
          color: '#999',
        },
      },
    },
    yAxis: {
      type: 'value',
      name: '金额(元)',
      nameTextStyle: {
        fontWeight: 'bold',
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          opacity: 0.6,
        },
      },
    },
    series: [
      {
        name: '审批额度',
        type: 'bar',
        data: chartData.map(item => ({
          value: item.amount,
          displayAmount: item.displayAmount,
          level: item.level,
          levelRange: item.levelRange,
        })),
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#5470C6' },
            { offset: 1, color: '#4662a4' },
          ]),
          borderRadius: [5, 5, 0, 0],
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#5470C6' },
              { offset: 0.7, color: '#4662a4' },
              { offset: 1, color: '#3c5390' },
            ]),
          },
        },
        barWidth: '60%',
        barMinHeight: 3,
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.1)',
        },
      },
    ],
    animation: true,
  }

  borrowChartInstance.value.setOption(option)
}

// 绘制应还金额图表
function drawRepayChart() {
  if (!repayChartRef.value) return

  if (!repayChartInstance.value) {
    repayChartInstance.value = echarts.init(repayChartRef.value)
  }

  const chartData = monthlyRepayData.value
  const option = {
    title: {
      text: '月度应还金额(元)',
      left: 'center',
      textStyle: {
        fontWeight: 'bold',
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: 'axis',
      formatter: function (params) {
        const data = params[0].data
        return `${params[0].name}<br/>${params[0].seriesName}: ${data.displayAmount}<br/>等级: ${data.level} (${data.levelRange})`
      },
      backgroundColor: 'rgba(255, 255, 255, 0.8)',
      borderColor: '#91CC75',
      borderWidth: 1,
      textStyle: {
        color: '#333',
      },
      shadowBlur: 10,
      shadowColor: 'rgba(0, 0, 0, 0.2)',
    },
    grid: {
      left: '5%',
      right: '5%',
      bottom: '15%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: chartData.map(item => item.month),
      axisLabel: {
        interval: 0,
        rotate: 45,
        fontWeight: 'bold',
        margin: 15,
      },
      axisLine: {
        lineStyle: {
          color: '#999',
        },
      },
    },
    yAxis: {
      type: 'value',
      name: '金额(元)',
      nameTextStyle: {
        fontWeight: 'bold',
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          opacity: 0.6,
        },
      },
    },
    series: [
      {
        name: '应还金额',
        type: 'bar',
        data: chartData.map(item => ({
          value: item.amount,
          displayAmount: item.displayAmount,
          level: item.level,
          levelRange: item.levelRange,
        })),
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#b8e986' },
            { offset: 0.5, color: '#91CC75' },
            { offset: 1, color: '#7cb362' },
          ]),
          borderRadius: [5, 5, 0, 0],
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#91CC75' },
              { offset: 0.7, color: '#7cb362' },
              { offset: 1, color: '#6a9c53' },
            ]),
          },
        },
        barWidth: '60%',
        barMinHeight: 3,
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.1)',
        },
      },
    ],
    animation: true,
  }

  repayChartInstance.value.setOption(option)
}

// 绘制借贷应还趋势对比图
function drawTrendChart() {
  if (!trendChartRef.value) return

  if (!trendChartInstance.value) {
    trendChartInstance.value = echarts.init(trendChartRef.value)
  }

  const borrowData = monthlyBorrowData.value
  const repayData = monthlyRepayData.value

  const option = {
    title: {
      text: '审批额度与应还金额趋势对比',
      left: 'center',
      textStyle: {
        fontWeight: 'bold',
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(255, 255, 255, 0.8)',
      borderColor: '#ccc',
      borderWidth: 1,
      textStyle: {
        color: '#333',
      },
      shadowBlur: 10,
      shadowColor: 'rgba(0, 0, 0, 0.2)',
    },
    legend: {
      data: ['审批额度', '应还金额'],
      top: 30,
      textStyle: {
        fontWeight: 'bold',
      },
    },
    grid: {
      left: '5%',
      right: '5%',
      bottom: '15%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: borrowData.map(item => item.month),
      axisLabel: {
        interval: 0,
        rotate: 45,
        fontWeight: 'bold',
        margin: 15,
      },
      axisLine: {
        lineStyle: {
          color: '#999',
        },
      },
    },
    yAxis: {
      type: 'value',
      name: '金额(元)',
      nameTextStyle: {
        fontWeight: 'bold',
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          opacity: 0.6,
        },
      },
    },
    series: [
      {
        name: '审批额度',
        type: 'line',
        data: borrowData.map(item => item.amount),
        smooth: true,
        symbol: 'emptyCircle',
        symbolSize: 8,
        lineStyle: {
          width: 3,
          shadowColor: 'rgba(0, 0, 0, 0.3)',
          shadowBlur: 10,
          shadowOffsetY: 8,
        },
        itemStyle: {
          color: '#5470C6',
          borderWidth: 2,
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(84, 112, 198, 0.5)' },
            { offset: 1, color: 'rgba(84, 112, 198, 0.1)' },
          ]),
        },
      },
      {
        name: '应还金额',
        type: 'line',
        data: repayData.map(item => item.amount),
        smooth: true,
        symbol: 'emptyCircle',
        symbolSize: 8,
        lineStyle: {
          width: 3,
          shadowColor: 'rgba(0, 0, 0, 0.3)',
          shadowBlur: 10,
          shadowOffsetY: 8,
        },
        itemStyle: {
          color: '#91CC75',
          borderWidth: 2,
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(145, 204, 117, 0.5)' },
            { offset: 1, color: 'rgba(145, 204, 117, 0.1)' },
          ]),
        },
      },
    ],
    animation: true,
  }

  trendChartInstance.value.setOption(option)
}

// 监听数据类型变化
watch(dataType, () => {
  drawBorrowChart()
  drawRepayChart()
  drawTrendChart()
})

// 初始化所有图表
function initCharts() {
  drawBorrowChart()
  drawRepayChart()
  drawTrendChart()
}

// 窗口大小变化时重绘图表
function handleResize() {
  if (borrowChartInstance.value) borrowChartInstance.value.resize()
  if (repayChartInstance.value) repayChartInstance.value.resize()
  if (trendChartInstance.value) trendChartInstance.value.resize()
}

onMounted(() => {
  initCharts()
  window.addEventListener('resize', handleResize)
})

// 计算风险评分（0-100分，分数越高越安全）
const riskScore = computed(() => {
  // 计算总借贷金额和还款金额
  const totalBorrowAmount = monthlyBorrowData.value.reduce((sum, item) => sum + item.totalAmount, 0);
  const totalRepayAmount = monthlyRepayData.value.reduce((sum, item) => sum + item.totalAmount, 0);

  // 根据借贷金额计算风险评分
  // 0元：100分（最安全）
  // 1-10万：90分（较安全）
  // 10-50万：70分（中等风险）
  // 50-100万：50分（较高风险）
  // 100万以上：30分（高风险）
  const totalAmount = totalBorrowAmount + totalRepayAmount;
  if (totalAmount === 0) return 100;
  if (totalAmount <= 100000) return 90;
  if (totalAmount <= 500000) return 70;
  if (totalAmount <= 1000000) return 50;
  return 30;
});

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

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

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<template>
  <div class="card">
    <div class="flex flex-col gap-y-4">
      <!-- 数据类型切换 -->
      <div class="p-6 bg-white rounded-lg shadow-sm border border-gray-100 relative overflow-hidden mb-4">
        <!-- 背景装饰元素 -->
        <div class="absolute top-0 right-0 w-32 h-32 bg-blue-50 rounded-full -mr-8 -mt-8 opacity-60"></div>
        <div class="absolute bottom-0 left-0 w-20 h-20 bg-green-50 rounded-full -ml-10 -mb-10 opacity-50"></div>

        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 relative z-10">
          <div class="space-y-2">
            <h2 class="text-xl font-semibold text-gray-800 flex items-center">借贷行为分析报告</h2>
            <p class="text-sm text-gray-600 ml-6">本报告统计审批额度与应还情况，帮助评估信贷风险</p>
          </div>
          <div v-if="mode === 'full'" class="flex flex-wrap gap-6 w-full md:w-auto">
            <div class="flex-1 md:flex-none flex rounded-md shadow-sm relative">
              <button type="button"
                class="flex-1 py-2 px-4 text-sm font-medium rounded-l-md border transition-all duration-200 flex items-center"
                :class="[
                  dataType === 'id'
                    ? 'bg-gradient-to-r from-blue-500 to-blue-600 text-white border-blue-500 shadow-md'
                    : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50',
                ]" @click="dataType = 'id'">
                <svg v-if="dataType === 'id'" class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <svg v-else class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2">
                  </path>
                </svg>
                身份证数据
              </button>
              <button type="button"
                class="flex-1 py-2 px-4 text-sm font-medium rounded-r-md border transition-all duration-200 flex items-center"
                :class="[
                  dataType === 'cell'
                    ? 'bg-gradient-to-r from-green-500 to-green-600 text-white border-green-500 shadow-md'
                    : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50',
                ]" @click="dataType = 'cell'">
                <svg v-if="dataType === 'cell'" class="w-4 h-4 mr-1" fill="none" stroke="currentColor"
                  viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <svg v-else class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                </svg>
                手机号数据
              </button>
            </div>
          </div>
        </div>

        <!-- 数据类型说明 -->
        <div v-if="mode === 'full'" class="mt-4 bg-blue-50 p-3 rounded-lg text-xs text-gray-700">
          <p class="font-medium text-blue-800 mb-1">数据类型说明：</p>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
            <div class="flex items-start">
              <span class="inline-block w-2 h-2 mt-1 mr-2 rounded-full flex-shrink-0 bg-blue-500"></span>
              <span><strong>身份证数据：</strong>通过身份证号码匹配获取的借贷记录，反映与身份证关联的所有借贷行为</span>
            </div>
            <div class="flex items-start">
              <span class="inline-block w-2 h-2 mt-1 mr-2 rounded-full flex-shrink-0 bg-green-500"></span>
              <span><strong>手机号数据：</strong>通过手机号码匹配获取的借贷记录，反映与手机号关联的所有借贷行为</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 借贷金额图表 -->
      <LTitle title="近期审批额度" />
      <div ref="borrowChartRef" class="chart-container"></div>

      <!-- 借贷机构数和借还差值比例表格 -->
      <LTitle title="近期通过借贷审批情况" />
      <div class="overflow-x-auto">
        <LTable :data="monthlyInstitutionData">
          <template #header>
            <th class="border px-1 py-2 text-xs min-w-[25%]">时间</th>
            <th class="border px-1 py-2 text-xs min-w-[15%]">借贷机构数</th>
            <th class="border px-1 py-2 text-xs min-w-[15%]">借贷次数</th>
            <th class="border px-1 py-2 text-xs min-w-[15%]">审批额度</th>
          </template>
          <template #default="{ row }">
            <td class="border px-1 py-2 text-xs">
              {{ row.month }}
            </td>
            <td class="border px-1 py-2 text-xs text-center">
              {{ row.orgCount }}
            </td>
            <td class="border px-1 py-2 text-xs text-center">
              {{ row.loanCount }}
            </td>
            <td class="border px-1 py-2 text-xs text-center">
              {{ row.borrowAmount }}
            </td>
          </template>
        </LTable>
      </div>

      <!-- 近期借贷趋势表格 -->
      <LTitle title="近1年借贷情况" />
      <div class="overflow-x-auto">
        <LTable :data="recentBorrowTrends">
          <template #header>
            <th class="border px-1 py-2 text-xs min-w-[25%]">时间</th>
            <th class="border px-1 py-2 text-xs min-w-[15%]">借贷机构数</th>
            <th class="border px-1 py-2 text-xs min-w-[15%]">借贷次数</th>
            <th class="border px-1 py-2 text-xs min-w-[15%]">审批额度</th>
            <th class="border px-1 py-2 text-xs min-w-[15%]">应还金额</th>
            <th class="border px-1 py-2 text-xs min-w-[15%]">审批与应还比例</th>
          </template>
          <template #default="{ row }">
            <td class="border px-1 py-2 text-xs">
              {{ row.month }}
            </td>
            <td class="border px-1 py-2 text-xs text-center">
              {{ row.orgCount }}
            </td>
            <td class="border px-1 py-2 text-xs text-center">
              {{ row.loanCount }}
            </td>
            <td class="border px-1 py-2 text-xs text-center">
              {{ row.borrowAmount }}
            </td>
            <td class="border px-1 py-2 text-xs text-center">
              {{ row.repayAmount }}
            </td>
            <td class="border px-1 py-2 text-xs text-center">
              {{ row.ratio }}
            </td>
          </template>
        </LTable>
      </div>

      <!-- 借贷行为总结 -->
      <LTitle title="借贷行为总结分析" />
      <div class="summary-container bg-blue-50 p-4 rounded-md">
        <div class="text-xs text-gray-500 mb-2">数据时间范围: 近1年</div>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
          <div class="info-card p-3 bg-white rounded shadow-sm">
            <div class="text-sm text-gray-500">总申请次数</div>
            <div class="text-lg font-semibold">{{ behaviorSummary.totalApplications }}次</div>
          </div>
          <div class="info-card p-3 bg-white rounded shadow-sm">
            <div class="text-sm text-gray-500">借贷机构数</div>
            <div class="text-lg font-semibold">{{ behaviorSummary.totalOrgs }}家</div>
          </div>
          <div class="info-card p-3 bg-white rounded shadow-sm">
            <div class="text-sm text-gray-500">总审批额度</div>
            <div class="text-lg font-semibold">{{ behaviorSummary.totalAmount }}元</div>
          </div>
          <div class="info-card p-3 bg-white rounded shadow-sm">
            <div class="text-sm text-gray-500">月均申请次数</div>
            <div class="text-lg font-semibold">{{ behaviorSummary.avgMonthlyApplications }}次</div>
          </div>
        </div>

        <div class="risk-assessment p-4 bg-white rounded-md">
          <div class="text-lg font-bold mb-2">
            风险评估:
            <span :class="{
              'text-red-500': behaviorSummary.riskLevel === '高',
              'text-yellow-500': behaviorSummary.riskLevel === '中',
              'text-green-500': behaviorSummary.riskLevel === '低',
            }">{{ behaviorSummary.riskLevel }}风险</span>
          </div>
          <div class="text-gray-700">
            <p>
              · 月均审批额度:
              {{ behaviorSummary.avgMonthlyAmount }}元
            </p>
            <p>
              · 月均应还金额:
              {{ behaviorSummary.avgMonthlyRepay }}元
            </p>
            <p>· 还款比例: {{ behaviorSummary.repayRatio }}</p>
            <p>· {{ behaviorSummary.riskDesc }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.chart-container {
  width: 100%;
  height: 300px;
  margin-bottom: 20px;
}
</style>
