<template>
  <div id="map"></div>
  <div class="address">
    <span class="lng">请输入地址:</span>
    <el-input id="suggestId" v-model="address" placeholder="请输入地点" />
    <div
      id="searchResultPanel"
      style="
        border: 1px solid #c0c0c0;
        width: 150px;
        height: auto;
        display: none;
      "
    ></div>
  </div>
  <div class="address">
    <span class="lng">地址：{{ address }}</span>
    <span class="lng">lng:{{ lng }}</span>
    <span class="lat">lat:{{ lat }}</span>
  </div>
  <div class="options">
    <el-button
      color="rgba(9, 101, 98, 1)"
      class="queding"
      type="primary"
      @click="mapAddress(true)"
    >
      确定
    </el-button>
    <el-button @click="mapAddress(false)">取消</el-button>
  </div>
</template>

<script setup>
import loadBMap from "@/utils/loadMap.js";
import {
  ref,
  reactive,
  onBeforeMount,
  onMounted,
  watch,
  watchEffect,
  nextTick,
} from "vue";
const mapInit = loadBMap("jmkawuXGwcepLcsAqcAi3FeDMfaLhnOE");

const props = defineProps({
  fatherMessage: {},
});

const lng = ref("--");
const lat = ref("--");
const address = ref("");
const map = ref();

const emit = defineEmits(["mapClick"]);

// 确定按钮
const mapAddress = (flag) => {
  let data = {
    address: address.value,
    lng: lng.value,
    lat: lat.value,
    flag: flag,
  };
  emit("mapClick", data);
};

const getList = () => {
  mapInit.then((BMapGL) => {
    //创建地图实例,位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。
    // map.value = new BMapGL.Map("map");
    // 百度地图API功能
    function G(id) {
      return document.getElementById(id);
    }

    var map = new BMapGL.Map("map");
    map.centerAndZoom("江西", 12); // 初始化地图,设置城市和地图级别。

    var ac = new BMapGL.Autocomplete({
      //建立一个自动完成的对象
      input: "suggestId",
      location: map,
    });

    ac.addEventListener("onhighlight", function (e) {
      //鼠标放在下拉列表上的事件
      var str = "";
      var _value = e.fromitem.value;
      var value = "";
      if (e.fromitem.index > -1) {
        value =
          _value.province +
          _value.city +
          _value.district +
          _value.street +
          _value.business;
      }
      str =
        "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

      value = "";
      if (e.toitem.index > -1) {
        _value = e.toitem.value;
        value =
          _value.province +
          _value.city +
          _value.district +
          _value.street +
          _value.business;
      }
      str +=
        "<br />ToItem<br />index = " +
        e.toitem.index +
        "<br />value = " +
        value;
      G("searchResultPanel").innerHTML = str;
    });

    var myValue;
    ac.addEventListener("onconfirm", function (e) {
      //鼠标点击下拉列表后的事件
      var _value = e.item.value;
      myValue =
        _value.province +
        _value.city +
        _value.district +
        _value.street +
        _value.business;
      G("searchResultPanel").innerHTML =
        "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

      setPlace();
    });

    function setPlace() {
      map.clearOverlays(); //清除地图上所有覆盖物
      function myFun() {
        var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
        map.centerAndZoom(pp, 18);
        map.addOverlay(new BMapGL.Marker(pp)); //添加标注
      }
      var local = new BMapGL.LocalSearch(map, {
        //智能搜索
        onSearchComplete: myFun,
      });
      local.search(myValue);
    }
  });
};

onBeforeMount(async () => {
  getList();
  console.log(props.fatherMessage);
});
</script>

<style lang="scss" scoped>
#map {
  border: 1px solid red;
  box-sizing: border-box;
  width: 100%;
  height: 600px;
}
#suggestId {
  // border: 1px solid red;
  width: 120px !important;
  height: 30px;
}
.el-input {
  width: 350px;
}
.address {
  margin: 10px 20px;
}
.lng {
  margin-right: 20px;
}
.options {
  width: 98%;

  .queding {
    margin-left: 20px;
    color: #fff;
  }
  display: flex;
  flex-direction: row-reverse;
}
</style>
