<template>
  <div class="geo-container">
    <Title name="地理信息" />
    <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 class="form-content">
        <FormItem label="省市区县" :initValue="geoFormData.district" />
        <FormItem label="详细地址" :initValue="geoFormData.address" />
        <el-row>
          <el-col :span="12">
            <FormItem
              label="经度"
              :initValue="geoFormData.lng"
              formType="input-unit"
              unit="度"
            />
          </el-col>
          <el-col :span="12"
            ><FormItem
              label="纬度"
              :initValue="geoFormData.lat"
              formType="input-unit"
              unit="度"
          /></el-col>
        </el-row>
        <FormItem
          label="抗震设防烈度"
          :initValue="geoFormData.level"
          formType="select"
        />
      </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,
  },
  data() {
    return {
      map: null,
      inputVal2: "",
      autocomplete: null,
      markers: [], // 标记数组

      geoFormData: {
        // 地理信息数据
        district: "", // 省市区县
        address: "", // 详细地址
        lng: "", // 经度
        lat: "", // 纬度
        level: null, // 抗震设防烈度
      },
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    // 初始化地图
    initMap() {
      AMapLoader.load({
        key: window.__systemConf.mapKey,
        version: "2.0",
        plugins: [],
      }).then((Amap) => {
        this.map = new Amap.Map("map-container", {
          zoom: 11,
          resizeEnable: true,
        });
        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(location);
              this.addMarker(Amap, location, e.poi.name);
              const { district, address } = e.poi;
              this.geoFormData.district = district;
              this.geoFormData.address = address;
              this.geoFormData.lng = location.lng.toString();
              this.geoFormData.lat = location.lat.toString();
              this.geoFormData.level = null;
            }
          });
        });
      });
    },
    getDicData() {},
    /**
     * 设置当前定位
     * @param {*} location
     */
    setLocation(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(0, 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));
    },
  },
};
</script>
<style lang="less" scoped>
.geo-container {
  width: 100%;
  .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;
}
</style>
