<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { centerMap } from "@/api";
// import 'echarts/map/js/china';

const chartRef = ref<HTMLElement | null>(null);
let chart: echarts.ECharts | null = null;

// 地图数据
const mapData = ref({
  dataList: [] as {name: string, value: number}[],
  regionCode: 'china'
});

// 获取地图数据
const getMapData = () => {
  centerMap({regionCode: 'china'}).then(res => {
    if (res.success) {
      mapData.value = res.data;
      initChart();
    }
  });
};

const initChart = () => {
  if (!chartRef.value) return;
  
  chart = echarts.init(chartRef.value);
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}'
    },
    visualMap: {
      min: 0,
      max: 1000,
      left: 'left',
      top: 'bottom',
      text: ['高', '低'],
      calculable: true,
      inRange: {
        color: ['#e0f3f8', '#4575b4']
      }
    },
    series: [
      {
        name: '用户分布',
        type: 'map',
        map: 'china',
        roam: false,
        label: {
          show: false
        },
        emphasis: {
          label: {
            show: true
          }
        },
        data: mapData.value.dataList
      }
    ]
  };
  
  chart.setOption(option);
};

// 监听窗口大小变化，重绘图表
const handleResize = () => {
  if (chart) {
    chart.resize();
  }
};

onMounted(() => {
  getMapData();
  window.addEventListener('resize', handleResize);
});

// 组件卸载时移除事件监听
const onUnmounted = () => {
  window.removeEventListener('resize', handleResize);
  if (chart) {
    chart.dispose();
    chart = null;
  }
};
</script>

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

<style scoped lang="scss">
.map-container {
  width: 100%;
  height: 100%;
}
</style> 