<template>
  <div ref="mapContainer" style="width: 100%; height: 300px; background: #ffffff"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import json from '@/assets/530926geo.json';
import { getAssetsFile } from '@/utils';

// 您提供的耿马县GeoJSON数据
const gengmaGeoJSON = json;

// 模拟乡镇数据（根据图片中的地名）
const towns = ref([
  { name: '孟定镇', coord: [99.01, 23.64] },
  { name: '勐简乡', coord: [99.24, 23.79] },
  { name: '四排山乡', coord: [99.5, 23.38] },
  { name: '大兴乡', coord: [99.8, 23.76] },
  { name: '耿马镇', coord: [99.42, 23.66] },
  { name: '贺派乡', coord: [99.21, 23.4] },
  { name: '芒洪乡', coord: [99.73, 23.59] },
  { name: '勐永镇', coord: [99.53, 23.99] },
  { name: '勐撒镇', coord: [99.47, 23.85] },
]);

const mapContainer = ref(null);

// 获取天气图标路径
// function getWeatherIconPath(iconType) {
//   return `/images/${iconType}.png`; // 使用绝对路径
// }
function getWeatherIconPath(iconType) {
  const iconMap = {
    sunny: 'images/smartFarm/sunny.png',
    cloudy: 'images/smartFarm/sunnyToCloudy.png',
    rainy: 'images/smartFarm/rainy.png',
    overcast: 'images/smartFarm/windy.png',
  };
  let path = iconMap[iconType] ? iconMap[iconType] : 'images/smartFarm/sunny.png';
  return getAssetsFile(path);
}

onMounted(() => {
  const chart = echarts.init(mapContainer.value, 'dark');

  // 添加点击事件监听
  chart.on('click', (params) => {
    if (params.componentType === 'series') {
      // 点击乡镇标记点
      console.log('点击乡镇:', params.name);
      showWeatherDetail(params.data);
    } else if (params.componentType === 'geo') {
      // 点击地图区域
      console.log('点击地图区域:', params.name);
    }
  });

  // 显示天气详情弹窗
  const showWeatherDetail = (data) => {
    console.log(data);
  };

  // 注册地图
  echarts.registerMap('耿马县', gengmaGeoJSON);

  // 配置项
  const option = {
    backgroundColor: '#fff', // 白色背景
    title: {
      text: '',
      left: 20,
      top: 10,
      textStyle: {
        color: '#000', // 黑色文字
        fontSize: 18,
        fontWeight: 'bold',
      },
    },
    geo: {
      map: '耿马县',
      roam: false,
      zoom: 1.1,
      label: {
        show: true, // 开启地名显示
        color: '#333',
        fontSize: 12,
        formatter: (params) => params.name, // 直接显示地名
      },
      itemStyle: {
        areaColor: '#a8d8ea', // 浅蓝色填充
        borderColor: '#4682B4', // 钢蓝色边界
        borderWidth: 1.2,
        shadowColor: 'rgba(0, 100, 150, 0.3)',
        shadowBlur: 8,
      },
      emphasis: {
        label: {
          show: true,
          color: '#1890FF',
        },
        itemStyle: {
          areaColor: '#BAE7FF',
        },
      },
    },
    series: [
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        symbolSize: 0,
        data: towns.value,
        label: {
          show: true,
          position: 'inside', // 地名显示在区域内
          formatter: '{b}',
          color: '#000',
          fontSize: 10,
        },
      },
    ],
  };

  chart.setOption(option);

  window.addEventListener('resize', function () {
    chart.resize();
  });
});
</script>
