<!-- 充放电量对比图表组件 -->
<template>
  <div class="chart-container">
    <div class="chart-header">
      <div class="chart-title">充放电量对比</div>
    </div>
    <!-- <div class="chart-center-legend">
      <span class="legend-item">
        <span class="legend-dot" style="background-color: #347AE2;"></span>
        <span>充电量</span>
      </span>
      <span class="legend-item">
        <span class="legend-dot" style="background-color: #B8D4FE;"></span>
        <span>放电量</span>
      </span>
    </div> -->
    <div class="chart-body" ref="chartRef"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import { GridComponent, TooltipComponent, TitleComponent, LegendComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

// 注册必要的组件
echarts.use([LineChart, GridComponent, TooltipComponent, TitleComponent, LegendComponent, CanvasRenderer]);

const chartRef = ref(null);
let chartInstance = null;

// 模拟数据
const chartData = {
  dates: ['7.2', '7.3', '7.4', '7.5', '7.6', '7.7', '7.8', '7.9', '7.10', '7.11', '7.12'],
  chargeData: [45, 65, 55, 80, 60, 55, 70, 60, 85, 65, 75],
  dischargeData: [30, 45, 35, 50, 40, 30, 45, 35, 60, 40, 50]
};

// 初始化图表
function initChart() {
  if (!chartRef.value) return;
  
  // 创建图表实例
  chartInstance = echarts.init(chartRef.value);
  
  // 找出充电量和放电量的最大值索引
  const chargeMaxIndex = chartData.chargeData.indexOf(Math.max(...chartData.chargeData));
  const dischargeMaxIndex = chartData.dischargeData.indexOf(Math.max(...chartData.dischargeData));
  
  // 设置图表配置项
  const option = {
    grid: {
      left: '2%',
      right: '2%',
      bottom: '10%',
      top: '8%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#343744',
      borderColor: '#4C4F5F',
      textStyle: {
        color: '#fff'
      }
    },
    legend: {
      data: ['充电量', '放电量'],
      top: '0',
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 10,
      textStyle: {
        color: '#96A0B5',
        fontSize: 12
      }
    },
    
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: chartData.dates,
      axisLine: {
        lineStyle: {
          color: '#4C4F5F'
        }
      },
      axisLabel: {
        color: '#96A0B5',
        fontSize: 12
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false
      },
      axisLabel: {
        color: '#96A0B5',
        fontSize: 12
      },
      splitLine: {
        lineStyle: {
          color: '#343744',
          type: 'dashed'
        }
      },
      min: 0,
      max: 100
    },
    series: [
      {
        name: '充电量',
        type: 'line',
        smooth: true,
        symbol: 'none', // 默认不显示圆点
        symbolSize: 8,
        lineStyle: {
          width: 3,
          color: '#347AE2'
        },
        itemStyle: {
          color: '#347AE2',
          borderWidth: 2,
          borderColor: '#fff'
        },
        data: chartData.chargeData.map((value, index) => {
          // 只在最大值点显示圆点
          if (index === chargeMaxIndex) {
            return {
              value: value,
              symbolSize: 10,
              symbol: 'circle',
              itemStyle: {
                color: '#347AE2',
                borderWidth: 1,
                borderColor: '#fff',
                shadowColor: '#347AE2',
                shadowBlur: 10
              }
            };
          }
          return value;
        }),
        areaStyle: {
          opacity: 0.1,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#347AE2'
            },
            {
              offset: 1,
              color: 'rgba(52, 122, 226, 0)'
            }
          ])
        }
      },
      {
        name: '放电量',
        type: 'line',
        smooth: true,
        symbol: 'none', // 默认不显示圆点
        symbolSize: 8,
        lineStyle: {
          width: 3,
          color: '#B8D4FE'
        },
        itemStyle: {
          color: '#B8D4FE',
          borderWidth: 1,
          borderColor: '#fff',
          shadowColor: '#B8D4FE',
          shadowBlur: 10
        },
        data: chartData.dischargeData.map((value, index) => {
          // 只在最大值点显示圆点
          if (index === dischargeMaxIndex) {
            return {
              value: value,
              symbolSize: 10,
              symbol: 'circle',
              itemStyle: {
                color: '#B8D4FE',
                borderWidth: 2,
                borderColor: '#fff'
              }
            };
          }
          return value;
        }),
        areaStyle: {
          opacity: 0.1,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#B8D4FE'
            },
            {
              offset: 1,
              color: 'rgba(184, 212, 254, 0)'
            }
          ])
        }
      }
    ]
  };
  
  // 使用配置项设置图表
  chartInstance.setOption(option);
  
  // 处理窗口大小变化
  window.addEventListener('resize', handleResize);
}

// 处理窗口大小变化
function handleResize() {
  if (chartInstance) {
    chartInstance.resize();
  }
}

// 添加一个watch以监听容器变化
const observer = ref(null);

onMounted(() => {
  nextTick(() => {
    // 使用ResizeObserver监听容器大小变化
    if (window.ResizeObserver && chartRef.value) {
      observer.value = new ResizeObserver(() => {
        if (chartInstance) {
          chartInstance.resize();
        } else {
          initChart();
        }
      });
      observer.value.observe(chartRef.value);
    }
    
    // 延迟初始化以确保容器尺寸已计算
    setTimeout(() => {
      initChart();
      if (chartInstance) {
        chartInstance.resize();
      }
    }, 0);
  });
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
  if (observer.value && chartRef.value) {
    observer.value.unobserve(chartRef.value);
    observer.value = null;
  }
  if (chartInstance) {
    chartInstance.dispose();
    chartInstance = null;
  }
});
</script>

<style scoped lang="scss">
.chart-container {
  flex: 1;
  background: #343744;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  height: 200px;

}

.chart-header {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 8px;
  align-items: center;
}

.chart-title {
  color: #4EA1FF;
  font-size: 14px;
  font-weight: 500;
}

.chart-center-legend {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  font-size: 12px;
  color: #96A0B5;
  margin-bottom: 12px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.chart-body {
  flex: 1;
  // height: 180px;
  // min-height: 180px;
}
</style> 