<template>
  <div class="card rental-behavior-section">
    <div class="rounded-lg border border-gray-200 pb-2 mb-4">

      <div class="flex items-center mb-4 p-4">
        <div class="w-8 h-8 flex items-center justify-center mr-2">
          <img src="@/assets/images/report/zlxw.png" alt="租赁行为" class="w-8 h-8 object-contain" />
        </div>
        <span class="font-bold text-gray-800">租赁行为</span>
      </div>
      <div class="mt-4">
        <!-- 租赁行为概览 -->
        <div class="mb-6">
          <LTitle title="租赁行为概览" />
          <div class="grid grid-cols-2 gap-4 p-4">
            <div class="bg-blue-50 rounded-lg p-4 text-center border border-[#2B79EE8F]">
              <div class="text-2xl font-bold text-[#1FBE5D]">
                {{ get12MonthsApplicationCount }}
              </div>
              <div class="text-sm text-gray-600 mt-1">近12个月申请次数</div>
            </div>
            <div class="bg-blue-50 rounded-lg p-4 text-center border border-[#2B79EE8F]">
              <div class="text-2xl font-bold text-[#1FBE5D]">
                {{ get12MonthsInstitutionCount }}
              </div>
              <div class="text-sm text-gray-600 mt-1">近12个月申请机构数</div>
            </div>
          </div>
        </div>

        <!-- 时间分布统计图表 -->
        <div class="mb-6">
          <LTitle title="租赁申请时间分布" />

          <!-- 双柱状图：申请次数 vs 申请机构数 -->
          <div class="mb-4 h-64">
            <v-chart class="chart-container" :option="timeDistributionChartOption" autoresize />
          </div>
        </div>

        <!-- 详细时间段统计 -->
        <div class="space-y-4 mb-4">
          <!-- 近期活动（高风险关注期） -->
          <div class="mb-6">
            <LTitle title="近期活动（高风险关注期）" />
            <div class="bg-white px-4 py-2">
              <van-tabs v-model:active="activeTab" color="var(--color-primary)">
                <van-tab v-for="(tab, index) in recentTabs" :key="tab.key" :title="tab.name">
                  <div class="p-4">
                    <div class="space-y-2">
                      <div class="flex justify-between items-center text-sm">
                        <span class="text-gray-600">申请次数</span>
                        <span :class="getActivityColor(getCurrentTabData(tab.key).count)" class="font-bold">
                          {{ getApplicationCount(getCurrentTabData(tab.key).count) }} 次
                        </span>
                      </div>
                      <div class="flex justify-between items-center text-sm">
                        <span class="text-gray-600">申请机构数</span>
                        <span :class="getActivityColor(getCurrentTabData(tab.key).institutions)" class="font-bold">
                          {{ getInstitutionCount(getCurrentTabData(tab.key).institutions) }} 家
                        </span>
                      </div>
                      <div class="flex justify-between items-center text-sm">
                        <span class="text-gray-600">周末申请次数</span>
                        <span :class="getActivityColor(getCurrentTabData(tab.key).weekend)" class="font-bold">
                          {{ getApplicationCount(getCurrentTabData(tab.key).weekend) }} 次
                        </span>
                      </div>
                      <div class="flex justify-between items-center text-sm">
                        <span class="text-gray-600">夜间申请次数</span>
                        <span :class="getActivityColor(getCurrentTabData(tab.key).night)" class="font-bold">
                          {{ getApplicationCount(getCurrentTabData(tab.key).night) }} 次
                        </span>
                      </div>
                    </div>
                  </div>
                </van-tab>
              </van-tabs>
            </div>
          </div>

          <!-- 中期租赁活动 -->
          <div class="mb-6">
            <LTitle title="中期租赁活动" />
            <div class="bg-white  px-4 py-2">
              <van-tabs v-model:active="activeTab2" color="var(--color-primary)">
                <van-tab v-for="(tab, index) in mediumTabs" :key="tab.key" :title="tab.name">
                  <div class="p-4">
                    <div class="space-y-2">
                      <div class="flex justify-between items-center text-sm">
                        <span class="text-gray-600">申请次数</span>
                        <span :class="getActivityColor(getCurrentTabData(tab.key).count)" class="font-bold">
                          {{ getApplicationCount(getCurrentTabData(tab.key).count) }} 次
                        </span>
                      </div>
                      <div class="flex justify-between items-center text-sm">
                        <span class="text-gray-600">申请机构数</span>
                        <span :class="getActivityColor(getCurrentTabData(tab.key).institutions)" class="font-bold">
                          {{ getInstitutionCount(getCurrentTabData(tab.key).institutions) }} 家
                        </span>
                      </div>
                      <div class="flex justify-between items-center text-sm">
                        <span class="text-gray-600">周末申请次数</span>
                        <span :class="getActivityColor(getCurrentTabData(tab.key).weekend)" class="font-bold">
                          {{ getApplicationCount(getCurrentTabData(tab.key).weekend) }} 次
                        </span>
                      </div>
                      <div class="flex justify-between items-center text-sm">
                        <span class="text-gray-600">夜间申请次数</span>
                        <span :class="getActivityColor(getCurrentTabData(tab.key).night)" class="font-bold">
                          {{ getApplicationCount(getCurrentTabData(tab.key).night) }} 次
                        </span>
                      </div>
                    </div>
                  </div>
                </van-tab>
              </van-tabs>
            </div>
          </div>

          <!-- 长期租赁活动 -->
          <div class="mb-6">
            <LTitle title="长期租赁活动" />
            <div class="bg-white  px-4 py-2">
              <van-tabs v-model:active="activeTab3" color="var(--color-primary)">
                <van-tab v-for="(tab, index) in longTabs" :key="tab.key" :title="tab.name">
                  <div class="p-4">
                    <div class="space-y-2">
                      <div class="flex justify-between items-center text-sm">
                        <span class="text-gray-600">申请次数</span>
                        <span :class="getActivityColor(getCurrentTabData(tab.key).count)" class="font-bold">
                          {{ getApplicationCount(getCurrentTabData(tab.key).count) }} 次
                        </span>
                      </div>
                      <div class="flex justify-between items-center text-sm">
                        <span class="text-gray-600">申请机构数</span>
                        <span :class="getActivityColor(getCurrentTabData(tab.key).institutions)" class="font-bold">
                          {{ getInstitutionCount(getCurrentTabData(tab.key).institutions) }} 家
                        </span>
                      </div>
                      <div class="flex justify-between items-center text-sm">
                        <span class="text-gray-600">周末申请次数</span>
                        <span :class="getActivityColor(getCurrentTabData(tab.key).weekend)" class="font-bold">
                          {{ getApplicationCount(getCurrentTabData(tab.key).weekend) }} 次
                        </span>
                      </div>
                      <div class="flex justify-between items-center text-sm">
                        <span class="text-gray-600">夜间申请次数</span>
                        <span :class="getActivityColor(getCurrentTabData(tab.key).night)" class="font-bold">
                          {{ getApplicationCount(getCurrentTabData(tab.key).night) }} 次
                        </span>
                      </div>
                    </div>
                  </div>
                </van-tab>
              </van-tabs>
            </div>
          </div>

          <!-- 特殊时间段活动分析图表 -->
          <div class="mb-6">
            <LTitle title="特殊时间段活动分析" />

            <!-- 周末 vs 夜间活动对比图 -->
            <div class="mb-4 h-64">
              <v-chart class="chart-container" :option="specialTimeChartOption" autoresize />
            </div>

            <div class="px-4 mt-4">
              <div class="flex items-center mb-2">
                <div class="w-4 h-4 flex items-center justify-center mr-2">
                  <img src="@/assets/images/report/wxts_icon.png" alt="风险提示" class="w-4 h-4 object-contain" />
                </div>
                <div class="font-bold text-gray-800">风险提示</div>
              </div>
              <div class="ml-6 text-sm text-gray-500 space-y-1">
                <div><strong>周末申请：</strong>可能存在异常行为模式</div>
                <div><strong>夜间申请：</strong>需关注是否存在规避监管的行为</div>
                <div><strong>高频申请：</strong>短期内多次申请可能存在套现风险</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 风险评估提示 -->
        <div v-if="hasHighFrequencyRisk" class="mb-6">
          <div class="space-y-3 p-4 bg-red-100 border border-red-300 rounded-lg">
            <div class="flex items-start">
              <div class="mr-3 mt-1">
                <img src="@/assets/images/report/zfx.png" alt="风险提示" class="w-10 h-10 object-contain" />
              </div>
              <div>
                <h4 class="font-semibold text-gray-800 mb-2">高频租赁风险警告</h4>
                <p class="text-gray-400 text-sm">
                  检测到近期高频租赁申请行为，可能存在套现、欺诈或资金链紧张等风险。
                </p>
                <div class="mt-2 text-sm">
                  <div v-if="recentHighActivity.length > 0">
                    <span class="text-red-800 font-medium">高频时段：</span>
                    <span class="text-red-700">{{ recentHighActivity.join('、') }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 异常时间段警告 -->
        <div v-if="hasAbnormalTimeActivity" class="mb-6">
          <div class="space-y-3 p-4 bg-yellow-100 border border-yellow-300 rounded-lg">
            <div class="flex items-start">
              <div class="mr-3 mt-1">
                <img src="@/assets/images/report/zfx.png" alt="风险提示" class="w-10 h-10 object-contain" />
              </div>
              <div>
                <h4 class="font-semibold text-gray-800 mb-2">异常时间段活动提示</h4>
                <p class="text-gray-400 text-sm">
                  检测到周末或夜间租赁申请活动，需关注是否存在异常行为。
                </p>
              </div>
            </div>
          </div>
        </div>

        <!-- 正常提示 -->
        <div v-if="!hasAnyRentalActivity" class="mb-6 mx-4">
          <div class="space-y-3 p-4 bg-[#ECF9EF] border border-[#CAECD3] rounded-lg">
            <div class="flex items-center">
              <div class="mr-3">
                <img src="@/assets/images/report/zq.png" alt="良好记录" class="w-10 h-10 object-contain" />
              </div>
              <div>
                <h4 class="font-semibold text-gray-800">租赁行为正常</h4>
                <p class="text-gray-400 text-sm">
                  未检测到异常租赁申请行为，风险较低。
                </p>
              </div>
            </div>
          </div>
        </div>

        <!-- 数据说明 -->
        <div class="mb-6">
          <div class="space-y-2 p-4">
            <div class=" text-sm font-bold">数据说明</div>
            <div class="flex justify-between items-center text-sm">
              <span class="text-gray-600">申请次数</span>
              <span class="text-[#333333]">该时间段内的租赁申请总次数</span>
            </div>
            <div class="flex justify-between items-center text-sm">
              <span class="text-gray-600">申请机构数</span>
              <span class="text-[#333333]">该时间段内申请的不同机构数量</span>
            </div>
            <div class="flex justify-between items-center text-sm">
              <span class="text-gray-600">周末申请</span>
              <span class="text-[#333333]">周六、周日的申请活动</span>
            </div>
            <div class="flex justify-between items-center text-sm">
              <span class="text-gray-600">夜间申请</span>
              <span class="text-[#333333]">通常指22:00-06:00时间段的申请</span>
            </div>
            <div class="flex justify-between items-center text-sm">
              <span class="text-gray-600">风险评估</span>
              <span class="text-[#333333]">短期内高频申请可能存在较高风险</span>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>

  <!-- 温馨提示 -->
  <LRemark
    content="租赁行为分析展示申请人在租赁领域的行为模式，包括租赁申请频率、租赁金额分布、租赁期限和还款表现等。数据来源于租赁公司和金融租赁机构。租赁行为可以反映申请人的消费习惯、资金管理能力和信用意识。频繁的租赁申请或大额租赁可能暗示资金紧张，而良好的租赁还款记录则可以提升信用评价。建议关注租赁逾期情况和还款稳定性。" />
</template>

<script setup>
import { computed, ref } from 'vue'
import LTitle from '@/components/LTitle.vue'
import LRemark from '@/components/LRemark.vue'
import { formatRentalApplicationData } from '../utils/intervalFormatter.js'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import { Tab, Tabs } from 'vant'
import { useRiskNotifier } from '@/composables/useRiskNotifier'

// 注册ECharts组件
use([
  CanvasRenderer,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

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

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

// Tab 相关状态
const activeTab = ref(0)
const activeTab2 = ref(0)
const activeTab3 = ref(0)

// 近期活动 tab 数据
const recentTabs = [
  { name: '近3天', key: '3days' },
  { name: '近7天', key: '7days' },
  { name: '近14天', key: '14days' },
  { name: '近1个月', key: '1month' }
]

// 中期活动 tab 数据
const mediumTabs = [
  { name: '近3个月', key: '3months' },
  { name: '近6个月', key: '6months' }
]

// 长期活动 tab 数据
const longTabs = [
  { name: '近12个月', key: '12months' }
]

// 解析申请数据（格式：次数/机构数）
const parseApplicationData = (dataStr) => {
  return formatRentalApplicationData(dataStr)
}

// 获取申请次数
const getApplicationCount = (dataStr) => {
  const data = parseApplicationData(dataStr)
  return data.count
}

// 获取申请机构数
const getInstitutionCount = (dataStr) => {
  const data = parseApplicationData(dataStr)
  return data.institutions
}

// 获取12个月申请次数
const get12MonthsApplicationCount = computed(() => {
  const data = parseApplicationData(rentalBehavior.value?.rentalApplicationCountLast12Months)
  return `${data.count} 次`
})

// 获取12个月申请机构数
const get12MonthsInstitutionCount = computed(() => {
  const data = parseApplicationData(rentalBehavior.value?.rentalApplicationInstitutionsLast12Months)
  return `${data.institutions} 家`
})

// 是否有任何租赁活动
const hasAnyRentalActivity = computed(() => {
  const data12Months = parseApplicationData(rentalBehavior.value?.rentalApplicationCountLast12Months)
  return data12Months.count > 0
})

// 是否有周末活动
const hasWeekendActivity = computed(() => {
  const data = parseApplicationData(rentalBehavior.value?.rentalApplicationCountLast12MonthsWeekend)
  return data.count > 0
})

// 是否有夜间活动
const hasNightActivity = computed(() => {
  const data = parseApplicationData(rentalBehavior.value?.rentalApplicationCountLast12MonthsNight)
  return data.count > 0
})

// 是否有特殊时间段活动
const hasSpecialTimeActivity = computed(() => {
  return hasWeekendActivity.value || hasNightActivity.value
})

// 是否有高频租赁风险
const hasHighFrequencyRisk = computed(() => {
  const data3Days = parseApplicationData(rentalBehavior.value?.rentalApplicationCountLast3Days)
  const data7Days = parseApplicationData(rentalBehavior.value?.rentalApplicationCountLast7Days)
  const data1Month = parseApplicationData(rentalBehavior.value?.rentalApplicationCountLast1Month)

  // 3天内超过2次，7天内超过5次，或1个月内超过10次视为高频
  return data3Days.count > 2 || data7Days.count > 5 || data1Month.count > 10
})

// 是否有异常时间段活动
const hasAbnormalTimeActivity = computed(() => {
  return hasSpecialTimeActivity.value && !hasHighFrequencyRisk.value
})

// 近期高活动时段
const recentHighActivity = computed(() => {
  const activities = []

  const data3Days = parseApplicationData(rentalBehavior.value?.rentalApplicationCountLast3Days)
  const data7Days = parseApplicationData(rentalBehavior.value?.rentalApplicationCountLast7Days)
  const data14Days = parseApplicationData(rentalBehavior.value?.rentalApplicationCountLast14Days)

  if (data3Days.count > 2) activities.push('近3天')
  if (data7Days.count > 5) activities.push('近7天')
  if (data14Days.count > 8) activities.push('近14天')

  return activities
})

// 获取活动颜色
const getActivityColor = (dataStr) => {
  const data = parseApplicationData(dataStr)

  if (data.count === 0) return 'text-green-600'
  if (data.count <= 2) return 'text-blue-600'
  if (data.count <= 5) return 'text-yellow-600'
  if (data.count <= 10) return 'text-orange-600'
  return 'text-red-600'
}

// 获取当前 tab 的数据
const getCurrentTabData = (tabKey) => {
  const dataMap = {
    '3days': {
      count: rentalBehavior.value?.rentalApplicationCountLast3Days,
      institutions: rentalBehavior.value?.rentalApplicationInstitutionsLast3Days,
      weekend: rentalBehavior.value?.rentalApplicationCountLast3DaysWeekend,
      night: rentalBehavior.value?.rentalApplicationCountLast3DaysNight
    },
    '7days': {
      count: rentalBehavior.value?.rentalApplicationCountLast7Days,
      institutions: rentalBehavior.value?.rentalApplicationInstitutionsLast7Days,
      weekend: rentalBehavior.value?.rentalApplicationCountLast7DaysWeekend,
      night: rentalBehavior.value?.rentalApplicationCountLast7DaysNight
    },
    '14days': {
      count: rentalBehavior.value?.rentalApplicationCountLast14Days,
      institutions: rentalBehavior.value?.rentalApplicationInstitutionsLast14Days,
      weekend: rentalBehavior.value?.rentalApplicationCountLast14DaysWeekend,
      night: rentalBehavior.value?.rentalApplicationCountLast14DaysNight
    },
    '1month': {
      count: rentalBehavior.value?.rentalApplicationCountLast1Month,
      institutions: rentalBehavior.value?.rentalApplicationInstitutionsLast1Month,
      weekend: rentalBehavior.value?.rentalApplicationCountLast1MonthWeekend,
      night: rentalBehavior.value?.rentalApplicationCountLast1MonthNight
    },
    '3months': {
      count: rentalBehavior.value?.rentalApplicationCountLast3Months,
      institutions: rentalBehavior.value?.rentalApplicationInstitutionsLast3Months,
      weekend: rentalBehavior.value?.rentalApplicationCountLast3MonthsWeekend,
      night: rentalBehavior.value?.rentalApplicationCountLast3MonthsNight
    },
    '6months': {
      count: rentalBehavior.value?.rentalApplicationCountLast6Months,
      institutions: rentalBehavior.value?.rentalApplicationInstitutionsLast6Months,
      weekend: rentalBehavior.value?.rentalApplicationCountLast6MonthsWeekend,
      night: rentalBehavior.value?.rentalApplicationCountLast6MonthsNight
    },
    '12months': {
      count: rentalBehavior.value?.rentalApplicationCountLast12Months,
      institutions: rentalBehavior.value?.rentalApplicationInstitutionsLast12Months,
      weekend: rentalBehavior.value?.rentalApplicationCountLast12MonthsWeekend,
      night: rentalBehavior.value?.rentalApplicationCountLast12MonthsNight
    }
  }
  return dataMap[tabKey] || {}
}

// 时间分布图表配置
const timeDistributionChartOption = computed(() => {
  const periods = ['近3天', '近7天', '近14天', '近1个月', '近3个月', '近6个月', '近12个月']

  const countData = [
    getApplicationCount(rentalBehavior.value?.rentalApplicationCountLast3Days),
    getApplicationCount(rentalBehavior.value?.rentalApplicationCountLast7Days),
    getApplicationCount(rentalBehavior.value?.rentalApplicationCountLast14Days),
    getApplicationCount(rentalBehavior.value?.rentalApplicationCountLast1Month),
    getApplicationCount(rentalBehavior.value?.rentalApplicationCountLast3Months),
    getApplicationCount(rentalBehavior.value?.rentalApplicationCountLast6Months),
    getApplicationCount(rentalBehavior.value?.rentalApplicationCountLast12Months)
  ]

  const institutionData = [
    getInstitutionCount(rentalBehavior.value?.rentalApplicationInstitutionsLast3Days),
    getInstitutionCount(rentalBehavior.value?.rentalApplicationInstitutionsLast7Days),
    getInstitutionCount(rentalBehavior.value?.rentalApplicationInstitutionsLast14Days),
    getInstitutionCount(rentalBehavior.value?.rentalApplicationInstitutionsLast1Month),
    getInstitutionCount(rentalBehavior.value?.rentalApplicationInstitutionsLast3Months),
    getInstitutionCount(rentalBehavior.value?.rentalApplicationInstitutionsLast6Months),
    getInstitutionCount(rentalBehavior.value?.rentalApplicationInstitutionsLast12Months)
  ]

  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (params) {
        let result = params[0].name + '<br/>'
        params.forEach(item => {
          result += `${item.seriesName}: ${item.value}<br/>`
        })
        return result
      }
    },
    legend: {
      data: ['申请次数', '申请机构数'],
      top: '5%',
      textStyle: {
        fontSize: 12
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '20%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: periods,
      axisLabel: {
        fontSize: 10,
        color: '#6b7280',
        rotate: 45
      },
      axisLine: {
        lineStyle: {
          color: '#e5e7eb'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        fontSize: 11,
        color: '#6b7280'
      },
      splitLine: {
        lineStyle: {
          color: '#f3f4f6'
        }
      }
    },
    series: [
      {
        name: '申请次数',
        type: 'bar',
        data: countData,
        barWidth: '25%',
        barMinHeight: 3,
        itemStyle: {
          color: '#2B79EE',
          borderRadius: [4, 4, 0, 0]
        },
        emphasis: {
          itemStyle: {
            color: '#1e5bb8'
          }
        }
      },
      {
        name: '申请机构数',
        type: 'bar',
        data: institutionData,
        barWidth: '25%',
        barMinHeight: 3,
        itemStyle: {
          color: '#61D2F4',
          borderRadius: [4, 4, 0, 0]
        },
        emphasis: {
          itemStyle: {
            color: '#4bb8d4'
          }
        }
      }
    ]
  }
})

// 特殊时间段活动对比图表配置
const specialTimeChartOption = computed(() => {
  const periods = ['近3天', '近7天', '近14天', '近1个月', '近3个月', '近6个月', '近12个月']

  const weekendData = [
    getApplicationCount(rentalBehavior.value?.rentalApplicationCountLast3DaysWeekend),
    getApplicationCount(rentalBehavior.value?.rentalApplicationCountLast7DaysWeekend),
    getApplicationCount(rentalBehavior.value?.rentalApplicationCountLast14DaysWeekend),
    getApplicationCount(rentalBehavior.value?.rentalApplicationCountLast1MonthWeekend),
    getApplicationCount(rentalBehavior.value?.rentalApplicationCountLast3MonthsWeekend),
    getApplicationCount(rentalBehavior.value?.rentalApplicationCountLast6MonthsWeekend),
    getApplicationCount(rentalBehavior.value?.rentalApplicationCountLast12MonthsWeekend)
  ]

  const nightData = [
    getApplicationCount(rentalBehavior.value?.rentalApplicationCountLast3DaysNight),
    getApplicationCount(rentalBehavior.value?.rentalApplicationCountLast7DaysNight),
    getApplicationCount(rentalBehavior.value?.rentalApplicationCountLast14DaysNight),
    getApplicationCount(rentalBehavior.value?.rentalApplicationCountLast1MonthNight),
    getApplicationCount(rentalBehavior.value?.rentalApplicationCountLast3MonthsNight),
    getApplicationCount(rentalBehavior.value?.rentalApplicationCountLast6MonthsNight),
    getApplicationCount(rentalBehavior.value?.rentalApplicationCountLast12MonthsNight)
  ]

  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (params) {
        let result = params[0].name + '<br/>'
        params.forEach(item => {
          result += `${item.seriesName}: ${item.value} 次<br/>`
        })
        return result
      }
    },
    legend: {
      data: ['周末申请', '夜间申请'],
      top: '5%',
      textStyle: {
        fontSize: 12
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '20%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: periods,
      axisLabel: {
        fontSize: 10,
        color: '#6b7280',
        rotate: 45
      },
      axisLine: {
        lineStyle: {
          color: '#e5e7eb'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        fontSize: 11,
        color: '#6b7280',
        formatter: '{value} 次'
      },
      splitLine: {
        lineStyle: {
          color: '#f3f4f6'
        }
      }
    },
    series: [
      {
        name: '周末申请',
        type: 'bar',
        data: weekendData,
        barWidth: '25%',
        barMinHeight: 3,
        itemStyle: {
          color: '#2B79EE',
          borderRadius: [4, 4, 0, 0]
        },
        emphasis: {
          itemStyle: {
            color: '#1e5bb8'
          }
        }
      },
      {
        name: '夜间申请',
        type: 'bar',
        data: nightData,
        barWidth: '25%',
        barMinHeight: 3,
        itemStyle: {
          color: '#61D2F4',
          borderRadius: [4, 4, 0, 0]
        },
        emphasis: {
          itemStyle: {
            color: '#4bb8d4'
          }
        }
      }
    ]
  }
})

// 计算风险评分（0-100分，分数越高越安全）
const riskScore = computed(() => {
  const data3Days = parseApplicationData(rentalBehavior.value?.rentalApplicationCountLast3Days)
  const data7Days = parseApplicationData(rentalBehavior.value?.rentalApplicationCountLast7Days)
  const data1Month = parseApplicationData(rentalBehavior.value?.rentalApplicationCountLast1Month)

  // 根据申请次数计算风险评分
  // 3天内超过2次，7天内超过5次，或1个月内超过10次视为高风险
  if (data3Days.count > 2 || data7Days.count > 5 || data1Month.count > 10) {
    return 20; // 高风险
  }

  // 中等频率申请
  if (data3Days.count > 1 || data7Days.count > 3 || data1Month.count > 5) {
    return 60; // 中等风险
  }

  // 低频率申请
  if (data3Days.count > 0 || data7Days.count > 0 || data1Month.count > 0) {
    return 80; // 低风险
  }

  // 无申请
  return 100; // 最安全
});

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

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

<style lang="scss" scoped>
.border-b:last-child {
  border-bottom: none;
}

.chart-container {
  width: 100%;
  height: 100%;
}

.rental-behavior-section :deep(.van-tabs) {
  border: unset !important;
}

/* 重置 van-tabs 样式，覆盖外层 StyledTabs 的影响 */
.rental-behavior-section :deep(.van-tabs__wrap) {
  height: 32px !important;
  background-color: transparent !important;
  padding: 0 !important;
  border-bottom: 1px solid #DDDDDD !important;
}

.rental-behavior-section :deep(.van-tabs__nav) {
  background-color: transparent !important;
  gap: 0 !important;
  height: 32px !important;
  border: unset !important;
}

.rental-behavior-section :deep(.van-tabs__nav--card) {
  border: unset !important;
}

.rental-behavior-section :deep(.van-tab) {
  color: #999999 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  border-right: unset !important;
  background-color: transparent !important;
  border-radius: unset !important;
  max-width: 80px !important;
}

.rental-behavior-section :deep(.van-tab--card) {
  color: #999999 !important;
  border-right: unset !important;
  background-color: transparent !important;
  border-radius: unset !important;
}

.rental-behavior-section :deep(.van-tab--active) {
  color: var(--van-theme-primary) !important;
  background-color: unset !important;
}

.rental-behavior-section :deep(.van-tabs__line) {
  height: 4px !important;
  border-radius: 1px !important;
  background-color: var(--van-theme-primary) !important;
  width: 20px;
  border-radius: 14px;
}
</style>