<template>
  <div class="geo-container">
    <div class="geo-content">
      <div id="map-container"></div>
      <div class="map-search-input">
        <el-input id="tipinput" placeholder="搜索" v-model="inputVal2">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
    </div>
  </div>
</template>
<script>
import Title from "./title.vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import FormItem from "./formItem.vue";
export default {
  components: {
    Title,
    FormItem,
  },
  props: {
    PropInfo: {
      type: Object,
      default: () => {
        return {
          // district: "", // 省市区县
          address: "", // 详细地址
          longitude: "", // 经度
          latitude: "", // 纬度
          // level: null, // 抗震设防烈度
        };
      },
    },
    info: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      map: null,
      geocoder: null,
      inputVal2: "",
      autocomplete: null,
      markers: [], // 标记数组

      geoFormData: this.PropInfo,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    // 初始化地图
    initMap() {
      const _this = this;
      AMapLoader.load({
        key: window.__systemConf.mapKey,
        version: "2.0",
        plugins: ["AMap.Geocoder"],
      }).then((Amap) => {
        _this.map = new Amap.Map("map-container", {
          zoom: 11,
          resizeEnable: true,
          center: [this.geoFormData.longitude, this.geoFormData.latitude],
        });
        this.geocoder = new Amap.Geocoder({
          radius: 1000,
        });
        _this.map.on("click", (e) => {
          console.log(e);
          this.regeoCode(Amap, e.lnglat);
        });
        this.addMarker(
          Amap,
          {
            lng: this.geoFormData.longitude,
            lat: this.geoFormData.latitude,
          },
          this.geoFormData.address
        );
        Amap.plugin(["AMap.PlaceSearch", "AMap.AutoComplete"], () => {
          const autoOptions = {
            input: "tipinput",
          };
          this.autocomplete = new Amap.Autocomplete(autoOptions);

          this.autocomplete.on("select", (e) => {
            console.log(e);
            const location = e.poi.location;
            if (location) {
              this.setLocation(Amap, location);
              this.addMarker(Amap, location, e.poi.name);
              const { district, address } = e.poi;
              // this.geoFormData.district = district;
              this.geoFormData.address = district + address;
              this.geoFormData.longitude = location.lng.toString();
              this.geoFormData.latitude = location.lat.toString();
              // this.geoFormData.level = null;
              this.$emit("change", this.geoFormData);
            }
          });
        });
      });
    },
    getDicData() {},
    /**
     * 设置当前定位
     * @param {*} location
     */
    setLocation(Amap, location) {
      if (location) {
        this.map.setCenter([location.lng, location.lat], true);
      }
    },
    /**
     * 添加标记点
     * @param {*} Amap
     * @param {*} location
     * @param {*} name 标记点的标签内容
     */
    addMarker(Amap, location, name) {
      this.clearMarker();
      const marker = new Amap.Marker({
        position: [location.lng, location.lat],
        title: name,
      });
      marker.setLabel({
        offset: new AMap.Pixel(8, 0), //设置文本标注偏移量
        content: `<div class='info'>${name}</div>`, //设置文本标注内容
        direction: "right", //设置文本标注方位
      });
      this.markers.push(marker);
      this.map.add(marker);
    },
    /**
     * 清除地图所有标记点
     */
    clearMarker() {
      this.markers.forEach((marker) => this.map.remove(marker));
    },
    regeoCode(Amap, lnglat) {
      this.geocoder.getAddress(lnglat, (status, result) => {
        if (status === "complete" && result.regeocode) {
          const address = result.regeocode.formattedAddress;
          console.log(address);
          this.geoFormData.address = address;
          this.geoFormData.longitude = lnglat.lng.toString();
          this.geoFormData.latitude = lnglat.lat.toString();
          this.setLocation(Amap, { lng: lnglat.lng, lat: lnglat.lat });
          this.addMarker(Amap, { lng: lnglat.lng, lat: lnglat.lat }, address);
          this.$emit("change", this.geoFormData);
        } else {
          log.error("根据经纬度查询地址失败");
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.geo-container {
  width: 100%;
  margin-bottom: 24px;
  .geo-content {
    width: 100%;
    height: 100%;
    padding: 0 16px;
    position: relative;
    #map-container {
      width: 100%;
      height: 200px;
    }
    .map-search-input {
      position: absolute;
      top: 12px;
      left: 24px;
      background-color: #fff;
    }
    .form-content {
      margin-top: 24px;
    }
  }
}
/deep/ .amap-marker-label {
  // background-color: red;
  width: 120px;
  // height: 40px;
  // word-wrap: break-word;
  white-space: pre-wrap;
  background: #ffffff;
  border-radius: 4px;
  padding: 8px 4px 8px 8px;
  .info {
    // height: 40px;
    word-wrap: break-word;
  }
}
</style>
