<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">
                    <div class="text-sm font-medium text-gray-700 mb-2 text-center">贷款行为分</div>
                    <div class="h-40">
                        <v-chart class="chart-container" :option="behaviorScoreGaugeOption" autoresize />
                    </div>
                </div>

                <!-- 贷款行为置信度 -->
                <div class="rounded-lg border border-[#2B79EE8F] bg-[#2B79EE1A] p-4">
                    <div class="text-sm font-medium text-gray-700 mb-2 text-center">贷款行为置信度</div>
                    <div class="h-40">
                        <v-chart class="chart-container" :option="behaviorConfidenceGaugeOption" autoresize />
                    </div>
                </div>
            </div>

            <!-- 贷款笔数统计 -->
            <LTitle title="贷款笔数统计" />
            <div class="mt-3 mb-6">
                <!-- 贷款笔数分布图 -->
                <div class="mb-4">
                    <div class="h-64 mt-3">
                        <v-chart class="chart-container" :option="loanTrendChartOption" autoresize />
                    </div>
                </div>

                <van-tabs v-model:active="activeLoanTab" color="var(--color-primary)" swipeable class="loan-tabs" swipe-threshold="4">
                    <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="mb-4">
                    <div class="h-64 mt-3">
                        <v-chart class="chart-container" :option="overdueComparisonChartOption" autoresize />
                    </div>
                </div>

                <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-sm 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-sm 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-sm 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-sm 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-sm 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-sm 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="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>
            </div>

            <!-- 订单统计 -->
            <LTitle title="订单统计" />
            <div class="mt-3 mb-6">
                <div class="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.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>
            </div>

            <!-- 贷款金额分布 -->
            <LTitle title="贷款金额分布（近12个月）" />
            <div class="mt-3 mb-6">
                <!-- 柱状图 -->
                <div class="mb-4">
                    <div class="h-64">
                        <v-chart class="chart-container" :option="amountDistributionChartOption" autoresize />
                    </div>
                </div>
                <!-- 表格 -->
                <div class="mb-4 mt-4 border border-gray-200 rounded-lg overflow-hidden mx-4">
                    <!-- 表头 -->
                    <div class="bg-[#5d7eeb] text-white">
                        <div class="grid grid-cols-2 text-sm">
                            <div class="py-3 px-4 text-left font-semibold border-r border-white whitespace-nowrap">金额区间</div>
                            <div class="py-3 px-4 text-center font-semibold whitespace-nowrap">贷款笔数</div>
                        </div>
                    </div>

                    <!-- 数据行 -->
                    <div class="bg-white">
                        <!-- 1k及以下 -->
                        <div class="grid grid-cols-2 border-b border-gray-200 text-sm">
                            <div class="py-3 px-4 font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">1k及以下</div>
                            <div class="py-3 px-4 text-center text-[#333333] font-semibold whitespace-nowrap">
                                {{ getValue(data.B22170012, '0') }} 笔
                            </div>
                        </div>

                        <!-- 1k-3k -->
                        <div class="grid grid-cols-2 border-b border-gray-200 text-sm">
                            <div class="py-3 px-4 font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">1k-3k</div>
                            <div class="py-3 px-4 text-center text-[#333333] font-semibold whitespace-nowrap">
                                {{ getValue(data.B22170013, '0') }} 笔
                            </div>
                        </div>

                        <!-- 3k-10k -->
                        <div class="grid grid-cols-2 border-b border-gray-200 text-sm">
                            <div class="py-3 px-4 font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">3k-10k</div>
                            <div class="py-3 px-4 text-center text-[#333333] font-semibold whitespace-nowrap">
                                {{ getValue(data.B22170014, '0') }} 笔
                            </div>
                        </div>

                        <!-- 1w以上 -->
                        <div class="grid grid-cols-2 text-sm">
                            <div class="py-3 px-4 font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">1w以上</div>
                            <div class="py-3 px-4 text-center text-[#333333] font-semibold whitespace-nowrap">
                                {{ getValue(data.B22170015, '0') }} 笔
                            </div>
                        </div>
                    </div>
                </div>
            </div>

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

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

<script setup>
import { ref, computed } from 'vue'
import LTitle from '@/components/LTitle.vue'
import Remark from '@/components/Remark.vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart, GaugeChart } from 'echarts/charts'
import {
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    GridComponent
} from 'echarts/components'
import { formatAmountRange, formatDayRange, formatTime, formatConfidence, getValue } from '../utils/formatUtils'

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

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

const activeLoanTab = ref(0)

// 贷款行为分仪表盘配置（1-1000分，分数越高风险越大）
const behaviorScoreGaugeOption = computed(() => {
    const score = parseInt(getValue(props.data.B22170001, '0')) || 0
    // 转换为0-100的百分比（用于仪表盘显示）
    const percentage = (score / 1000) * 100

    // 根据分数确定颜色（分数越高风险越大）
    let color = '#52c41a' // 绿色 - 低风险
    if (score > 800) {
        color = '#f5222d' // 红色 - 高风险
    } else if (score > 600) {
        color = '#fa8c16' // 橙色 - 中高风险
    } else if (score > 400) {
        color = '#faad14' // 黄色 - 中等风险
    }

    return {
        series: [
            {
                type: 'gauge',
                startAngle: 180,
                endAngle: 0,
                min: 0,
                max: 100,
                radius: '75%',
                center: ['50%', '75%'],
                itemStyle: {
                    color: color,
                    shadowBlur: 4,
                    shadowColor: color,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                },
                progress: {
                    show: true,
                    width: 14,
                    roundCap: true,
                    clip: false,
                },
                axisLine: {
                    roundCap: true,
                    lineStyle: {
                        width: 14,
                        color: [
                            [percentage / 100, color],
                            [1, '#e5e7eb']
                        ]
                    }
                },
                axisTick: {
                    show: true,
                    distance: -28,
                    length: 6,
                    splitNumber: 10,
                    lineStyle: {
                        width: 1.5,
                        color: '#999',
                        opacity: 0.5
                    }
                },
                splitLine: {
                    show: true,
                    distance: -34,
                    length: 10,
                    splitNumber: 5,
                    lineStyle: {
                        width: 2,
                        color: '#999',
                        opacity: 0.7
                    }
                },
                axisLabel: {
                    show: true,
                    distance: -18,
                    fontSize: 12,
                    color: '#666',
                    formatter: function (value) {
                        if (value === 0) return '0'
                        if (value === 25) return '250'
                        if (value === 50) return '500'
                        if (value === 75) return '750'
                        if (value === 100) return '1000'
                        return ''
                    }
                },
                pointer: {
                    show: false
                },
                detail: {
                    valueAnimation: true,
                    fontSize: 24,
                    fontWeight: 'bold',
                    color: color,
                    offsetCenter: [0, '-5%'],
                    formatter: () => `${score}`,
                    rich: {
                        value: {
                            fontSize: 24,
                            fontWeight: 'bold',
                            color: color,
                            lineHeight: 28
                        },
                        unit: {
                            fontSize: 16,
                            color: '#666',
                            padding: [0, 0, 0, 4]
                        }
                    }
                },
                data: [
                    {
                        value: percentage
                    }
                ],
                title: {
                    show: true,
                    fontSize: 13,
                    color: '#666',
                    offsetCenter: [0, '25%'],
                    formatter: () => '贷款行为分'
                }
            }
        ]
    }
})

// 贷款行为置信度仪表盘配置（50-100）
const behaviorConfidenceGaugeOption = computed(() => {
    const confidence = parseInt(getValue(props.data.B22170051, '0')) || 0
    // 转换为0-100的百分比（置信度范围是50-100，所以需要映射）
    const percentage = confidence >= 50 ? ((confidence - 50) / 50) * 100 : 0

    // 根据置信度确定颜色
    let color = '#52c41a' // 绿色 - 高置信度
    if (confidence < 60) {
        color = '#faad14' // 黄色 - 中等置信度
    } else if (confidence < 70) {
        color = '#fa8c16' // 橙色 - 较低置信度
    }

    return {
        series: [
            {
                type: 'gauge',
                startAngle: 180,
                endAngle: 0,
                min: 0,
                max: 100,
                radius: '85%',
                center: ['50%', '75%'],
                itemStyle: {
                    color: color,
                    shadowBlur: 8,
                    shadowColor: color,
                },
                progress: {
                    show: true,
                    width: 18,
                    roundCap: true,
                },
                axisLine: {
                    roundCap: true,
                    lineStyle: {
                        width: 18,
                        color: [
                            [percentage / 100, color],
                            [1, '#e5e7eb']
                        ]
                    }
                },
                axisTick: {
                    show: true,
                    distance: -25,
                    length: 6,
                    splitNumber: 5,
                    lineStyle: {
                        width: 2,
                        color: '#999',
                        opacity: 0.5
                    }
                },
                splitLine: {
                    show: true,
                    distance: -30,
                    length: 10,
                    splitNumber: 4,
                    lineStyle: {
                        width: 2,
                        color: '#999',
                        opacity: 0.7
                    }
                },
                axisLabel: {
                    show: true,
                    distance: -15,
                    fontSize: 12,
                    color: '#666',
                    formatter: function (value) {
                        // 将百分比映射回置信度值
                        const confValue = Math.round(50 + (value / 100) * 50)
                        if (value === 0) return '50'
                        if (value === 25) return '62'
                        if (value === 50) return '75'
                        if (value === 75) return '87'
                        if (value === 100) return '100'
                        return ''
                    }
                },
                pointer: {
                    show: false
                },
                detail: {
                    valueAnimation: true,
                    fontSize: 24,
                    fontWeight: 'bold',
                    color: color,
                    offsetCenter: [0, '-5%'],
                    formatter: () => `${confidence}%`,
                    rich: {
                        value: {
                            fontSize: 24,
                            fontWeight: 'bold',
                            color: color,
                            lineHeight: 28
                        }
                    }
                },
                data: [
                    {
                        value: percentage
                    }
                ],
                title: {
                    show: true,
                    fontSize: 14,
                    color: '#666',
                    offsetCenter: [0, '25%'],
                    formatter: () => '贷款行为置信度'
                }
            }
        ]
    }
})

// 贷款笔数趋势图配置
const loanTrendChartOption = computed(() => {
    const periods = ['近1个月', '近3个月', '近6个月', '近12个月', '近24个月']
    const loanData = [
        parseInt(getValue(props.data.B22170002, '0')) || 0,
        parseInt(getValue(props.data.B22170003, '0')) || 0,
        parseInt(getValue(props.data.B22170004, '0')) || 0,
        parseInt(getValue(props.data.B22170005, '0')) || 0,
        parseInt(getValue(props.data.B22170006, '0')) || 0
    ]

    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
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '10%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: periods,
            axisLabel: {
                fontSize: 12,
                color: '#6b7280',
                rotate: 15
            },
            axisLine: {
                lineStyle: {
                    color: '#e5e7eb'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                fontSize: 12,
                color: '#6b7280',
                formatter: '{value} 笔'
            },
            splitLine: {
                lineStyle: {
                    color: '#f3f4f6'
                }
            }
        },
        series: [
            {
                name: '贷款笔数',
                type: 'bar',
                data: loanData,
                barWidth: '40%',
                itemStyle: {
                    color: '#2B79EE',
                    borderRadius: [4, 4, 0, 0]
                },
                emphasis: {
                    itemStyle: {
                        color: '#1e5bb8'
                    }
                },
                label: {
                    show: true,
                    position: 'top',
                    fontSize: 12,
                    color: '#333'
                }
            }
        ]
    }
})

// 逾期对比图配置
const overdueComparisonChartOption = computed(() => {
    const periods = ['近6个月', '近12个月', '近24个月']
    const m0Data = [
        parseInt(getValue(props.data.B22170025, '0')) || 0,
        parseInt(getValue(props.data.B22170026, '0')) || 0,
        parseInt(getValue(props.data.B22170027, '0')) || 0
    ]
    const m1Data = [
        parseInt(getValue(props.data.B22170028, '0')) || 0,
        parseInt(getValue(props.data.B22170029, '0')) || 0,
        parseInt(getValue(props.data.B22170030, '0')) || 0
    ]

    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: ['M0+逾期', 'M1+逾期'],
            top: '5%',
            textStyle: {
                fontSize: 12
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '20%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: periods,
            axisLabel: {
                fontSize: 12,
                color: '#6b7280'
            },
            axisLine: {
                lineStyle: {
                    color: '#e5e7eb'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                fontSize: 12,
                color: '#6b7280',
                formatter: '{value} 笔'
            },
            splitLine: {
                lineStyle: {
                    color: '#f3f4f6'
                }
            }
        },
        series: [
            {
                name: 'M0+逾期',
                type: 'bar',
                data: m0Data,
                barWidth: '30%',
                itemStyle: {
                    color: '#EB3C3C',
                    borderRadius: [4, 4, 0, 0]
                },
                emphasis: {
                    itemStyle: {
                        color: '#c03030'
                    }
                },
                label: {
                    show: true,
                    position: 'top',
                    fontSize: 12,
                    color: '#333'
                }
            },
            {
                name: 'M1+逾期',
                type: 'bar',
                data: m1Data,
                barWidth: '30%',
                itemStyle: {
                    color: '#FF9800',
                    borderRadius: [4, 4, 0, 0]
                },
                emphasis: {
                    itemStyle: {
                        color: '#e68900'
                    }
                },
                label: {
                    show: true,
                    position: 'top',
                    fontSize: 12,
                    color: '#333'
                }
            }
        ]
    }
})

// 贷款金额分布柱状图配置
const amountDistributionChartOption = computed(() => {
    const categories = ['1k及以下', '1k-3k', '3k-10k', '1w以上']
    const amountData = [
        parseInt(getValue(props.data.B22170012, '0')) || 0,
        parseInt(getValue(props.data.B22170013, '0')) || 0,
        parseInt(getValue(props.data.B22170014, '0')) || 0,
        parseInt(getValue(props.data.B22170015, '0')) || 0
    ]

    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
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '10%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: categories,
            axisLabel: {
                fontSize: 12,
                color: '#6b7280'
            },
            axisLine: {
                lineStyle: {
                    color: '#e5e7eb'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                fontSize: 12,
                color: '#6b7280',
                formatter: '{value} 笔'
            },
            splitLine: {
                lineStyle: {
                    color: '#f3f4f6'
                }
            }
        },
        series: [
            {
                name: '贷款笔数',
                type: 'bar',
                data: amountData,
                barWidth: '50%',
                itemStyle: {
                    color: '#2B79EE',
                    borderRadius: [4, 4, 0, 0]
                },
                emphasis: {
                    itemStyle: {
                        color: '#1e5bb8'
                    }
                },
                label: {
                    show: true,
                    position: 'top',
                    fontSize: 12,
                    color: '#333'
                }
            }
        ]
    }
})
</script>

<style scoped>
.chart-container {
    width: 100%;
    height: 100%;
}

.behavior-report-section :deep(.van-tabs__wrap) {
    background-color: transparent !important;
}

.behavior-report-section :deep(.van-tabs__nav) {
    background-color: transparent !important;
}

.behavior-report-section :deep(.van-tab) {
    background-color: transparent !important;
}

.behavior-report-section :deep(.van-tab--card) {
    color: #999999 !important;
    background-color: transparent !important;
}

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

.behavior-report-section :deep(.van-tabs__line) {
    background-color: var(--van-theme-primary) !important;
}
</style>
