<script setup lang="ts">
import type { BarSeriesOption, Color, ECharts, EChartsOption } from 'echarts';
import * as echarts from 'echarts';
import { onMounted, onUnmounted, ref, watch } from 'vue';

const props = defineProps({
  list: {
    type: Array,
    default: () => [], // 增加默认值，避免undefined
  },
});

// 修复1：定义符合ECharts类型的渐变颜色（推荐用官方构造函数）
const colorList: Color[] = [
  // 青蓝渐变
  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 0, color: '#00c8e6' },
    { offset: 1, color: '#007fa3' },
  ]),
  // 黄绿渐变
  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 0, color: '#a8d04d' },
    { offset: 1, color: '#6d8c20' },
  ]),
];

// 图表DOM引用
const chartRef = ref<HTMLDivElement | null>(null);
// 图表实例
let myChart: ECharts | null = null;
// 存储resize清理函数
let resizeCleanup: (() => void) | null = null;

// 初始化图表函数
function initChart() {
  if (!chartRef.value)
    return;

  // 销毁原有实例，避免内存泄漏
  if (myChart) {
    myChart.dispose();
  }

  // 创建ECharts实例
  myChart = echarts.init(chartRef.value);

  // 修复2：提前处理数据，避免undefined和类型错误
  const chartData = props.list.map((item: any, index: number) => ({
    value: Number(item.value) || 0, // 兜底为数字0
    itemStyle: {
      // 修复3：itemStyle需嵌套color字段，且循环取色时兜底（避免颜色数组越界）
      color: colorList[index % colorList.length],
    },
  }));

  // 计算y轴最大值（向上取整到百位）
  const yMax = props.list.length
    ? Math.ceil(Math.max(...props.list.map((item: any) => Number(item.value) || 0)) / 100) * 100
    : 0;

  // 图表配置项（严格匹配TS类型）
  const option: EChartsOption = {
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(255,255,255,0.9)',
      textStyle: { color: '#333' },
      formatter: '{b}: {c}',
    },
    grid: {
      left: '0%',
      right: '0%',
      bottom: '0%',
      top: '30px',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: props.list.map((item: any) => item.name || ''), // 兜底空字符串
      axisLine: { lineStyle: { color: '#416273' } },
      axisLabel: { color: '#ade6ee', fontSize: 14 },
      axisTick: { show: false },
      splitLine: { show: false },
    },
    yAxis: {
      type: 'value',
      max: yMax,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#416273',
          width: 1,
          type: 'solid',
        },
      },
      axisLabel: { color: '#ade6ee', fontSize: 12 },
      splitLine: {
        lineStyle: { color: '#77B5D533', type: 'solid' },
      },
    },
    series: [
      // 修复4：显式指定BarSeriesOption类型，消除类型歧义
      {
        type: 'bar',
        barWidth: 60,
        data: chartData, // 使用提前处理的无undefined数据
      } as BarSeriesOption,
    ],
  };

  // 设置配置项
  myChart.setOption(option);

  // 窗口大小监听函数
  const resizeHandler = () => {
    myChart?.resize();
  };
  window.addEventListener('resize', resizeHandler);

  // 存储清理函数
  resizeCleanup = () => {
    window.removeEventListener('resize', resizeHandler);
    if (myChart) {
      myChart.dispose();
      myChart = null;
    }
  };
}

// 监听list变化，重新渲染图表
watch(() => props.list, () => {
  initChart();
}, { deep: true });

// 生命周期：挂载时初始化
onMounted(() => {
  initChart();
});

// 兜底清理：组件卸载时销毁图表
onUnmounted(() => {
  if (resizeCleanup) {
    resizeCleanup();
  }
  if (myChart) {
    myChart.dispose();
    myChart = null;
  }
});
</script>

<template>
  <div class="history-cumulative-bar-chart">
    <!-- 柱状图容器 -->
    <div ref="chartRef" class="chart" />
  </div>
</template>

<style scoped>
/* 图表容器样式 */
.history-cumulative-bar-chart {
  width: 100%;
  height: 100%;
  /* 增加最小高度，避免容器为空 */
}

.chart {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
</style>
