<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: '大周期：750年',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['', '周朝\n1000BC', '', '汉朝\n200BC', '', '唐朝\n600', '', '明朝\n1400', '', '', '时间\n--'],
      axisLabel: { fontSize: 14, interval: 0 }
    },
    yAxis: {
      type: 'value',
      name: '综合实力',
      min: 0,
      max: 100,
      nameLocation: 'start',
      nameGap: 40,
      nameTextStyle: {
        padding: [0, 0, 0, 40, 60],
        fontSize: 14
      },
      // 轴标签样式
      axisLabel: {
        fontSize: 14,
        show: false
      }
    },
    grid: {
      left: '15%',
      right: '10%',
      bottom: '15%',
      top: '10%',
      containLabel: true
    },
    series: [
      {
        name: '中华民族',
        type: 'line',
        smooth: true,
        symbol: 'none',
        itemStyle: { 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)' }
          ])
        },
        data: [-10, 10, 5, 20, 15, 30, 25, 45, 30, 90, 100]
      },
      {
        name: '西方国家：从文艺复兴到工业革命',
        type: 'line',
        smooth: true,
        symbol: 'none',
        itemStyle: { color: '#3B82F6' },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(59, 130, 246, 0.3)' },
            { offset: 1, color: 'rgba(59, 130, 246, 0)' }
          ])
        },
        data: ['', '', '', '', '', '', '', 25, 55, 75, 90]
      },
      {
        name: '关键节点',
        type: 'scatter',
        data: [
          { value: [4, 20], name: '中华民族' },
          { value: [7, 70], name: '西方国家：\n从文艺复兴到工业革命' }
        ],
        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: '汉朝\n200BC', yAxis: 0, lineStyle: { type: 'dashed' } },
        { xAxis: '唐朝\n600', yAxis: 0, lineStyle: { type: 'dashed' } },
        { xAxis: '明朝\n1400', yAxis: 0, lineStyle: { type: 'dashed' } },
        { xAxis: '时间\n--', 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>