<template>
<!--<BaiduMap></BaiduMap>-->
  <el-button @click="setLngLat">选择位置</el-button>
  <el-button @click="selAlert">查看选中的点</el-button>
  <el-button @click="selAlertMap">查看地图选中的点</el-button>

  <el-dialog
    v-model="dialogVisible"
    title="选择位置"
    width="100%"
    destroy-on-close
  >
    <MapContainer ref="mapContainerRef" v-model="mapType" :markerDatas="ceshi" @complete="complete" ></MapContainer>
  </el-dialog>
</template>

<script setup>

import MapContainer from "@/components/MapContainer"
import {getCurrentInstance, ref} from "vue";
const {proxy} = getCurrentInstance();

const mapType = ref(1)

const dialogVisible = ref(false)

const mapContainerRef = ref()

const ceshi = ref([])

function complete(e){
  let objHtml = []
  dialogVisible.value = false
  let obj = {}
  //解决直接赋值 浅拷贝问题
  Object.assign(obj,e)
  obj.id = "id"+Math.ceil(Math.random()*10);
  obj.title = "<span>测试设备</span>"
  obj.html = "<span>测试设备详情</span>"
  ceshi.value.push(obj)
}
function setLngLat(){
  dialogVisible.value = true;
  mapType.value = 1
  // setTimeout(() => {
  //   mapContainerRef.value.clearSearchMarker()
  // }, 1);
}
function selAlert(){
  console.log(JSON.stringify(ceshi.value))
}
function selAlertMap(){
  dialogVisible.value = true
  mapType.value = 2

  // 等待dialog加载完成才能调用子组建方法
  // setTimeout(() => {
  //   mapContainerRef.value.addMarkers(ceshi.value)
  // }, 1);
}

</script>

<style scoped lang="scss">

</style>
