<template>
    <!--地图容器-->
    <section id="map">
      <div id="XSDFXPage" class="XSDFXPage"></div>
      <div id="search" ref="search" v-show="myType == 'create'">
        <input type="text" id="searchPlace" v-model="search" placeholder="请输入地点">
        <div id="searchlist" v-show="isListShow"></div>
      </div>
      <span class="icon-view" v-show="isChange || myType == 'change'">
        <el-button class="background" type="text" @click="changeAdd">修改地址<i class="el-icon-edit"></i></el-button>
      </span>
    </section>
</template>
<script>
import fetch from "@/utils/fetch.js";
export default {
  name: "",
  props: {
    type: {
      type: String,
      default: "create"
    },
    location: {
      type: Object,
      default: function() {
        return {
          lng: 116.4035,
          lat: 39.915
        };
      }
    },
    code: {
      type: String
    }
  },
  data() {
    return {
      search: "",
      myType: false,
      isListShow: false, //列表是否显示
      isChange: false
    };
  },
  mounted() {
    this.myType = this.type;
    //如果纬度不存在重新获取
    if (!this.location.lng) {
      this.location.lng = 116.4035;
      this.location.lat = 39.915;
    }
    this.createMap();
  },
  methods: {
    //修改地址
    changeAdd() {
      this.myType = "create";
      this.createMap();
    },
    //点击事件触发
    getPoint(e, map) {
      let allOverlay = map.getOverlays(),
        _this = this;
      if (allOverlay.length) {
        map.clearOverlays();
      }
      let point = new BMap.Point(e.point.lng, e.point.lat);
      this.addMarker(point, map);
    },
    //添加标记
    addMarker(point, map) {
      let _this = this;
      var marker = new BMap.Marker(point);
      map.addOverlay(marker);
      this.isListShow = false;
      this.postJson("/server/business-os/map", point, res => {
        let code = res.content.result;
        let Provinces =
          code.addressComponent.province +
          "-" +
          code.addressComponent.city +
          "-" +
          code.addressComponent.district;
        let mess;
        if (this.type == "change" && this.myType == "create") {
          mess = "deat";
        } else {
          mess = "";
        }
        if (
          code.addressComponent.adcode == this.code ||
          this.type == "create" ||
          this.code == undefined ||
          this.code == ""
        ) {
          _this.$emit(
            "getPoint",
            code.addressComponent.adcode,
            code.location,
            Provinces,
            mess
          );
        } else {
          map.clearOverlays();
          this.$message.error("项目所在省市区域不可更改！");
        }
      });
    },
    createMap() {
      // 百度地图API功能
      // 创建Map实例
      let _this = this;
      var map = new BMap.Map("XSDFXPage", { enableMapClick: false });
      var geolocation = new BMap.Geolocation();
      // 创建地理编码实例
      var myGeo = new BMap.Geocoder();
      geolocation.getCurrentPosition(function(r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          var pt = r.point;
          // 根据坐标得到地址描述
          myGeo.getLocation(pt, function(result) {
            if (result) {
              var addComp = result.addressComponents;
            }
          });
        }
      });
      // 初始化地图,设置中心点坐标和地图级别
      map.centerAndZoom(
        new BMap.Point(_this.location.lng, _this.location.lat),
        11
      );
      // 添加地图类型控件
      // 设置地图显示的城市 此项是必须设置的
      map.setCurrentCity("北京");
      // 开启鼠标滚轮缩放
      map.enableScrollWheelZoom(true);
      setTimeout(function() {
        map.setZoom(18);
      }, 4000);
      /************************************************
            添加工具条、比例尺控件
            *************************************************/
      map.addControl(new BMap.NavigationControl());
      map.addControl(
        new BMap.NavigationControl({
          anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
          type: BMAP_NAVIGATION_CONTROL_SMALL
        })
      );
      /************************************************
            添加自定义控件类，放大ZoomControl
            *************************************************/

      if (_this.myType == "create") {
        //添加事件监听click事件
        map.addEventListener("click", function(e) {
          _this.getPoint(e, map);
        });

        //添加检索触发
        var ac = new BMap.Autocomplete({
          //建立一个自动完成的对象
          input: "searchPlace",
          location: map
        });

        //创建搜索实例
        var local = new BMap.LocalSearch(map, {
          renderOptions: {
            map: map,
            panel: "searchlist"
          }
        });

        ac.addEventListener("onconfirm", function(e) {
          //鼠标点击下拉列表后的事件
          var _value = e.item.value;
          var addr =
            _value.business +
            _value.province +
            _value.city +
            _value.district +
            _value.street +
            _value.streetNumber;
          searchPlace(addr);
        });
      } else {
        this.addMarker(this.location, map);
      }

      //产生搜索
      function searchPlace(value) {
        _this.isListShow = true;
        local.search(value);
      }
    }
  }
};
</script>
<style lang="scss">
#map {
  position: relative;
  .XSDFXPage {
    width: 100%;
    height: 300px;
    overflow: hidden;
    margin: 0;
    font-family: "微软雅黑";
  }
  #search {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 30%;
    #searchlist {
      width: 100%;
      max-height: 400px;
      overflow-y: auto;
      background-color: #fff;
    }
  }
  .background {
    background-color: #fff;
    padding: 5px 5px;
  }
  input {
    border: 1px solid #ccc;
    padding-left: 5px;
    width: 100%;
    height: 30px;
    border-radius: 3px;
  }
  .icon-view {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 999;
  }
}
.tangram-suggestion-main {
  max-height: 400px;
  overflow-y: auto;
  z-index: 9999;
}
</style>