<template>
  <div class="card application-count-section">
    <div class="rounded-lg border border-gray-200 pb-2 mb-4">
      <div class="flex items-center mb-4 p-4">
        <span class="font-bold text-gray-800 text-lg">申请次数 {{ totalCount }}次</span>
      </div>
      
      <!-- 柱状图 -->
      <div class="px-4 mb-4">
        <div class="h-64">
          <v-chart class="chart-container" :option="chartOption" autoresize />
        </div>
      </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 {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import { getApplicationCounts, PERIOD_MAP } from '../utils/dataParser'

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

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

// 计算总申请次数（12个月）
const totalCount = computed(() => {
  const counts = getApplicationCounts(props.data, 'm12')
  return counts.total
})

// 图表配置
const chartOption = computed(() => {
  const periodKeys = ['d7', 'd15', 'm1', 'm3', 'm6', 'm12']
  const labels = periodKeys.map(key => PERIOD_MAP[key].label)
  
  const data = periodKeys.map(key => {
    const counts = getApplicationCounts(props.data, key)
    return counts.total
  })

  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: (params) => {
        const param = params[0]
        return `${param.name}<br/>${param.seriesName}: ${param.value}次`
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: labels,
      axisLabel: {
        fontSize: 12,
        color: '#666'
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        fontSize: 12,
        color: '#666',
        formatter: '{value}次'
      }
    },
    series: [
      {
        name: '申请次数',
        type: 'bar',
        data: data,
        itemStyle: {
          color: '#4A90E2'
        },
        label: {
          show: true,
          position: 'top',
          formatter: '{c}次',
          fontSize: 12,
          color: '#333'
        }
      }
    ]
  }
})
</script>

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

