<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 // 存储图表实例，避免重复创建
    };
  },
  props: ["stockValues"],
  watch: {
    // 监听 stockValues 变化，动态更新图表
    stockValues: {
      handler() {
        this.updateChart();
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    // 清理图表实例和事件监听
    this.myChart && this.myChart.dispose();
    window.removeEventListener('resize', this.resizeHandler);
  },
  methods: {
    // 初始化图表实例
    initChart() {
      const chartDom = this.$refs.cockpitEffChip;
      if (!chartDom) {
        console.error('图表容器未找到！');
        return;
      }
      this.myChart = echarts.init(chartDom);
      // 绑定窗口缩放事件
      this.resizeHandler = () => this.myChart?.resize();
      window.addEventListener('resize', this.resizeHandler);
    },

    // 解析 stockValues：提取地名和对应库存值
    parseStockData() {
      const xData = []; // X轴地名
      const data = []; // 对应库存值

      if (Array.isArray(this.stockValues) && this.stockValues.length) {
        this.stockValues.forEach(item => {
          // 获取对象的唯一键（如“宜兴基地库存”）
          // const key = Object.keys(item)[0];
          // 提取地名：去掉“基地库存”后缀（如“宜兴基地库存”→“宜兴”）
          const place = item.name.replace('分公司', '');
          // 获取库存值（保留两位小数，避免精度问题）
          const value = item.stockValue

          xData.push(place);
          data.push(value);
        });
      }

      return { xData, data };
    },

    // 更新图表（核心：动态渲染数据）
    updateChart() {
      if (!this.myChart) return;

      // 解析数据
      const { xData, data } = this.parseStockData();

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          formatter: (params) => {
            let html = `${params[0].axisValue}<br/>`;
            params.forEach(item => {
              html += `${item.marker} 库存: ${item.value} 万㎡<br/>`;
            });
            return html;
          }
        },
       grid: {
          top: 30,
          bottom: 30,
          right: 20,
          left: 60,
        },
        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 // 动态 X 轴数据（解析后的地名）
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '万㎡',
            nameTextStyle: {
              color: 'rgba(0, 0, 0, 0.45)',
              fontSize: 12,
              align: 'right'
            },
            min: 0,
            max: (value) => value.max > 0 ? Math.ceil(value.max * 1.1) : 10, // 无数据时默认最大10，避免图表异常
            scale: false,
            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
          }
        ],
        series: [
          {
            name: '库存',
            type: 'bar',
            yAxisIndex: 0,
            barWidth: 24,
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: 'rgba(11, 88, 255, 1)',
                fontSize: 14
              }
            },
            itemStyle: {
              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: data // 动态库存数据（解析后的值）
          }
        ]
      };

      this.myChart.setOption(option);
    },

    // 窗口缩放处理函数
    resizeHandler() {
      this.myChart && this.myChart.resize();
    }
  },
};
</script>
