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

<script setup>
  import { computed,getCurrentInstance,nextTick, ref,onMounted  } from "vue";
  import $bus from '@/benyun/utils/bus.js'
  const { proxy } = getCurrentInstance();
  const value = ref('')
  const config = ref({})
  const lng = ref(null) // 经度
  const lat = ref(null) //纬度
  const map = ref(null) //地图
  const zoom = ref(13) //地图层级
  const area = ref('') //区域值
  const address = ref('') //详情值
  const emit = defineEmits();
  const _id = ref('')
  let localsearch = ref(null);
  const geocoder = 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);
    //创建对象 
		geocoder.value = new T.Geocoder();
    if(lng.value && lat.value){
      map.value.centerAndZoom(new T.LngLat(lng.value,lat.value), zoom.value);
    }else{
      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 config = {
      pageCapacity: 10,	//每页显示的数量
      onSearchComplete: localSearchResult	//接收数据的回调函数
    };
    localsearch = new T.LocalSearch(map.value, config);
  }
  const localSearchResult = result => {
    if(Number(result.count) > 0){
      let arr = result.pois[0].lonlat.split(',');
      map.value.panTo(new T.LngLat(arr[0],arr[1]), zoom.value);
    }
  }
  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){
          zoom.value = 17
          if(!map.value){
            initMap(() => {
              getLngLat({lng:lng.value,lat:lat.value})
            })
          }else{
            map.value.centerAndZoom(new T.LngLat(lng.value,lat.value), zoom.value);
            getLngLat({lng:lng.value,lat:lat.value})
          }
        }else{
          let pointArea = () => {
            let address = ''
            if(props.parentValue.addrCodeInfo){
              address = props.parentValue.addrCodeInfo
            }
            if(props.parentValue.addrInfo){
              address = address + props.parentValue.addrInfo
            }
            if(address){
              zoom.value = 17;
              // geocoder.value.getPoint(address, searchResult);
              localsearch.search(address);
            }
          }
          if(!map.value){
            initMap(() => {
              pointArea()
            })
          }else{
            pointArea()
          }
        }
      }
    })
  }
  const searchResult = result => {
    if(result.getStatus() == 0){
			map.value.panTo(result.getLocationPoint(), zoom.value);
      // map.value.clearOverLays();
      // //创建标注对象
      // var marker = new T.Marker(result.getLocationPoint());
      // //向地图上添加标注
      // map.value.addOverLay(marker);
		}
  }

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

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

  _id.value = getUuid()
  nextTick(() => {
    initMap()
  })
  // 接收数据
  onMounted(()=>{
    $bus.on('areaEvent',data => {
      let areaValue = data.area ? data.area : '';
      if(areaValue){
        area.value = areaValue.replaceAll('/','');
        if(geocoder.value){
          if(address.value){
            zoom.value = 17;
          }else if(props.parentValue.addrInfo) {
            address.value = props.parentValue.addrInfo
            zoom.value = 17;
          }
          // geocoder.value.getPoint(area.value + address.value, searchResult);
          localsearch.search(area.value + address.value);
        }
      }
    })
    $bus.on('addressEvent',data => {
      address.value = data;
      if(address.value && geocoder.value){
        if(!area.value && props.parentValue.addrCodeInfo) {
          area.value = props.parentValue.addrCodeInfo.replaceAll('/','');
        }
        zoom.value = 17;
        localsearch.search(area.value + address.value);
        // geocoder.value.getPoint(area.value + address.value, searchResult);
        
      }
    })
  })

</script>

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