<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from "vue";

// 定义组件属性
const props = defineProps({
  // 地图中心点坐标
  center: {
    type: Object,
    default: () => ({ lng: 116.345, lat: 39.965 })
  },
  // 地图缩放级别
  zoom: {
    type: Number,
    default: 11
  },
  // 地图宽度
  width: {
    type: String,
    default: '100%'
  },
  // 地图高度
  height: {
    type: String,
    default: '400px'
  }
});

// 地图实例引用
const map = ref(null);
// 地图容器引用
const mapContainer = ref(null);

// 组件挂载后初始化地图
onMounted(() => {
  initMap();
});

// 初始化地图
const initMap = () => {
  if (mapContainer.value && window.BMap) {
    // 创建地图实例
    map.value = new window.BMap.Map(mapContainer.value);

    // 设置地图中心点坐标
    const point = new window.BMap.Point(props.center.lng, props.center.lat);

    // 初始化地图，设置中心点坐标和地图级别
    map.value.centerAndZoom(point, props.zoom);

    // 启用地图拖拽缩放功能
    map.value.enableScrollWheelZoom(true);

    // 添加地图控件
    map.value.addControl(new window.BMap.NavigationControl());
    map.value.addControl(new window.BMap.ScaleControl());
  }
};

// 监听地图中心点变化
watch(() => props.center, (newCenter) => {
  if (map.value && window.BMap) {
    const point = new window.BMap.Point(newCenter.lng, newCenter.lat);
    map.value.centerAndZoom(point, props.zoom);
  }
}, { deep: true });

// 监听地图缩放级别变化
watch(() => props.zoom, (newZoom) => {
  if (map.value) {
    map.value.setZoom(newZoom);
  }
});

// 组件销毁前清理地图实例
onBeforeUnmount(() => {
  if (map.value) {
    map.value.clearOverlays();
    map.value.removeEventListener();
    map.value = null;
  }
});

// 暴露方法给父组件使用
defineExpose({
  // 获取地图实例
  getMap() {
    return map.value;
  },
  // 添加标记点
  addMarker(point, opts) {
    if (map.value && window.BMap) {
      const marker = new window.BMap.Marker(point, opts);
      map.value.addOverlay(marker);
      return marker;
    }
    return null;
  },
  // 添加信息窗口
  openInfoWindow(content, point) {
    if (map.value && window.BMap) {
      const infoWindow = new window.BMap.InfoWindow(content);
      map.value.openInfoWindow(infoWindow, point);
    }
  }
});
</script>

<template>
  <div ref="mapContainer" :style="{ width, height }"></div>
</template>

<style scoped>
/* 地图容器样式 */
</style>
