<template>
  <div class="select-map-pos-container">
    <div :id="elementId" style="width: 100%; height: 100%;"></div>
  </div>
</template>

<script>
import { getCommunityId } from '@/api/community/communityApi'

export default {
  name: 'SelectMapPos',
  props: {
    elementId: {
      type: String,
      default: 'selectMap'
    },
    initData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      map: null,
      marker: null,
      communityId: ''
    }
  },
  mounted() {
    this.communityId = getCommunityId()
    this.$nextTick(() => {
      this.initMap(this.initData)
    })
  },
  methods: {
    initMap(data) {
      // 清除现有地图
      if (this.map) {
        this.map.destroy()
        this.map = null
        this.marker = null
      }
      
      // 设置默认中心点
      let center = new TMap.LatLng(39.916527, 116.397128)
      let zoom = 13
      
      // 如果有初始数据，使用初始位置
      if (data.lat && data.lng) {
        center = new TMap.LatLng(data.lat, data.lng)
        zoom = 16
      }

      let TMap = window.TMap
      
      // 创建地图实例
      this.map = new TMap.Map(document.getElementById(this.elementId), {
        center: center,
        zoom: zoom,
        baseMap: {
          type: 'vector',
          features: ['base', 'building2d', 'point']
        }
      })
      
      // 添加初始标记（如果有）
      if (data.lat && data.lng) {
        this.addMarker(new TMap.LatLng(data.lat, data.lng))
      }
      
      // 添加点击事件
      this.map.on('click', this.handleMapClick)
    },
    
    handleMapClick(event) {
      // 更新标记位置
      this.addMarker(event.latLng)
      
      // 通知父组件位置变化
      this.$emit('position-change', {
        lat: event.latLng.lat,
        lng: event.latLng.lng
      })
    },
    
    addMarker(position) {
      // 清除现有标记
      if (this.marker) {
        this.marker.setMap(null)
      }
      
      // 创建新标记
      let TMap = window.TMap

      this.marker = new TMap.MultiMarker({
        map: this.map,
        styles: {
          "marker": new TMap.MarkerStyle({
            width: 25,
            height: 35,
            src: '/img/maper.png',
            anchor: { x: 32, y: 32 }
          })
        },
        geometries: [{
          id: '1',
          styleId: 'marker',
          position: position
        }]
      })
      
      // 移动地图中心到标记位置
      this.map.setCenter(position)
      this.map.setZoom(16)
    },
    
    updatePosition(lat, lng) {
      if (!this.map) return
      let TMap = window.TMap

      const position = new TMap.LatLng(lat, lng)
      this.addMarker(position)
    }
  },
  watch: {
    initData: {
      deep: true,
      handler(newVal) {
        if (newVal.element && newVal.element !== this.elementId) {
          this.elementId = newVal.element
        }
        
        if (this.map) {
          this.initMap(newVal)
        }
      }
    }
  },
  beforeDestroy() {
    // 组件销毁时清除地图实例
    if (this.map) {
      this.map.destroy()
      this.map = null
    }
  }
}
</script>

<style scoped>
.select-map-pos-container {
  width: 100%;
  height: 100%;
}
</style>