<template>
  <div>
    <div ref="chartRef" class="chart-container"></div>
  </div>
</template>

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

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

const initChart = () => {
  if (!chartRef.value) return;

  chartInstance = echarts.init(chartRef.value);
  const option = {
    title: {
      text: '中周期：50-60年',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1921', '', '1976', '', '2008', '2020', '2030', '', '', '2060', '时间'],
      axisLabel: {fontSize: 14}
    },
    // 定义纵轴配置项
    yAxis: {
      // 纵轴类型为数值轴
      type: 'value',
      // 纵轴名称
      name: '中国综合实力',
      // 最小值
      min: 0,
      // 最大值
      max: 100,
      // 名称位置在轴的起始处
      nameLocation: 'start',
      // 名称与轴的距离
      nameGap: 40,
      // 名称文本样式
      nameTextStyle: {
        // 填充左侧间距以对齐名称
        padding: [0, 0, 0, 40],
        // 字体大小
        fontSize: 14
      },
      // 轴标签样式
      axisLabel: {
        fontSize: 14,
        show: false
      }
    },

    grid: {
      left: '15%',
      right: '10%',
      bottom: '15%',
      top: '10%',
      containLabel: true
    },
    series: [
      {
        name: '发展曲线',
        type: 'line',
        data: [
          [0, 10], [1, 30], [2, 20], [3, 35], [4, 45], [5, 55], [6, 45], [7, 70], [8, 80], [9, 90], [10, 90]
        ],
        smooth: true,
        symbol: 'none',
        lineStyle: {
          width: 3,
          color: '#EF4444'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {offset: 0, color: 'rgba(239, 68, 68, 0.3)'},
            {offset: 1, color: 'rgba(239, 68, 68, 0)'}
          ])
        }
      },
      {
        name: '关键阶段',
        type: 'scatter',
        data: [
          {value: [1, 10], name: '生存'},
          {value: [4, 30], name: '发展'},
          {value: [8, 60], name: '壮大'}
        ],
        symbolSize: 10,
        itemStyle: {
          color: '#10B981',
          borderColor: '#FFFFFF',
          borderWidth: 1
        },
        label: {
          show: true,
          position: 'top',
          formatter: '{b}',
          color: '#1F2937',
          backgroundColor: '#FFFFFF',
          padding: [4, 8],
          borderRadius: 4,
          fontSize: 12,
          borderWidth: 1,
          borderColor: '#ccc'
        }
      }
    ],
    markLine: {
      data: [
        {xAxis: '1976', yAxis: 0, lineStyle: {type: 'dashed'}},
        {xAxis: '2008', yAxis: 0, lineStyle: {type: 'dashed'}},
        {xAxis: '2020', yAxis: 0, lineStyle: {type: 'dashed'}},
        {xAxis: '2030', yAxis: 0, lineStyle: {type: 'dashed'}},
        {xAxis: '2060', yAxis: 0, lineStyle: {type: 'dashed'}}
      ]
    }
  };
  chartInstance.setOption(option);
};

const resizeChart = () => {
  chartInstance?.resize();
};

onMounted(() => {
  initChart();
  window.addEventListener('resize', resizeChart);
});

onBeforeUnmount(() => {
  if (chartInstance) {
    chartInstance.dispose();
    chartInstance = null;
  }
  window.removeEventListener('resize', resizeChart);
});
</script>

<style scoped>
.chart-container {
  width: 90%;
  max-width: 1000px;
  height: 450px;
  margin: 0 auto 80px;
}

h2 {
  width: 90%;
  max-width: 1000px;
  text-align: center;
  margin: 0 auto 10px;
}
</style>