<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
    };
  },
  props: ["saleAndProductData"],
  watch: {
    // 监听数据变化，动态更新图表
    saleAndProductData: {
      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);
    },

    // 解析数据：提取地名和对应数值（统一去掉“基地XX”后缀）
    parseData() {
      // const { saleValues = [], productValues = [], productAndSaleRates = [] } = this.saleAndProductData || {};
      const xData = []; // 统一X轴地名
      const saleData = []; // 销量数据
      const productData = []; // 产量数据
      const rateData = []; // 产销率数据（转为百分比）

      // 第一步：提取所有地名（以销量数据为准，其他数据按地名匹配）
      if (Array.isArray(this.saleAndProductData) && this.saleAndProductData.length) {
        this.saleAndProductData.forEach(item => {
          // const key = Object.keys(item)[0];
          const place = item.name.replace('分公司', ''); // 提取地名（如“宜兴基地销量”→“宜兴”）
          xData.push(place);
          saleData.push(item.saleValue); // 销量值（保留两位小数）
          productData.push(item.productValue);
          rateData.push(Number((item.saleAndProductProportion * 100).toFixed(2))); // 转为百分比后保留两位小数
        });
      }

      // // 第二步：匹配产量数据（按X轴地名顺序）
      // if (Array.isArray(productValues) && productValues.length) {
      //   xData.forEach(place => {
      //     const targetItem = productValues.find(item => {
      //       const key = Object.keys(item)[0];
      //       return key.includes(place); // 匹配包含该地名的产量键
      //     });
      //     productData.push(targetItem ? (Number(targetItem[Object.keys(targetItem)[0]]).toFixed(2) * 1) : 0);
      //   });
      // }

      // // 第三步：匹配产销率数据（转为百分比，保留两位小数）
      // if (Array.isArray(productAndSaleRates) && productAndSaleRates.length) {
      //   xData.forEach(place => {
      //     const targetItem = productAndSaleRates.find(item => {
      //       const key = Object.keys(item)[0];
      //       return key.includes(place); // 匹配包含该地名的产销率键
      //     });
      //     const rate = targetItem ? (Number(targetItem[Object.keys(targetItem)[0]]).toFixed(4) * 100) : 0;
      //     rateData.push(rate.toFixed(2) * 1); // 转为百分比后保留两位小数
      //   });
      // }

      return { xData, saleData, productData, rateData };
    },

    // 动态更新图表
    updateChart() {
      if (!this.myChart) return;

      // 解析数据
      const { xData, saleData, productData, rateData } = this.parseData();

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          formatter: (params) => {
            let html = `${params[0].axisValue}<br/>`;
            params.forEach(item => {
              const unit = item.seriesName === '产销率' ? '%' : '万㎡';
              html += `${item.marker} ${item.seriesName}: ${item.value ? item.value :0}${unit}<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'
            },

            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: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
          },
          {
            type: 'value',
            nameTextStyle: {
              color: 'rgba(0, 0, 0, 0.45)',
              fontSize: 12,
              align: 'left'
            },
            // min: 0,
            // max: 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,
            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(40, 138, 255, 0)' }
              ])
            },
            data: rateData, // 动态产销率数据
            symbol: 'circle',
            symbolSize: 6
          },
          // 2. 销量（柱状图，左侧Y轴）
          {
            name: '销量',
            type: 'bar',
            yAxisIndex: 0,
            barWidth: 24,
            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: saleData // 动态销量数据
          },
          // 3. 产量（柱状图，左侧Y轴）
          {
            name: '产量',
            type: 'bar',
            yAxisIndex: 0,
            barWidth: 24,
            itemStyle: {
              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: productData // 动态产量数据
          }
        ]
      };

      this.myChart.setOption(option);
    }
  },
};
</script>
