<template>
  <div style="height: 100%;">
    <div id="map" style="width: 100%; height: 100%;overflow: hidden;z-index: 1;"></div>
    <!-- 搜索框 -->
    <div class="search">
      <input id="textId" class="search-value" type="text" placeholder="请输入名称" size="10px" />
      <!-- 搜索按钮 -->
      <div @click="searchPoint" class="click-search">
        <img src="./images/search.png" alt="">
      </div>
<!--      <input id="btn0" v-on:click="drawIcon" type="button" value="绘制图标点" style="position: relative;left: 120px" />-->
      <!-- 搜索结果 -->
      <div class="search-result">
        <ul id="elementUl">

        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "pl-map",
  props: ['mapInfo'],
  data() {
    return {
      map: null,
      geo: null,
      value: null,
      centralPoint: null,
      defaultImg: require("./images/marker-icon.png"), //默认图地址
      plotMpt: null,
      drawedShape: [],
      jsonArr: [],
    }
  },
  // watch: {
  //   mapManagementDialog(newVal) {
  //     if (newVal && this.mapInfo && this.mapInfo.location) {
  //       this.locationPoint(this.mapInfo.location.lat,this.mapInfo.location.lng);
  //     }
  //   }
  // },
  mounted() {
    window.locationPoint = (data) => {
      var lng = data.location.lng;
      var lat = data.location.lat;
      this.locationPoint2(lat,lng);
      this.$emit("setLocation", data);
    }
    this.init();
    this.initLocationPoint();
  },
  methods: {
    initLocationPoint() {
      if (this.mapInfo && this.mapInfo.location) {
        this.locationPoint2(this.mapInfo.location.lat,this.mapInfo.location.lng);
      }
    },
    locationPoint2(lat,lng) {
      if(this.centralPoint){
        this.centralPoint.remove();
        this.centralPoint = null;
      }
      // let newPt;
      // if (index === 0) {
      //   let newpt1 = Aqsc.Util.bd09togcj02(lng, lat);
      //   let newpt11 = Aqsc.Util.gcj02towgs84(newpt1[0],newpt1[1])
      //   newPt = new Aqsc.Point(newpt11[0],newpt11[1]);
      // } else if(index === 1) {
      //   let newpt1 = Aqsc.Util.wgs84togcj02(lng, lat);
      //   let newpt11 = Aqsc.Util.gcj02tobd09(newpt1[0],newpt1[1])
      //   newPt = new Aqsc.Point(newpt11[0],newpt11[1]);
      // } else {
      //   newPt = new Aqsc.Point(lng, lat);
      // }
      let newPt = new Aqsc.Point(lng, lat);
      //搜索点的属性参数
      let centralPointOps = {
        imagePath: this.defaultImg, //设置自定义图片路径
        size: new Aqsc.Size(25, 40), //设置图片大小
        draggable: false, //点位移动
        // rightDelete: true,
        // anchorSize: new Aqsc.Size(1, 15),
      };
      //添加搜索点
      this.centralPoint = new Aqsc.MarkerCustomImg(
          newPt,
          centralPointOps
      );
      this.centralPoint.addToMap(this.map);
      let amination = new Aqsc.Amination("red", new Aqsc.Size(20, 20)); //创建动画类，第一个参数为闪动颜色，第二个参数为闪动大小；
      this.centralPoint.enableAnimation(amination,this.map); //设置标注点动画效果，参数为动画颜色
      this.map.location(newPt, 16); // 更换地图的级别
    },
    init() {
      //地图初始化时中心点坐标，第一个参数为经度，第二个参数为纬度（也可设置可选参数options用来定义地图的坐标类型）；
      var pt = new Aqsc.Point(108.172656, 32.061572);
      var options = {  //map构造函数可选参数；
        minZoom: 0, //地图允许显示最小级别；
        maxZoom: 18,//地图允许显示最大级别；
        enableAutoResize: true//地图是否自动适应容器尺寸的变化，默认启动；
      }
      //第一个参数为承载地图对象容器节点对象，第二个参数为地图类型此时添加百度地图作为主地图，
      //目前常用地图类型为Baidu、Tianditu、AMap、Iserver、ArcGIS_Server、Img ，
      //第三个参数为地图初始化中心点位置坐标或城市地点名称，第四个参数为地图初始化级别，第五个参数为可选地图配置参数
      this.map = new Aqsc.Map("map", "Baidu", pt, 6, options);
      //添加百度地图底图图层，设置图层名称和类型，第一个参数为图层名称，
      //第二个参数为图层类型（主要包括vec矢量图层、img影像图层），也可设置第三个options可选参数；
      this.map.addBaiduBaseLayer("shiliang", "vec");
      this.map.disableDoubleClickZoom();//禁止地图双击放大
      let thiz = this;
      //添加双击事件
      this.map.addEventListener('dblclick',function(e){
        let lat = e.latlng.lat;
        let lng = e.latlng.lng;
        let data = {};
        if(thiz.centralPoint){
          thiz.centralPoint.remove(thiz.map);
          thiz.centralPoint = null;
        }
        thiz.locationPoint2(lat,lng);
        thiz.geo = new Aqsc.Geocoder();//创建地理解析类实例
        data["location"] = {lng: lng, lat: lat};
        let pt = new Aqsc.Point(lng, lat);
        thiz.geo.getCityNameByPoint(pt,"1",function(cityName){//根据坐标获取城市名称，第一个参数为点类，第二个参数为执行查询后，返回地名（需要在联网状态下）
          // console.log(cityName);// 根据点坐标获取地址
          data["address"] = cityName;
          thiz.$emit("setLocation", data);
        });
        // alert("双击");
        // console.log(e);//e对象{ type(事件类型), target(事件源), latlng (事件点地理坐标), layerPoint (事件点像素坐标), originalEvent (事件对象) }
      });
    },
    searchPoint() {
      // 之前的数据清空
      this.value = null;
      // 获取input输入框的值
      this.value = document.getElementById("textId").value
      let searchResult = document.getElementsByClassName('search-result')
      if (this.value) {
        searchResult[0].style.display = 'block';
      } else {
        searchResult[0].style.display = 'none';
      }
      // 获取ul
      let ul = document.getElementById('elementUl');
      // 获取ul子元素
      var childs = ul.childNodes
      //顺序删ul子元素
      for (var i = 0, len = childs.length; i < len; i++) {
        ul.removeChild(childs[0])
      }
      //启用地理解析类  搜索地点
      this.geo = new Aqsc.Geocoder();
      //根据地名搜索附近信息
      this.geo.getPointsByName(this.value, "1", 5, 0, (data) => {
        if (data.length > 0) {
          for (let i = 0; i < data.length; i++) {
            // var lng = data[i].location.lng;
            // var lat = data[i].location.lat;

            var li = document.createElement("li");
            li.className = 'elementLi';
            // li.innerHTML = `<div onclick="locationPoint('${lng}','${lat}')">${data[i].name}</div>`;
            li.innerHTML = `<div :class="elementLi" onclick='locationPoint(${JSON.stringify(data[i])})'>${data[i].name}</div>`;
            ul.appendChild(li);
          }
        }
      });
    },
  }
}
</script>

<style scoped>
@import "./gis/core.min.css";
/* 搜索框整体样式 */
.search {
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 1;
  width: 320px;
  height: 40px;
  background: #fff;
  border: 1px solid #059cfb;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  display: flex;
  box-shadow: 3px 3px 5px #666;
}

/* input样式 */
.search .search-value {
  width: 87%;
  height: 100%;
  line-height: 100%;
  text-indent: 15px;
  border: none;
  outline: none;
  box-sizing: border-box;
}

/* input字体样式 */
.search .search-value::-webkit-input-placeholder {
  color: #c0c4cc;
}

/* 点击搜索的放大镜样式 */
.search .click-search {
  width: 13%;
  height: 100%;
  line-height: 40px;
  color: #999;
  border-left: 1px solid #059cfb;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 搜索结果框 */
.search .search-result {
  position: absolute;
  overflow: auto;
  top: 41px;
  left: 0;
  width: 87%;
  height: 130px;
  background: #fff;
  display: none;
}

::v-deep .elementLi {
  cursor: pointer;
  font-size: 12px;
  text-align: left;
  text-indent: 15px;
  height: 30px;
  line-height: 30px;
}

::v-deep .elementLi:hover {
  background-color: #ebebeb;
}

.nav a:link {
  color: red;
}

.nav a:visited {
  color: red;
}

.nav a:hover {
  color: red;
}

.nav a:active {
  color: red;
}
</style>
