<template>
  <div class="map-wrapper">
    <div ref="mapContainer" style="width: 100%; height: 600px; border: 1px solid #333; border-radius: 8px;"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
import bgImageUrl from '@/assets/marker.png'
// 地图容器引用
const mapContainer = ref(null)

// 地图实例
let map = null

// 🌆 更多标注点数据（北京热门地点）
const markers = [
  { position: [116.397428, 39.90923], title: '天安门', address: '北京市东城区长安街', tel: '010-12345678' },
  { position: [116.3961, 39.9087], title: '故宫博物院', address: '北京市东城区景山前街4号', tel: '010-87654321' },
  { position: [116.4076, 39.9037], title: '王府井', address: '北京市东城区王府井大街', tel: '010-11223344' },
  { position: [116.3780, 39.9042], title: '国家大剧院', address: '北京市西城区西长安街2号', tel: '010-55667788' },
  { position: [116.3375, 39.9040], title: '中关村', address: '北京市海淀区中关村大街', tel: '010-99887766' },
  { position: [116.481485, 39.989692], title: '望京SOHO', address: '北京市朝阳区望京街', tel: '010-12312312' },
  { position: [116.4678, 39.9923], title: '798艺术区', address: '北京市朝阳区酒仙桥路', tel: '010-23423423' },
  { position: [116.4255, 39.9075], title: '北京站', address: '北京市东城区毛家湾胡同甲13号', tel: '010-34534534' },
  { position: [116.3260, 39.9870], title: '颐和园', address: '北京市海淀区新建宫门路19号', tel: '010-45645645' },
  { position: [116.4948, 39.8814], title: '北京南站', address: '北京市丰台区永外大街120号', tel: '010-56756756' },
  { position: [116.4625, 39.9100], title: '三里屯', address: '北京市朝阳区三里屯路', tel: '010-67867867' },
  { position: [116.3600, 39.9780], title: '奥林匹克公园', address: '北京市朝阳区科荟路15号', tel: '010-78978978' }
]

// 初始化地图
const initMap = async () => {
  try {
    // 加载高德地图 SDK
    await AMapLoader.load({
      key: '38b334d84b1f89aa39d4efae76f0b341',           // 🔑 替换为你的高德 Key
      version: '2.0'                  // 使用最新版本
      // 注意：不需要聚合插件了
    })

    console.log('高德地图 SDK 加载成功')

    // 初始化地图
    map = new window.AMap.Map(mapContainer.value, {
      zoom: 11,                       // 适当缩放，显示更多点
      center: [116.397428, 39.90923], // 北京中心
      viewMode: '3D',
      mapStyle: 'amap://styles/dark', // 🖤 黑色主题
      pitch: 35,                      // 倾斜角度，增强 3D 感
      rotation: 0                     // 旋转角度
    })

    console.log('地图初始化完成，共添加 ${markers.length} 个标注')

    // 遍历数据，创建标注
    markers.forEach(item => {
      // 创建水滴图标标注
      const marker = new window.AMap.Marker({
        position: item.position,
        icon: new AMap.Icon({
            size:new AMap.Size(30,30),
            imageSize: new AMap.Size(30, 30), // 图像裁剪大小（可选）
            image:'data:image/png;base64,[encoded data, 4636 characters]', // 💧 蓝色水滴
        }),
        offset: new window.AMap.Pixel(-13, -30), // 调整锚点，指向位置
        title: item.title, // 鼠标悬停提示
        extData: item    // 绑定数据，便于点击时使用
      })

      // 创建信息窗口
      const infoWindow = new window.AMap.InfoWindow({
        content: `
          <div>
            <h4 >${item.title}</h4>
            <p><b>📍 地址：</b>${item.address}</p>
            <p><b>📞 电话：</b>${item.tel}</p>
          </div>
        `,
        offset: new window.AMap.Pixel(0, -30)
      })

      // 点击标注打开信息窗口
      marker.on('click', () => {
        infoWindow.open(map, marker.getPosition())
      })

      // 将标注添加到地图
      map.add(marker)
    })

  } catch (e) {
    console.error('地图初始化失败:', e)
    alert('地图加载失败，请检查高德 Key 或网络连接')
  }
}

// 组件挂载后初始化地图
onMounted(() => {
  console.log('组件已挂载，准备初始化地图')
  initMap()
})
</script>

<style scoped>
.map-wrapper {
  /* padding: 20px; */
  background: #0f0f0f;
  /* min-height: 100vh; */
  color: #fff;
  font-family: 'Microsoft YaHei', Arial, sans-serif;
}
h2 {
  text-align: center;
  color: #4facfe;
  margin-bottom: 16px;
}
</style>