<template>
  <el-row>
    <el-col :span="24">
      <div style="margin-top: 1em; margin-left: 1em;">
        <el-form :model="form" ref="queryRef" :inline="true" label-width="68px">
          <el-form-item label="搜索地址" v-if="modelValue === 1">
            <el-select
              v-model="form.locations"
              placeholder="请输入地点"
              size="large"
              clearable
              filterable
              remote
              :remote-method="searchMarker"
              @change="searchMarker"
              @clear="clearSearchMarker"
            >
              <el-option
                v-for="item in locations"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item  v-if="modelValue === 1">
            <el-button type="primary" @click="complete">选择完成</el-button>
          </el-form-item>

        </el-form>
      </div>

    </el-col>
    <el-col :span="24">
      <div id="container"></div>
    </el-col>

  </el-row>
</template>

<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
  securityJsCode: '66bc1133c89dca6135a739788e248b5d',
}
import { shallowRef } from '@vue/reactivity'
import {onMounted, reactive, ref, toRefs} from "vue";
import { isEmptyStr } from '@/utils/validate'

const map = shallowRef(null);

const placeSearch = ref(null);
const geocoder = ref(null);

// const infoWindow = ref(null);
const data = reactive({
  form: {
  },
  locations:[],
  //标记数组 删除使用
  markers:[],
  //选中或者搜索的地址
  lngLatAddress: {}
});
const { form, locations, markers, lngLatAddress } = toRefs(data);

const props = defineProps({
  //组件使用类型 1 为选择地点
  modelValue: {
    type: Number,
    required: true
  },
  markerDatas:{
    type: Array,
    default:[]
  }
})

const { modelValue, markerDatas } = toRefs(props);

function initMap(){
  AMapLoader.load({
    key:"98b744f236dd8550d7bba30f17d9a2a2",             // 申请好的Web端开发者Key，首次调用 load 时必填
    version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins:[''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  }).then((AMap)=>{
    map.value = new AMap.Map("container",{  //设置地图容器id
      viewMode:"3D",    //是否为3D地图模式
      pitch: 20, //地图俯仰角度，有效范围 0 度- 83 度
      zoom:12,           //初始化地图级别
      center:[117.020725,36.670201], //初始化地图中心点位置
    });

    AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.Geolocation','AMap.PlaceSearch','AMap.AutoComplete','AMap.Geocoder'],function(){//异步同时加载多个插件
      //在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
      map.value.addControl(new AMap.ToolBar());
      // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
      map.value.addControl(new AMap.Scale());
      // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
      // map.value.addControl(new AMap.Geolocation());
      // 构造地点查询类
      var autoOptions = {
        input: "searchAddres"
      };
      placeSearch.value = new AMap.PlaceSearch();
      //经纬度转地址
      geocoder.value = new AMap.Geocoder();

    });
    /**类型为 1 点击可以创建点位 并获取对应的坐标*/
    if(modelValue.value === 1){
      //为地图注册click事件获取鼠标点击出的经纬度坐标
      map.value.on('click', function(e) {
        addMarker( '', e.lnglat.getLng(), e.lnglat.getLat())
      });
    }
    /**类型为 1 渲染所有的点位*/
    if (modelValue.value === 2 && markerDatas.value.length > 0){
      for (let i = 0; i < markerDatas.value.length; i++) {
        const makkerData = markerDatas.value[i]
        const marker = new AMap.Marker({
          position: new AMap.LngLat(makkerData.lng, makkerData.lat),
          extData:{
            id: makkerData.id,
            html: makkerData.html
          },
          label:{
            direction:'top',
            offset: new AMap.Pixel(0, 0),  //设置文本标注偏移量
            content: makkerData.title, //设置文本标注内容
          }
        });
        // marker.setLabel();
        marker.on('click', clickMarker);
        markers.value.push(marker)
      }
      map.value.add(markers.value);
    }
  }).catch(e=>{
    console.log(e);
  })
}
/** 类型为 1 开始 */
const emit = defineEmits(['complete'])
//选择完成 回调方法 传回数据
function complete(){
  emit('complete',lngLatAddress.value)
}
function searchMarker(value) {
  if (!isEmptyStr(value)){
    placeSearch.value.search(value, function (status, result) {
      // 查询成功时，result即对应匹配的POI信息
      if (status !== 'error' && result.poiList.count !== 0){
        locations.value = []
        let pois = result.poiList.pois
        addMarker(pois[0].name, pois[0].location.lng, pois[0].location.lat)
        for (let i = 0;pois.length<10? i < pois.length : i<10; i++) {
          locations.value.push({label: pois[i].name,value:pois[i].name})
        }
      }
    });
  }

}
/** 添加标记 */
function addMarker(title, lng, lat){
  //清除所有坐标
  map.value.clearMap();
  const marker = new AMap.Marker({
    position: new AMap.LngLat(lng, lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
    title: title
  });
  // marker.on('click',clickMarker)
  regeoCode([lng, lat])
  //记录经纬度 用于接收
  lngLatAddress.value.lng = lng
  lngLatAddress.value.lat = lat
  // 设置当前坐标为中心点
  map.value.setCenter([lng, lat])
  // 将创建的点标记添加到已有的地图实例：
  map.value.add(marker);
}

/** 经纬转地址 */
function regeoCode(lngLatLet){
  geocoder.value.getAddress(lngLatLet, function (status, result) {
    if (status === 'complete' && result.regeocode) {
      var address = result.regeocode.formattedAddress;
      lngLatAddress.value.address = address
    } else {
      console.error('根据经纬度查询地址失败')
    }
  });
}
/** 清空搜索框 */
function clearSearchMarker(){
  locations.value = []
  //清除所有坐标
  map.value.clearMap();
}

/** 类型为 1 结束 */
/** 类型为 2 开始 */
/** 点击覆盖物 */
function clickMarker(e){
  /** 展示内容 */
  var infoWindow = new AMap.InfoWindow({
    offset: new AMap.Pixel(0, -1),
    content:  e.target._originOpts.extData.html
  });
  infoWindow.open(map.value,[e.lnglat.getLng(),e.lnglat.getLat()]);

}
/** 类型为 2 结束 */




onMounted(()=>{
  initMap()
})

//  抛出函数 被调用
defineExpose({

});

</script>



<style scoped>
#container{
  padding:0px;
  margin: 0px;
  width: 100%;
  height: 30em;
}
</style>
