<template>
    <div class="card multiple-overdue-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/yqfx.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="text-sm text-gray-500 px-4 mb-4">注：行为推断得到</div>

                <!-- 逾期概览 -->
                <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]">
                                {{ getValue(data.overduePlatforms?.['1week']?.total) }}
                            </div>
                            <div class="text-sm text-gray-600 mt-1">1周内逾期平台数</div>
                        </div>
                        <div class="bg-blue-50 rounded-lg p-4 text-center border border-[#2B79EE8F]">
                            <div class="text-2xl font-bold text-[#1FBE5D]">
                                {{ getValue(data.overdueCounts?.['1week']?.total) }}
                            </div>
                            <div class="text-sm text-gray-600 mt-1">1周内逾期次数</div>
                        </div>
                    </div>
                </div>

                <!-- 逾期平台数时间分布图表 -->
                <div class="mb-6">
                    <LTitle title="逾期平台数时间分布" />
                    <div class="mb-4 h-64">
                        <v-chart class="chart-container" :option="overduePlatformChartOption" autoresize />
                    </div>
                </div>

                <!-- 逾期平台数统计 -->
                <div class="mb-6">
                    <LTitle title="逾期平台数统计" />
                    <div class="bg-white px-4 py-2">
                        <van-tabs v-model:active="activeTab1" color="var(--color-primary)">
                            <van-tab v-for="(tab, index) in periodTabs" :key="tab.key" :title="tab.name" width="100px">
                                <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="text-[#333333] font-bold">{{
                                                getValue(data.overduePlatforms?.[tab.key]?.total) }} 家</span>
                                        </div>
                                        <div class="flex justify-between items-center text-sm">
                                            <span class="text-gray-600">银行</span>
                                            <span class="text-[#333333] font-bold">{{
                                                getValue(data.overduePlatforms?.[tab.key]?.bank) }} 家</span>
                                        </div>
                                        <div class="flex justify-between items-center text-sm">
                                            <span class="text-gray-600">保险</span>
                                            <span class="text-[#333333] font-bold">{{
                                                getValue(data.overduePlatforms?.[tab.key]?.insurance) }} 家</span>
                                        </div>
                                        <div class="flex justify-between items-center text-sm">
                                            <span class="text-gray-600">证券</span>
                                            <span class="text-[#333333] font-bold">{{
                                                getValue(data.overduePlatforms?.[tab.key]?.securities) }} 家</span>
                                        </div>
                                        <div class="flex justify-between items-center text-sm">
                                            <span class="text-gray-600">信托</span>
                                            <span class="text-[#333333] font-bold">{{
                                                getValue(data.overduePlatforms?.[tab.key]?.trust) }} 家</span>
                                        </div>
                                        <div class="flex justify-between items-center text-sm">
                                            <span class="text-gray-600">资产管理</span>
                                            <span class="text-[#333333] font-bold">{{
                                                getValue(data.overduePlatforms?.[tab.key]?.assetManagement) }} 家</span>
                                        </div>
                                        <div class="flex justify-between items-center text-sm">
                                            <span class="text-gray-600">持牌消金</span>
                                            <span class="text-[#333333] font-bold">{{
                                                getValue(data.overduePlatforms?.[tab.key]?.licensedConsumer) }} 家</span>
                                        </div>
                                        <div class="flex justify-between items-center text-sm">
                                            <span class="text-gray-600">互金</span>
                                            <span class="text-[#333333] font-bold">{{
                                                getValue(data.overduePlatforms?.[tab.key]?.fintech) }} 家</span>
                                        </div>
                                        <div class="flex justify-between items-center text-sm">
                                            <span class="text-gray-600">贷款超市</span>
                                            <span class="text-[#333333] font-bold">{{
                                                getValue(data.overduePlatforms?.[tab.key]?.loanSupermarket) }} 家</span>
                                        </div>
                                        <div class="flex justify-between items-center text-sm">
                                            <span class="text-gray-600">数据风控</span>
                                            <span class="text-[#333333] font-bold">{{
                                                getValue(data.overduePlatforms?.[tab.key]?.dataRisk) }} 家</span>
                                        </div>
                                        <div class="flex justify-between items-center text-sm">
                                            <span class="text-gray-600">其他</span>
                                            <span class="text-[#333333] font-bold">{{
                                                getValue(data.overduePlatforms?.[tab.key]?.other) }} 家</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 periodTabs" :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="text-[#333333] font-bold">{{
                                                getValue(data.overdueCounts?.[tab.key]?.total) }} 次</span>
                                        </div>
                                        <div class="flex justify-between items-center text-sm">
                                            <span class="text-gray-600">银行</span>
                                            <span class="text-[#333333] font-bold">{{
                                                getValue(data.overdueCounts?.[tab.key]?.bank) }} 次</span>
                                        </div>
                                        <div class="flex justify-between items-center text-sm">
                                            <span class="text-gray-600">保险</span>
                                            <span class="text-[#333333] font-bold">{{
                                                getValue(data.overdueCounts?.[tab.key]?.insurance) }} 次</span>
                                        </div>
                                        <div class="flex justify-between items-center text-sm">
                                            <span class="text-gray-600">证券</span>
                                            <span class="text-[#333333] font-bold">{{
                                                getValue(data.overdueCounts?.[tab.key]?.securities) }} 次</span>
                                        </div>
                                        <div class="flex justify-between items-center text-sm">
                                            <span class="text-gray-600">信托</span>
                                            <span class="text-[#333333] font-bold">{{
                                                getValue(data.overdueCounts?.[tab.key]?.trust) }} 次</span>
                                        </div>
                                        <div class="flex justify-between items-center text-sm">
                                            <span class="text-gray-600">资产管理</span>
                                            <span class="text-[#333333] font-bold">{{
                                                getValue(data.overdueCounts?.[tab.key]?.assetManagement) }} 次</span>
                                        </div>
                                        <div class="flex justify-between items-center text-sm">
                                            <span class="text-gray-600">持牌消金</span>
                                            <span class="text-[#333333] font-bold">{{
                                                getValue(data.overdueCounts?.[tab.key]?.licensedConsumer) }} 次</span>
                                        </div>
                                        <div class="flex justify-between items-center text-sm">
                                            <span class="text-gray-600">互金</span>
                                            <span class="text-[#333333] font-bold">{{
                                                getValue(data.overdueCounts?.[tab.key]?.fintech) }} 次</span>
                                        </div>
                                        <div class="flex justify-between items-center text-sm">
                                            <span class="text-gray-600">贷款超市</span>
                                            <span class="text-[#333333] font-bold">{{
                                                getValue(data.overdueCounts?.[tab.key]?.loanSupermarket) }} 次</span>
                                        </div>
                                        <div class="flex justify-between items-center text-sm">
                                            <span class="text-gray-600">数据风控</span>
                                            <span class="text-[#333333] font-bold">{{
                                                getValue(data.overdueCounts?.[tab.key]?.dataRisk) }} 次</span>
                                        </div>
                                        <div class="flex justify-between items-center text-sm">
                                            <span class="text-gray-600">其他</span>
                                            <span class="text-[#333333] font-bold">{{
                                                getValue(data.overdueCounts?.[tab.key]?.other) }} 次</span>
                                        </div>
                                    </div>
                                </div>
                            </van-tab>
                        </van-tabs>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import LTitle from '@/components/LTitle.vue'
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'

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

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

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

// 时间段 tab 数据
const periodTabs = [
    { name: '1周内', key: '1week' },
    { name: '1个月内', key: '1month' },
    { name: '3个月内', key: '3month' },
    { name: '6个月内', key: '6month' },
    { name: '12个月内', key: '12month' },
    { name: '一年以前', key: 'over1year' },
]

const getValue = (value) => {
    if (value === undefined || value === null || value === '') return '-'
    return value
}

// 逾期平台数图表配置
const overduePlatformChartOption = computed(() => {
    const periods = ['1周内', '1个月内', '3个月内', '6个月内', '12个月内', '一年以前']
    const keys = ['1week', '1month', '3month', '6month', '12month', 'over1year']

    const totalData = keys.map(key => getValue(props.data?.overduePlatforms?.[key]?.total) || 0)
    const bankData = keys.map(key => getValue(props.data?.overduePlatforms?.[key]?.bank) || 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: ['总计', '银行'],
            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',
                rotate: 45
            },
            axisLine: {
                lineStyle: {
                    color: '#e5e7eb'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                fontSize: 12,
                color: '#6b7280',
                formatter: '{value} 家'
            },
            splitLine: {
                lineStyle: {
                    color: '#f3f4f6'
                }
            }
        },
        series: [
            {
                name: '总计',
                type: 'bar',
                data: totalData,
                barWidth: '25%',
                barMinHeight: 3,
                itemStyle: {
                    color: '#2B79EE',
                    borderRadius: [4, 4, 0, 0]
                },
                emphasis: {
                    itemStyle: {
                        color: '#1e5bb8'
                    }
                }
            },
            {
                name: '银行',
                type: 'bar',
                data: bankData,
                barWidth: '25%',
                barMinHeight: 3,
                itemStyle: {
                    color: '#61D2F4',
                    borderRadius: [4, 4, 0, 0]
                },
                emphasis: {
                    itemStyle: {
                        color: '#4bb8d4'
                    }
                }
            }
        ]
    }
})
</script>

<style lang="scss" scoped>
.card {
    background: #ffffff;
}

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

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

.multiple-overdue-section :deep(.van-tabs__wrap) {
    height: 32px !important;
    background-color: transparent !important;
    padding: 0 !important;
    border-bottom: 1px solid #DDDDDD !important;
}

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

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

.multiple-overdue-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: 100px !important;
}

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

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

.multiple-overdue-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>
