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

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

export default {
  components: {},
  data() {
    return {
      myChart: null, // 存储图表实例
      resizeHandler: null, // 存储resize事件处理函数
      isMounted: false,
      // 核心：基地名称与序号的映射表（固定顺序）
      baseNameToIndexMap: {
        '宜兴': 7,
        '漳州': 8,
        '自贡': 3,
        '桐城': 2,
        '洛阳': 9,
        '合肥': 5,
        '宿迁': 6,
        '秦皇岛': 10
      }
    };
  },
  props: {
    chartData: {
      type: Object,
      default: () => ({}),
    },
    dateData: {
      type: Object,
      default: () => ({}),
    },
  },
  mounted() {
    this.isMounted = true;
    this.$nextTick(() => {
      this.initChart(); // 初始化图表（只执行一次）
      this.updateChart(); // 更新图表数据
    });
  },
  watch: {
    chartData: {
      handler() {
        if (!this.isMounted) return;
        console.log(this.chartData, 'chartData');
        this.updateChart(); // 仅更新数据，不重新创建实例
      },
      deep: true
    },
  },
  beforeDestroy() {
    // 组件销毁时清理资源
    this.destroyChart();
  },
  methods: {
    // 初始化图表（只在mounted中执行一次）
    initChart() {
      const chartDom = this.$refs.cockpitEffChip;
      if (!chartDom) {
        if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
        return;
      }

      // 只创建一次图表实例
      this.myChart = echarts.init(chartDom);

      // 绑定点击事件（只绑定一次，永久生效）
      // this.myChart.getZr().on('click', (params) => {
      //   console.log('params', params);

      //   // 提取点击的基地名称
      //   // const itemName = params.name;
      //   let itemName = undefined
      //   // 根据映射表获取对应的序号（未匹配到则返回0或其他默认值）
      //   let pointInPixel = [params.offsetX, params.offsetY];
      //   if (this.myChart.containPixel('grid', pointInPixel)) {
      //     let pointInGrid = this.myChart.convertFromPixel({
      //       seriesIndex: 0
      //     }, pointInPixel);
      //     let xIndex = pointInGrid[0]; //索引
      //     let handleIndex = Number(xIndex);
      //     let seriesObj = this.myChart.getOption(); //图表object对象
      //     var op = this.myChart.getOption();
      //     //获得图表中点击的列
      //     itemName = op.xAxis[0].data[handleIndex];  //获取点击的列名
      //     console.log(itemName, 'monthmonthmonth');
      //     console.log(handleIndex, seriesObj);
      //   };
      //   const baseIndex = this.baseNameToIndexMap[itemName] || 0;

      //   console.log(`你点击了【${itemName}】(序号：${baseIndex})`);
      //   if (itemName === undefined) {
      //     return;
      //   }
      // });

      // 定义resize处理函数（命名函数，方便移除）
      this.resizeHandler = () => {
        this.myChart && this.myChart.resize();
      };
      // 绑定resize事件（只绑定一次）
      window.addEventListener('resize', this.resizeHandler);
    },

    // 更新图表数据（数据变化时执行）
    updateChart() {
      if (!this.myChart) {
        return; // 实例未初始化则返回
      }

      const { allPlaceNames, series } = this.chartData || {};
      const xData = allPlaceNames || [];
      const chartSeries = series || [];

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
          grid: {
          top: 30,
          bottom: 5,
          right: 20,
          left: 25,
          containLabel: true
        },
        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: xData
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '万元',
            nameTextStyle: {
              color: 'rgba(0, 0, 0, 0.45)',
              fontSize: 12,
              align: 'right'
            },
            splitNumber: 4,
            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: { show: true, show: true, lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } }
          },
          // {
          //   type: 'value',
          //   nameTextStyle: {
          //     color: 'rgba(0, 0, 0, 0.45)',
          //     fontSize: 12,
          //     align: 'left'
          //   },
          //   axisTick: { show: false },
          //   axisLabel: {
          //     color: 'rgba(0, 0, 0, 0.45)',
          //     fontSize: 12,
          //     formatter: '{value}%'
          //   },
          //   splitLine: { show: false },
          //   axisLine: { show: true, show: true, lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
          //   splitNumber: 4
          // }
        ],
        series: chartSeries
      };

      // 只更新配置，不重新创建实例
      this.myChart.setOption(option, true); // 第二个参数true表示清空原有配置，避免数据残留
    },

    // 销毁图表资源
    destroyChart() {
      // 移除resize事件
      if (this.resizeHandler) {
        window.removeEventListener('resize', this.resizeHandler);
      }
      // 销毁图表实例
      if (this.myChart) {
        this.myChart.dispose();
        this.myChart = null;
      }
    }
  }
};
</script>
