<template>
  <div class="cumulative-users-chart">
    <h2>累计用户增长趋势</h2>
    <div ref="chart" style="width: 100%; height: 400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { ref, onMounted, onBeforeUnmount } from 'vue';
import axios from 'axios';

export default {
  name: 'CumulativeUsersChart',
  setup() {
    const chart = ref(null);
    let myChart = null;
    
    // 初始化图表
    const initChart = (data) => {
      if (!chart.value) return;
      
      // 确保只有一个图表实例
      if (myChart) {
        myChart.dispose();
      }
      
      myChart = echarts.init(chart.value);
      
      const option = {
        title: {
          text: '近7日累计用户数',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          formatter: '{b}<br/>累计用户: {c}'
        },
        legend: {
          data: ['累计用户'],
          bottom: 10
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: data.dates.reverse(), // 反转日期，让最近的在右边
          axisLabel: {
            rotate: 45 // 如果日期太长可以旋转
          }
        },
        yAxis: {
          type: 'value',
          name: '用户数',
          minInterval: 1 // 确保显示整数
        },
        series: [
          {
            name: '累计用户',
            type: 'line',
            data: data.userCounts.reverse(), // 与日期对应反转
            itemStyle: {
              color: '#5470C6'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(84, 112, 198, 0.5)' },
                { offset: 1, color: 'rgba(84, 112, 198, 0.1)' }
              ])
            },
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            }
          }
        ]
      };
      
      myChart.setOption(option);
      
      // 响应式调整
      window.addEventListener('resize', function() {
        myChart.resize();
      });
    };
    
    // 获取数据
    const fetchData = async () => {
      try {
        const response = await axios.get('http://127.0.0.1:8080/admin/accounts/statistics/cumulative-users-by-loop');
        initChart(response.data);
      } catch (error) {
        console.error('获取累计用户数据失败:', error);
        // 可以在这里添加错误处理，比如显示提示信息
      }
    };
    
    onMounted(() => {
      fetchData();
    });
    
    onBeforeUnmount(() => {
      if (myChart) {
        myChart.dispose();
      }
      window.removeEventListener('resize', function() {
        myChart.resize();
      });
    });
    
    return {
      chart
    };
  }
};
</script>

<style scoped>
.cumulative-users-chart {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

h2 {
  margin-bottom: 20px;
  text-align: center;
  color: #333;
}
</style>