<template>
    <div class="card rounded-lg border border-gray-200 mb-2">
        <div class="mt-4">
            <LTitle title="基础信息与近期行为比例" />

            <!-- 查贷比柱状图 -->
            <div class="h-64 px-2 mb-4">
                <v-chart class="chart-container" :option="ratioChartOption" autoresize />
            </div>

            <div class="px-4 pb-4 space-y-4 text-sm text-gray-700">
                <!-- 基础信息 -->
                <div>
                    <div class="font-semibold mb-2 text-gray-800">基础信息</div>
                    <div class="space-y-1">
                        <div class="flex justify-between">
                            <span class="text-gray-600">查得标识</span>
                            <span class="font-semibold text-[#111827]">{{ flagText }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">库有标识</span>
                            <span class="font-semibold text-[#111827]">{{ flagDbText }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">历史银行卡数</span>
                            <span class="font-semibold text-[#111827]">{{ normalizeValue(data.ppcm_history_cardnum)
                            }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">当前活跃银行卡数</span>
                            <span class="font-semibold text-[#111827]">{{ normalizeValue(data.ppcm_recent_cardnum)
                            }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">历史手机号数</span>
                            <span class="font-semibold text-[#111827]">{{ normalizeValue(data.ppcm_history_cellnum)
                            }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">当前活跃手机号数</span>
                            <span class="font-semibold text-[#111827]">{{ normalizeValue(data.ppcm_recent_cellnum)
                            }}</span>
                        </div>
                    </div>
                </div>

                <!-- 近期查贷比（查验次数 / 借款次数） -->
                <div>
                    <div class="mb-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">
                            <div v-for="(row, idx) in ratioRows" :key="row.label"
                                :class="['grid grid-cols-2 text-sm', idx < ratioRows.length - 1 ? 'border-b border-gray-200' : '']">
                                <div
                                    class="py-3 px-4 font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">
                                    {{ row.label }}</div>
                                <div class="py-3 px-4 text-center text-[#333333] font-semibold whitespace-nowrap">
                                    {{ formatRatio(row.value) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed } 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 { GridComponent, TooltipComponent } from 'echarts/components'
import { normalizeValue } from '../utils/dataParser'

use([CanvasRenderer, BarChart, GridComponent, TooltipComponent])

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

const data = computed(() => props.data || {})

const flagText = computed(() => {
    const v = data.value.flag
    if (v === 1 || v === '1') return '查得'
    if (v === 0 || v === '0') return '查无'
    return '-'
})

const flagDbText = computed(() => {
    const v = data.value.flagdb
    if (v === 1 || v === '1') return '库有'
    if (v === 0 || v === '0') return '库无'
    return '-'
})

const ratioRows = computed(() => {
    const v = data.value
    return [
        { label: '近1个月查贷比', value: normalizeValue(v.ppcm_m1_qy_rep_ratio) },
        { label: '近3个月查贷比', value: normalizeValue(v.ppcm_m3_qy_rep_ratio) },
        { label: '近6个月查贷比', value: normalizeValue(v.ppcm_m6_qy_rep_ratio) },
        { label: '近1年查贷比', value: normalizeValue(v.ppcm_m12_qy_rep_ratio) }
    ]
})

const formatRatio = (v) => {
    if (!v) return '-'
    return v.toFixed ? v.toFixed(2) : v
}
// 查贷比柱状图配置
const ratioChartOption = computed(() => {
    const labels = ratioRows.value.map(r => r.label)
    const values = ratioRows.value.map(r => r.value || 0)

    return {
        tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'shadow' },
            formatter(params) {
                const p = params[0]
                if (!p) return ''
                return `${p.name}<br/>查贷比：${formatRatio(p.value)}`
            }
        },
        grid: {
            left: '6%',
            right: '6%',
            top: 20,
            bottom: 0,
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: labels,
            axisLabel: {
                fontSize: 12,
                color: '#6b7280'
            },
            axisLine: {
                lineStyle: {
                    color: '#e5e7eb'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                fontSize: 12,
                color: '#6b7280'
            },
            splitLine: {
                lineStyle: {
                    color: '#f3f4f6'
                }
            }
        },
        series: [
            {
                name: '查贷比',
                type: 'bar',
                data: values,
                barWidth: '35%',
                barMinHeight: 3,
                itemStyle: {
                    color: '#2B79EE',
                    borderRadius: [4, 4, 0, 0]
                }
            }
        ]
    }
})
</script>

<style scoped>
.card {
    background: #ffffff;
}

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