<template>
  <div class="card rounded-lg border border-gray-200 mb-2">
    <div class="mt-4">
      <LTitle title="余额不足导致还款失败占比" />
      <div class="h-64 px-2">
        <v-chart class="chart-container" :option="chartOption" autoresize />
      </div>
    </div>
  </div>
</template>

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

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

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

const chartOption = computed(() => {
  const ratio = getInsufficientRatioByPeriod(props.data || {})
  const labels = PERIODS.map(p => p.label)
  const values = PERIODS.map(p => (ratio[p.key] || 0) * 100)

  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
      formatter(params) {
        const p = params[0]
        return `${p.name}<br/>余额不足失败占比：${p.value.toFixed(2)}%`
      }
    },
    grid: {
      left: '6%',
      right: '6%',
      top: 20,
      bottom: 0,
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: labels,
      axisLabel: {
        fontSize: 10,
        color: '#6b7280'
      },
      axisLine: {
        lineStyle: {
          color: '#e5e7eb'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        fontSize: 11,
        color: '#6b7280',
        formatter: '{value}%'
      },
      splitLine: {
        lineStyle: {
          color: '#f3f4f6'
        }
      }
    },
    series: [
      {
        name: '余额不足失败占比',
        type: 'bar',
        data: values,
        barWidth: '30%',
        barMinHeight: 3,
        itemStyle: {
          color: '#F97316',
          borderRadius: [4, 4, 0, 0]
        }
      }
    ]
  }
})
</script>

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

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


