<template>
  <div ref="cockpitEffChip" id="coreLineChart" style="width: 100%; height: 280px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  components: {},
  data() {
    return {
      myChart: null,
      resizeHandler: null // 窗口resize事件处理器
    };
  },
  props: {
    seriesData: {
      type: Array,
      default: () => []
    },
    xData: {
      type: Array,
      default: () => []
    },
    name: {
      type: String,
      default: () => { }
    },
  },
  watch: {
    // 监听 xData 变化，触发图表更新
    xData: {
      handler() {
        this.$nextTick(() => this.initData());
      },
      deep: true // 深度监听数组内元素变化
    },
    // 监听 seriesData 变化，触发图表更新
    seriesData: {
      handler() {
        this.$nextTick(() => this.initData());
      },
      deep: true // 深度监听数组内元素变化
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initData();
    });
    // 注册窗口resize事件，使用稳定的引用以便后续移除
    this.resizeHandler = () => {
      if (this.myChart) {
        this.myChart.resize();
      }
    };
    window.addEventListener('resize', this.resizeHandler);
  },
  methods: {
    initData() {
      const chartDom = this.$refs.cockpitEffChip;
      if (!chartDom) {
        console.error('图表容器未找到！');
        return;
      }
      // 销毁已有图表实例
      if (this.myChart) {
        this.myChart.dispose();
      }
      this.myChart = echarts.init(chartDom);
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          // 优化tooltip内容，区分各系列含义
          formatter: (params) => {
            let html = `${params[0].axisValue}<br/>`;
            params.forEach(item => {
              // 直接使用系列名，无需映射，仅保留单位判断
              html += `${item.marker} ${item.seriesName}: ${item.value}${'元'}<br/>`;
            });
            return html;
          }
        },
        grid: {
          top: 50,
          bottom: 30, // 增大底部间距，避免柱子与X轴标签重叠
          right: 70,
          left: 50,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true, // 开启边界间隙，让柱子居中显示，不贴边
            axisTick: { show: false },
            axisLine: {
              show: true,
              lineStyle: { color: 'rgba(0, 0, 0, 0.15)' }
            },
            axisLabel: {
              color: 'rgba(0, 0, 0, 0.45)',
              fontSize: 12,
              interval: 0,
              padding: [5, 0, 0, 0] // 标签向下偏移，避免与柱子底部重叠
            },
            data: this.xData // 绑定监听的 xData
          }
        ],
        yAxis: [
          // 左侧Y轴：目标/达标/未达标（数量，单位“片”）
          {
            type: 'value',
            name: '元',
            nameTextStyle: {
              color: 'rgba(0, 0, 0, 0.45)',
              fontSize: 12,
              align: 'right'
            },
            min: 0, // 最小值设0，确保柱子从X轴底部开始，不超过X轴
            max: (value) => Math.ceil(value.max * 1.1), // 最大值留10%余量，避免柱子顶满
            scale: false, // 关闭缩放，强制从0开始
            axisTick: { show: false },
            axisLabel: {
              color: 'rgba(0, 0, 0, 0.45)',
              fontSize: 12,
              formatter: '{value}'
            },
            splitLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
            axisLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
            splitNumber: 4
          },
          // 右侧Y轴：完成率（百分比）
          // {
          //   type: 'value',
          //   // name: '%',
          //   nameTextStyle: {
          //     color: 'rgba(0, 0, 0, 0.45)',
          //     fontSize: 12,
          //     align: 'left'
          //   },
          //   min: 0,
          //   max: 100, // 完成率最大100%，符合业务逻辑
          //   axisTick: { show: false },
          //   axisLabel: {
          //     color: 'rgba(0, 0, 0, 0.45)',
          //     fontSize: 12,
          //     formatter: '{value}%'
          //   },
          //   splitLine: { show: false }, // 不重复显示分割线
          //   axisLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
          //   splitNumber: 4
          // }
        ],
        series: [
          // 1. 完成率：折线图（绑定右侧百分比Y轴）
          // {
          //   name: '产销率',
          //   type: 'line',
          //   yAxisIndex: 1, // 绑定右侧Y轴
          //   lineStyle: {
          //     color: 'rgba(40, 138, 255, .5)',
          //     width: 2 // 线条加粗，突出重点
          //   },
          //   itemStyle: {
          //     color: 'rgba(40, 138, 255, 1)',
          //     borderColor: 'rgba(40, 138, 255, 1)', // 数据点白色边框，增强辨识度
          //     borderWidth: 2,
          //     radius: 4 // 数据点圆角，更圆润
          //   },
          //   areaStyle: {
          //     opacity: 0.2, // 降低面积透明度，不抢柱状图视觉焦点
          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //       { offset: 0, color: 'rgba(40, 138, 255, .9)' },
          //       { offset: 1, color: 'rgba(255, 132, 0, 0)' }
          //     ])
          //   },
          //   data: [65, 78, 52, 85, 60, 95, 72], // 完成率数据（0-100）
          //   symbol: 'circle', // 数据点为圆形
          //   symbolSize: 6 // 数据点大小
          // },
          // 2. 目标：柱状图（绑定左侧数量Y轴）
          {
            name:this.name,
            type: 'bar',
            yAxisIndex: 0,
            barWidth: 24,
            label: {
              show: true, // 开启显示
              position: 'top', // 标签位置，可选：'top'、'middle'、'bottom'
              // 也可以使用绝对像素值定位，例如 [10, '50%']
              // position: [10, '50%'],

              // 标签内容格式化，这里直接显示数据值
              formatter: '{c}',

              // 文字样式
              color: 'rgba(11, 88, 255, 1)', // 文字颜色
              fontSize: 14, // 文字大小
              // fontWeight: 'bold', // 文字粗细
              // fontFamily: 'Arial, sans-serif' // 字体
            },
            itemStyle: {
              // 移除多余的 normal 层级，直接配置 color 渐变
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: 'rgba(130, 204, 255, 1)' },
                  { offset: 1, color: 'rgba(75, 157, 255, 1)' }
                ]
              },
              borderRadius: [4, 4, 0, 0],
              borderWidth: 0
            },
            data: this.seriesData
          },
          // 3. 达标：柱状图（绑定左侧数量Y轴）
          // {
          //   name: '产量',
          //   type: 'bar',
          //   yAxisIndex: 0,
          //   barWidth: 24,
          //   // 关键修复：label 直接放在 series 下，而非 itemStyle 内
          //   itemStyle: {
          //     // 移除多余的 normal 层级，直接配置 color 渐变
          //     color: {
          //       type: 'linear',
          //       x: 0,
          //       y: 0,
          //       x2: 0,
          //       y2: 1,
          //       colorStops: [
          //         { offset: 0, color: 'rgba(174, 239, 224, 1)' },
          //         { offset: 1, color: 'rgba(118, 218, 190, 1)' }
          //       ]
          //     },
          //     borderRadius: [4, 4, 0, 0],
          //     borderWidth: 0
          //   },
          //   data: [130, 220, 95, 255, 132, 332] // 达标数据（小于目标）
          // },
          // 4. 未达标：柱状图（绑定左侧数量Y轴）
          // {
          //   name: '未达标',
          //   type: 'bar',
          //   yAxisIndex: 0,
          //   barWidth: 18,
          //   itemStyle: {
          //     color: 'rgba(249, 164, 74, 1)',
          //     borderRadius: [4, 4, 0, 0],
          //     borderWidth: 0
          //   },
          //   data: [70, 60, 85, 45, 88, 18, 78] // 未达标数据（目标-达标）
          // }
        ],
        // 图例：区分各系列，点击可控制显示隐藏
        // legend: {
        //   top: 0,
        //   left: 'center',
        //   itemWidth: 12,
        //   itemHeight: 8,
        //   textStyle: {
        //     color: 'rgba(0, 0, 0, 0.45)',
        //     fontSize: 12
        //   },
        //   data: ['完成率', '目标', '达标', '未达标']
        // }
      };

      option && this.myChart.setOption(option);
    }
  },
  beforeDestroy() {
    // 移除窗口resize事件监听器
    if (this.resizeHandler) {
      window.removeEventListener('resize', this.resizeHandler);
      this.resizeHandler = null;
    }
    // 销毁图表，避免内存泄漏
    if (this.myChart) {
      this.myChart.dispose();
      this.myChart = null;
    }
  }
};
</script>
