<template>
  <div class="timeline-map">
    <!-- 地图容器 -->
    <div ref="chartRef" style="width: 100%; height: 600px;"></div>

    <!-- 控制栏 -->
    <div class="controls" style="margin-top: 16px; text-align: center;">
      <button @click="play" :disabled="isPlaying">播放</button>
      <button @click="pause" :disabled="!isPlaying">暂停</button>
      <span style="margin: 0 16px;">速度：</span>
      <input type="range" min="0.5" max="3" step="0.5" v-model.number="speed" />
      <span>{{ speed }}x</span>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import * as echarts from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { GeoComponent } from 'echarts/components';
import { ScatterChart } from 'echarts/charts';
import { TooltipComponent } from 'echarts/components';

// 注册必要组件
echarts.use([CanvasRenderer, GeoComponent, ScatterChart, TooltipComponent]);

// 导入中国地图 GeoJSON
import chinaJson from '@/assets/json/China.json';

// 事件数据（模拟）
const events = [
  {
    date: '2024-09-23',
    desc: '在北京会见科技企业代表',
    avatar: 'https://via.placeholder.com/32?text=BJ',
    lng: 116.4074,
    lat: 39.9042 // 北京
  },
  {
    date: '2024-09-24',
    desc: '在上海考察集成电路产业',
    avatar: 'https://via.placeholder.com/32?text=SH',
    lng: 121.4737,
    lat: 31.2304 // 上海
  },
  {
    date: '2024-09-25',
    desc: '在深圳调研人工智能发展',
    avatar: 'https://via.placeholder.com/32?text=SZ',
    lng: 114.0579,
    lat: 22.5431 // 深圳
  },
  {
    date: '2024-09-26',
    desc: '在成都出席科技创新论坛',
    avatar: 'https://via.placeholder.com/32?text=CD',
    lng: 104.0665,
    lat: 30.5728 // 成都
  }
];

// 响应式状态
const chartRef = ref(null);
const currentIndex = ref(0);
const isPlaying = ref(false);
const speed = ref(1);
let intervalId = null;
let myChart = null;

// 初始化图表
onMounted(() => {
  // 注册中国地图（关键！）
  echarts.registerMap('China', chinaJson);

  myChart = echarts.init(chartRef.value);

  const option = getOption();
  myChart.setOption(option);
});

onUnmounted(() => {
  if (intervalId) clearInterval(intervalId);
  if (myChart) myChart.dispose();
});

// 获取 ECharts 配置
function getOption() {
  return {
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(255,255,255,0.9)',
      borderColor: '#ccc',
      borderRadius: 6,
      textStyle: { color: '#333', fontSize: 12 },
      formatter(params) {
        const data = params.data;
        return `
          <div style="padding:8px; line-height:1.4;">
            <img src="${data.avatar}" width="24" height="24" style="border-radius:50%; vertical-align:middle; margin-right:6px;" />
            <strong>${data.date}</strong><br/>
            ${data.desc}
          </div>
        `;
      }
    },
    geo: {
      map: 'China', // 使用注册的地图名
      roam: true,
      zoom: 1.2,
      center: [105, 35], // 中国大致中心
      label: {
        show: false
      },
      itemStyle: {
        areaColor: '#f0f9ff',
        borderColor: '#a0cfff'
      },
      emphasis: {
        itemStyle: {
          areaColor: '#e6f7ff'
        }
      }
    },
    series: [
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        data: getCurrentData(),
        symbolSize: 12,
        itemStyle: {
          color: '#1890ff'
        },
        label: {
          show: false
        }
      }
    ]
  };
}

// 获取当前要显示的数据
function getCurrentData() {
  return [events[currentIndex.value]];
}

// 播放
function play() {
  if (isPlaying.value) return;
  isPlaying.value = true;
  intervalId = setInterval(() => {
    currentIndex.value = (currentIndex.value + 1) % events.length;
    myChart.setOption({
      series: [{ data: getCurrentData() }]
    });
  }, 1000 / speed.value);
}

// 暂停
function pause() {
  if (!isPlaying.value) return;
  isPlaying.value = false;
  clearInterval(intervalId);
  intervalId = null;
}

// 监听速度变化
watch(speed, () => {
  if (isPlaying.value) {
    pause();
    play();
  }
});
</script>

<style scoped>
.controls button {
  margin: 0 8px;
  padding: 6px 12px;
  font-size: 14px;
}
</style>