<template>
  <div class="map-wrapper">
    <!-- 地图容器 -->
    <div ref="mapContainer" class="map-container"></div>

    <!-- 遮罩层：外部遮罩，中间透明区域显示地图 -->
    <div class="map-mask"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'

// 地图容器引用
const mapContainer = ref(null)

// 地图实例
let map = null

// 🎯 目标区域：北京中轴线核心区域（天安门、故宫一带）
const targetArea = {
  center: [116.397428, 39.90923], // 天安门
  bounds: [
    [116.385, 39.895], // 西南角 [minLng, minLat]
    [116.410, 39.920]  // 东北角 [maxLng, maxLat]
  ],
  zoom: 14 // 合适的缩放级别
}

// 🌆 标注点数据（仅限目标区域内）
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.4255, 39.9075], title: '北京站', address: '北京市东城区毛家湾胡同甲13号', tel: '010-34534534' },
  { position: [116.4625, 39.9100], title: '三里屯', address: '北京市朝阳区三里屯路', tel: '010-67867867' }
]

// 初始化地图
const initMap = async () => {
  try {
    await AMapLoader.load({
      key: '38b334d84b1f89aa39d4efae76f0b341', // 替换为你的高德 Key
      version: '2.0'
    })

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

    // 初始化地图
    map = new window.AMap.Map(mapContainer.value, {
      center: targetArea.center,
      zoom: targetArea.zoom,
      viewMode: '3D',
      pitch: 35,
      rotation: 0,
      showLabel: true
    })

    // 🔒 设置地图限制范围（禁止拖出该区域）
    const amapBounds = new window.AMap.Bounds(
      new window.AMap.LngLat(targetArea.bounds[0][0], targetArea.bounds[0][1]),
      new window.AMap.LngLat(targetArea.bounds[1][0], targetArea.bounds[1][1])
    )
    map.setLimitBounds(amapBounds)

    console.log('地图已限制在指定区域内')

    // 添加标注（使用默认图标）
    markers.forEach(item => {
      const marker = new window.AMap.Marker({
        position: item.position,
        title: item.title,
        extData: item // 绑定数据用于点击事件
      })

      // 创建信息窗口
      const infoWindow = new window.AMap.InfoWindow({
        content: `
          <div style="color: #333; font-family: Microsoft YaHei;">
            <h4 style="margin: 0 0 8px;">${item.title}</h4>
            <p><b>📍 地址：</b>${item.address}</p>
            <p><b>📞 电话：</b>${item.tel}</p>
          </div>
        `,
        offset: new window.AMap.Pixel(0, -10)
      })

      // 点击打开信息窗口
      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 {
  background: #0f0f0f;
  color: #fff;
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  position: relative;
  width: 100%;
  height: 600px;
  border-radius: 8px;
  overflow: hidden;
}

.map-container {
  width: 100%;
  height: 100%;
}

/* 遮罩层：全屏黑色半透明，中间圆形透明区域 */
.map-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    transparent 0%,
    transparent 200px,
    rgba(255, 255, 255, 0.8) 300px,
    rgba(255, 255, 255, 0.95) 100%
  );
  pointer-events: none; /* 允许点击穿透到地图 */
  z-index: 10;
  border-radius: 8px;
}
</style>