<template>
  <div style="height: 100%;">
    <div id="map" style="width: 100%; height: 100%;overflow: hidden;z-index: 1;"></div>
    <!-- 搜索框 -->
    <div class="search" v-if="!isView">
      <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-component",
  props: {
    mapInfo: {
      type: Object,
      default: () => {
        return {};
      }
    },
    ptArea: {
      type: String,
      default: ""
    },
    isView: {
      type: Boolean,
      default: false
    },
    color: { // 边框颜色
      type: String,
      default: "#3388ff"
    },
    fillColor: { // 填色
      type: String,
      default: "#3388ff"
    },
    operate: {
      type: String,
      default: "add"
    },
    type: { // 组件类型 地图标点(spot)、区域轮廓(regionalContour) 默认地图标点
      type: String,
      default: "spot"
    }
  },
  data() {
    return {
      map: null,
      geo: null,
      value: null,
      centralPoint: null,
      dotLocationDefaultImg: require("./images/marker-icon.png"), //定位图地址
      delDefaultImg: require("./images/deleteIcon.png"), // 删除图地址
      plotMpt: null,
      latAndLngArrStr: "", // 绘制点坐标
      polygon: null
    }
  },
  watch: {
    // mapInfo() {
    //   this.initLocationPoint();
    // }
  },
  mounted() {
    window.locationPoint = (data) => {
      let lng = data.location.lng;
      let lat = data.location.lat;
      this.locationPoint2(lng, lat);
      if (this.type === 'spot') {
        this.$emit("setLocation", data, this.type);
      }
    }
    this.init();
  },
  methods: {
    initLocationPoint() {
      if (this.type === 'spot') {
        if (this.mapInfo && this.mapInfo.location && this.validateLongitude(this.mapInfo.location.lng) && this.validateLatitude(this.mapInfo.location.lat)) {
          this.locationPoint2(this.mapInfo.location.lng,this.mapInfo.location.lat);
          let vm = this;
          vm.geo = new Aqsc.Geocoder();//创建地理解析类实例
          let pt = new Aqsc.Point(vm.mapInfo.location.lng, vm.mapInfo.location.lat);
          vm.geo.getCityNameByPoint(pt,"1",function(cityName){//根据坐标获取城市名称，第一个参数为点类，第二个参数为执行查询后，返回地名（需要在联网状态下）
            // console.log(cityName);// 根据点坐标获取地址
            // vm.mapInfo.location["address"] = cityName;
            vm.$set(vm.mapInfo.location, "address", cityName);
            vm.$emit("setLocation", vm.mapInfo, vm.type);
          });
        }
      } else if (this.type === 'regionalContour') {
        let vm = this;
        if (vm.ptArea) {
          let options1={
            color:vm.color,//设置描边线颜色，也可以使用色号（#3388ff）设置；
            weight:3,//设置描边线的宽度，以像素为单位；
            // opacity:0.5,//设置描边线的透明度，取值范围为0-1；
            // fill:true,//是否用颜色填充路径，此处使用；
            fillColor:vm.fillColor,//设置填充路 径的颜色；
            // fillOpacity:0.6//设置填充路径的透明度；
          }

          vm.polygon =  new Aqsc.Polygon(vm.ptArea,options1);//创建一个多边形地图实例，第一个参数为点类数组，第二个参数为可选参数
          vm.polygon.addToMap(vm.map);//将多边形添加到地图上；
          //用给定的地理点数组替换多边形中的所有点。坐标字符串（每个坐标通过分号隔开）或地理点类数组
          if (!vm.isView) {
            vm.polygon.enableEdit(vm.delDefaultImg, vm.map);
            vm.polygon.onEditMove(function(e){
              vm.latAndLngArrStr = "";
              if (e.info.edit._latlngs && e.info.edit._latlngs.length > 0) {
                e.info.edit._latlngs[0].forEach(item => {
                  vm.latAndLngArrStr += item.lng + "," + item.lat + ";";
                });
                vm.$emit("setLocation", vm.latAndLngArrStr.slice(0, -1), vm.type);
              }
            },vm.map);
            vm.polygon.onEditDeleted(function(e){
              vm.drawRegionalContour();
            });
          }
          this.map.fitBounds(vm.polygon.getBounds());
        }
      }
    },
    locationPoint2(lng, lat) {
      if (this.type === 'spot') {
        if(this.centralPoint){
          this.centralPoint.remove(this.map);
          this.centralPoint = null;
        }
        let newPt = new Aqsc.Point(lng, lat);
        //搜索点的属性参数
        let centralPointOps = {
          imagePath: this.dotLocationDefaultImg, //设置自定义图片路径
          size: new Aqsc.Size(25, 40), //设置图片大小
          draggable: false, //点位移动
        };
        //添加搜索点
        this.centralPoint = new Aqsc.MarkerCustomImg(
            newPt,
            centralPointOps
        );
        this.centralPoint.addToMap(this.map);
        let animation = new Aqsc.Amination("red", new Aqsc.Size(20, 20)); //创建动画类，第一个参数为闪动颜色，第二个参数为闪动大小；
        this.centralPoint.enableAnimation(animation,this.map); //设置标注点动画效果，参数为动画颜色
        this.map.location(newPt, 16); // 更换地图的级别
      } else if (this.type === 'regionalContour') {
        let newPt = new Aqsc.Point(lng, lat);
        this.map.location(newPt, 16); // 更换地图的级别
      }
    },
    init() {
      //地图初始化时中心点坐标，第一个参数为经度，第二个参数为纬度（也可设置可选参数options用来定义地图的坐标类型）；
      let pt = new Aqsc.Point(108.172656, 32.061572);
      let 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();//禁止地图双击放大
      if (this.type === 'regionalContour') {
        if (this.operate === 'add') {
          this.drawRegionalContour();
        } else {
          if (this.ptArea) {
            this.initLocationPoint();
          } else {
            this.drawRegionalContour();
          }
        }
      } else if (this.type === 'spot') {
        let vm = this;
        if (!vm.isView) {
          //添加双击事件
          vm.map.addEventListener('dblclick',function(e){
            let lat = e.latlng.lat;
            let lng = e.latlng.lng;
            let data = {};
            if(vm.centralPoint){
              vm.centralPoint.remove(vm.map);
              vm.centralPoint = null;
            }
            vm.locationPoint2(lng, lat);
            vm.geo = new Aqsc.Geocoder();//创建地理解析类实例
            data["location"] = {lng: lng, lat: lat};
            let pt = new Aqsc.Point(lng, lat);
            vm.geo.getCityNameByPoint(pt,"1",function(cityName){//根据坐标获取城市名称，第一个参数为点类，第二个参数为执行查询后，返回地名（需要在联网状态下）
              // console.log(cityName);// 根据点坐标获取地址
              data.location["address"] = cityName;
              vm.$emit("setLocation", data, vm.type);
            });
          });
        }
        vm.initLocationPoint();
      }
    },
    /**
     * 绘制区域轮廓
     */
    drawRegionalContour(){
      let vm = this;
      if (!vm.isView) {
        vm.plotShape = new Aqsc.PlotShape(vm.map, "polygon", {
              //点击已绘制图形是否进入编辑状态
              isEdit: true,
              deleteIconPath:vm.delDefaultImg,
              style: {
                fillColor: vm.fillColor, color: vm.color, weight: "3"//绘制图形样式
              }
            }
        );
        vm.plotShape.enable();
        vm.plotShape.onDeleteSucceeded(function(e) {
          vm.plotShape.remove();
          vm.plotShape = null;
          vm.drawRegionalContour();
        });
        vm.plotShape.onEditSucceeded(function(e) {
          vm.latAndLngArrStr = "";
          if (e.edit._latlngs && e.edit._latlngs.length > 0) {
            e.edit._latlngs[0].forEach(item => {
              vm.latAndLngArrStr += item.lng + "," + item.lat + ";";
            });
            vm.$emit("setLocation", vm.latAndLngArrStr.slice(0, -1),vm.type);
          }
        });
        vm.plotShape.onDrawSucceeded(function(e) {
          vm.latAndLngArrStr = "";
          if (e.layer._latlngs && e.layer._latlngs.length > 0) {
            e.layer._latlngs[0].forEach(item => {
              vm.latAndLngArrStr += item.lng + "," + item.lat + ";";
            });
            vm.$emit("setLocation", vm.latAndLngArrStr.slice(0, -1),vm.type);
          }
        });
      }
    },
    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);
          }
        }
      });
    },
    /**
     * 经度验证
     * @param lng
     * @returns {boolean}
     */
    validateLongitude(lng) {
      const longitudeRegex = /^(\-)?(0?\d{1,2}\.\d+|1(\d)\d{1}\.\d+|180(\.0)?)$/;
      return longitudeRegex.test(lng);
    },
    /**
     * 纬度验证
     * @param lat
     * @returns {boolean}
     */
    validateLatitude(lat) {
      const latitudeRegex = /^(\-)?\d{1,2}\.\d+|90(\.0)?$/;
      return latitudeRegex.test(lat);
    }
  }
}
</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>
