<template>
  <div class="map" :id="_id" :style="{height:attrs.height?attrs.height+'px':'300px'}"></div>
</template>

<script setup>
  import { computed,getCurrentInstance,nextTick, ref  } from "vue";
  const { proxy } = getCurrentInstance();
  const value = ref('')
  const config = ref({})
  const lng = ref(null) // 经度
  const lat = ref(null) //纬度
  const map = ref(null) //地图
  const zoom = ref(12) //地图层级
  const emit = defineEmits();
  const _id = ref('')
  const props = defineProps({
    propConfig:{},
    propValue:{},
    parentValue:{}
  })
  const attrs = computed({
    get() {
      return config.value.attr ? config.value.attr : {};
    }
  })

  const onChange = () => {
    emit('onChange',getValue());
  }
  //设置配置
  const setConfig = c => {
    if(c){
      config.value = c;
    }
  }

  //获取配置
  const getConfig = () => {
    return lodash.cloneDeep(config.value)
  }

  const getValue = () => {
    let obj = {}
    if(attrs.value.lng){
      obj[attrs.value.lng] = lng.value
    }
    if(attrs.value.lat){
      obj[attrs.value.lat] = lat.value
    }
    return obj
  }

  const getUuid = () => {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
  }

  const clearValue = () => {
    lng.value = ''
    lat.value = ''
    map.value.clearOverLays();
  }

  //初始化地图
  const initMap = callback => {
    if(map.value) return
    map.value = new T.Map(_id.value);
    map.value.centerAndZoom(new T.LngLat(109.411030,24.328160), zoom.value);
    const cp = new T.CoordinatePickup(map.value, {callback: getLngLat})
    cp.addEvent();
    if(callback) {
      callback()
    }
  }

  const getLngLat = lnglat => {
    map.value.clearOverLays();
    var marker = new T.Marker(new T.LngLat(lnglat.lng, lnglat.lat));
    //向地图上添加标注
    map.value.addOverLay(marker);
    lng.value = lnglat.lng;
    lat.value = lnglat.lat;
    onChange()
  }
  const setValue = () => {
    nextTick(() => {
      if(props.parentValue) {
        if(attrs.value.lng){
          lng.value = props.parentValue[attrs.value.lng]
        }
        if(attrs.value.lat){
          lat.value = props.parentValue[attrs.value.lat]
        }
        if(lng.value && lat.value){
          if(!map.value){
            initMap(() => {
              getLngLat({lng:lng.value,lat:lat.value})
            })
          }else{
            getLngLat({lng:lng.value,lat:lat.value})
          }
        }
      }
    })
  }

  defineExpose({
    getValue,getConfig,setConfig,clearValue,setValue
  })

  if(props.propConfig){
    setConfig(props.propConfig)
  }
  if(props.parentValue){
    setValue()
  }

  _id.value = getUuid()
  nextTick(() => {
    initMap()
  })
  

</script>

<style lang="scss" scoped>
.map{
  width: 100%;
  height: 300px;
}
</style>