<!-- src/components/MiniBarChart.vue -->
<script lang="ts" setup>
import { ref, onMounted, watch, onUnmounted, markRaw } from 'vue'
import * as echarts from 'echarts/core'
import { BarChart, type BarSeriesOption } from 'echarts/charts'
import {
  GridComponent,
  type GridComponentOption,
  TooltipComponent,
  type TooltipComponentOption
} from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'

// 注册必须的组件
echarts.use([BarChart, GridComponent, TooltipComponent, CanvasRenderer])

type EChartsOption = echarts.ComposeOption<
  BarSeriesOption | GridComponentOption | TooltipComponentOption
>

export interface ChartDataItem {
  label: string
  num: number
}

const props = defineProps<{
  items: ChartDataItem[]
  max?: number // 变成可选，如果不传自动计算
}>()

const chartRef = ref<HTMLElement>()
let chartInstance: echarts.ECharts | null = null

// 预定义5种渐变色方案 (Tailwind 风格)
// 顺序：蓝、绿、橙、红、紫
const colorPalette = [
  // Blue
  [
    { offset: 0, color: 'rgb(96, 165, 250)' }, // Blue 400
    { offset: 1, color: 'rgb(59, 130, 246)' } // Blue 500
  ],
  // Emerald (Green)
  [
    { offset: 0, color: 'rgb(52, 211, 153)' }, // Emerald 400
    { offset: 1, color: 'rgb(16, 185, 129)' } // Emerald 500
  ],
  // Orange
  [
    { offset: 0, color: 'rgb(251, 146, 60)' }, // Orange 400
    { offset: 1, color: 'rgb(249, 115, 22)' } // Orange 500
  ],
  // Rose (Red)
  [
    { offset: 0, color: 'rgb(251, 113, 133)' }, // Rose 400
    { offset: 1, color: 'rgb(244, 63, 94)' } // Rose 500
  ],
  // Purple
  [
    { offset: 0, color: 'rgb(192, 132, 252)' }, // Purple 400
    { offset: 1, color: 'rgb(168, 85, 247)' } // Purple 500
  ]
]

const initChart = () => {
  if (!chartRef.value) return
  chartInstance = markRaw(echarts.init(chartRef.value))
  updateChart()
  window.addEventListener('resize', handleResize)
}

const handleResize = () => {
  chartInstance?.resize()
}

const updateChart = () => {
  if (!chartInstance) return

  // 1. 提取 X 轴 Label
  const xAxisData = props.items.map((item) => item.label)

  // 2. 构建 Series Data 并分配颜色
  const seriesData = props.items.map((item, index) => {
    // 循环取色：如果 index 超过 4，则回到 0
    const colorStops = colorPalette[index % colorPalette.length]

    return {
      value: item.num,
      name: item.label,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, colorStops),
        borderRadius: [4, 4, 4, 4] // 顶部圆角
      }
    }
  })

  const option: EChartsOption = {
    tooltip: {
      // ... 保持原有配置
      trigger: 'item',
      confine: true,
      backgroundColor: 'rgba(50,50,50,0.9)',
      borderColor: '#333',
      textStyle: { color: '#fff', fontSize: 12 }
    },
    grid: {
      // 核心修改 1: 关闭 containLabel，不再让文字自动挤占空间
      containLabel: false,

      // 核心修改 2: 固定上、下边距 (建议用像素 px 而不是百分比，控制更精准)
      top: 30, // 留给顶部数值 label 的空间
      bottom: 35, // 留给底部 X 轴文字的空间 (大约能容纳 2 行文字)

      // 核心修改 3: 调整左右，因为关闭了 containLabel，需要手动留一点缝隙防止柱子边缘被切
      left: '2%',
      right: '5%'
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: {
        color: '#6b7280',
        fontSize: 10,
        interval: 0, // 强制显示所有标签

        // 核心修改 4: 控制文字换行配置
        width: 40, // 限制每个标签的最大宽度 (根据你的列宽调整，比如 40px)
        overflow: 'break', // 超出宽度强制换行 (break: 单词打断, truncate: 省略号)
        lineHeight: 13, // 设置行高，防止换行后文字重叠
        margin: 8 // 文字距离 x 轴（柱子底部）的距离
      }
    },
    yAxis: {
      type: 'log', // 注意：log 轴在数值为 0 或 1 时可能会有显示问题，确保数据处理过
      show: false,
      min: 1 // log轴通常建议设置 min 避免 0 的报错
    },
    series: [
      {
        type: 'bar',
        barWidth: '35%',
        // ... 保持原有配置
        label: {
          show: true,
          position: 'top',
          fontSize: 12,
          fontWeight: 'bold',
          color: '#374151',
          formatter: (params) => {
            // 防止 log 轴把 0 显示出来的特殊处理，如果需要的话
            return params.value ? params.value.toString() : ''
          }
        },
        data: seriesData,
        animationDuration: 1000,
        animationEasing: 'cubicOut'
      }
    ]
  }

  // const option: EChartsOption = {
  //   tooltip: {
  //     trigger: 'item',
  //     confine: true,
  //     backgroundColor: 'rgba(50,50,50,0.9)',
  //     borderColor: '#333',
  //     textStyle: { color: '#fff', fontSize: 12 }
  //   },
  //   grid: {
  //     top: '15%', // 留出上方数值显示空间
  //     bottom: '5%', // 调整底部文字空间
  //     left: '-20%',
  //     right: '0%',
  //     containLabel: true // 改为 true 自动计算 Label 空间，防止被切
  //   },
  //   xAxis: {
  //     type: 'category',
  //     data: xAxisData,
  //     axisLine: { show: false },
  //     axisTick: { show: false },
  //     axisLabel: {
  //       color: '#6b7280',
  //       fontSize: 10, // 字体稍大一点
  //       interval: 0 // 强制显示所有标签
  //       // overflow: 'break' // 文字过长换行
  //       // formatter: function (value: string) {
  //       //   if (value.length > 3) {
  //       //     const mid = Math.ceil(value.length / 2)
  //       //     return value.slice(0, mid) + '\n' + value.slice(mid)
  //       //   }
  //       //   return value
  //       // }
  //     }
  //   },
  //   yAxis: {
  //     type: 'log',
  //     show: false
  //     // max: yAxisMax as number
  //   },
  //   series: [
  //     {
  //       type: 'bar',
  //       barWidth: '35%', // 稍微变窄一点，适应5个柱子的情况
  //       label: {
  //         show: true,
  //         position: 'top',
  //         fontSize: 12,
  //         fontWeight: 'bold',
  //         color: '#374151' // 数值颜色
  //       },
  //       data: seriesData,
  //       animationDuration: 1000,
  //       animationEasing: 'cubicOut'
  //     }
  //   ]
  // }

  chartInstance.setOption(option)
}

// 监听 items 数组的变化
watch(
  () => props.items,
  () => {
    updateChart()
  },
  { deep: true } // 深度监听数组内部对象变化
)

onMounted(() => {
  setTimeout(initChart, 50)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  chartInstance?.dispose()
})
</script>

<template>
  <div ref="chartRef" class="w-full h-full"></div>
</template>
