<!-- 充电时长图表组件 -->
<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-color" style="background-color: #347AE2;"></span>
        <span>充电时长</span>
      </span>
      <span class="legend-item">
        <span class="legend-color" style="background-color: #B8D4FE;"></span>
        <span>放电时长</span>
      </span>
      <span class="chart-time-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 { BarChart } from 'echarts/charts';
import { GridComponent, TooltipComponent, TitleComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

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

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

// 模拟数据
const chartData = [
  { month: '7.1', charge: 350, discharge: 280 },
  { month: '7.2', charge: 230, discharge: 190 },
  { month: '7.3', charge: 400, discharge: 320 },
  { month: '7.4', charge: 280, discharge: 220 },
  { month: '7.5', charge: 350, discharge: 260 },
  { month: '7.6', charge: 450, discharge: 380 },
  { month: '7.7', charge: 300, discharge: 240 },
  { month: '7.8', charge: 420, discharge: 340 },
  { month: '7.9', charge: 250, discharge: 180 },
  { month: '7.10', charge: 380, discharge: 300 },
  { month: '7.11', charge: 320, discharge: 250 },
  { month: '7.12', charge: 400, discharge: 320 },
];

// 初始化图表
function initChart() {
  if (!chartRef.value) return;
  
  // 创建图表实例
  chartInstance = echarts.init(chartRef.value);
  
  // 设置图表配置项
  const option = {
    grid: {
      left: '2%',
      right: '2%',
      bottom: '10%',
      top: '5%',
      containLabel: true
    },
    legend: {
      data: ['充电时长', '放电时长'],
      top: '0',
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 10,
      textStyle: {
        color: '#96A0B5',
        fontSize: 12
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      backgroundColor: '#343744',
      borderColor: '#4C4F5F',
      textStyle: {
        color: '#fff'
      }
    },
    xAxis: {
      type: 'category',
      data: chartData.map(item => item.month),
      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'
        }
      },
      max: 500
    },
    series: [
      {
        name: '充电时长',
        type: 'bar',
        barWidth: '20%',
        data: chartData.map(item => item.charge),
        itemStyle: {
          color: '#347AE2',
          borderRadius: [4, 4, 0, 0]
        }
      },
      {
        name: '放电时长',
        type: 'bar',
        barWidth: '20%',
        data: chartData.map(item => item.discharge),
        itemStyle: {
          color: '#B8D4FE',
          borderRadius: [4, 4, 0, 0]
        }
      }
    ]
  };
  
  // 使用配置项设置图表
  chartInstance.setOption(option);
  
  // 处理窗口大小变化
  window.addEventListener('resize', handleResize);
}

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

// 生命周期钩子
onMounted(() => {
  // 确保DOM已完全渲染
  nextTick(() => {
    // 延迟初始化以确保容器尺寸已计算
    setTimeout(() => {
      initChart();
      if (chartInstance) {
        chartInstance.resize();
      }
    }, 0);
  });
});

// 添加一个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();
    }, 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: 12px;
  font-size: 12px;
  color: #96A0B5;
  margin-bottom: 12px;
}

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

.legend-color {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.chart-time-span {
  color: #347AE2;
  cursor: pointer;
  margin-left: 12px;
}

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