<template>
  <el-form-item
    :label="label"
    :rules="requireRule(required, label)"
    :prop="prop"
  >
    <el-input
      :value="$parent.model[prop] && $parent.model[prop].detail"
      :placeholder="`请选择${label}`"
      :readonly="true"
      style="width: 80%"
    />
    <el-button
      type="primary"
      @click="showMap"
      style="width: 15%; margin-left: 3px"
      >选择</el-button
    >
    <el-dialog
      :visible.sync="visible"
      width="80%"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <input
        v-model="keyword"
        id="tipinput"
        autocomplete="off"
        placeholder="请输入地址"
        style="
          height: 35px;
          width: 100%;
          border: 0.5px solid;
          color: gray;
          margin-bottom: 3px;
        "
      />
      <el-button
        id="btn"
        type="primary"
        @click="handleConfirm"
        native-type="button"
        style="height: 35px; margin-bottom: 5px"
        >确定</el-button
      >
      <div style="height: 600px">
        <div id="container"></div>
      </div>
    </el-dialog>
  </el-form-item>
</template>

<script>
import mixin from "./mixin";

/**
 * 地图选择组件
 */
export default {
  mixins: [mixin],
  props: {
    type: {
      type: String,
    },
    maxlength: {
      type: Number,
      default: 20,
    },
  },
  data() {
    return {
      visible: false,
      keyword: "",
      lat: null,
      lng: null,
      map: null,
    };
  },
  methods: {
    showMap() {
      this.visible = true;
      this.$nextTick(this.initMap);
    },
    handleConfirm() {
      const { lat, lng } = this;
      this.$parent.model[this.prop] = {
        detail: this.keyword,
        latitude: lat,
        longitude: lng,
      };
      this.visible = false;
    },
    initMap() {
      if (this.map) {
        return;
      }
      const map = new AMap.Map("container", {
        resizeEnable: true,
        zoom: 10,
      });
      this.map = map;
      AMap.plugin(
        ["AMap.Scale", "AMap.PlaceSearch", "AMap.AutoComplete"],
        () => {
          map.addControl(new AMap.Scale());
          const auto = new AMap.AutoComplete({ input: "tipinput" });
          auto.on("select", (e) => {
            this.keyword = e.poi.name;
            map.setZoomAndCenter(20, e.poi.location);
            const { lat, lng } = e.poi.location;
            this.lat = lat;
            this.lng = lng;
          });
        }
      );

      AMapUI.loadUI(["misc/PositionPicker"], (PositionPicker) => {
        this.positionPicker = new PositionPicker({
          mode: "dragMap",
          map: map,
          iconStyle: {
            //自定义外观
            url: "//webapi.amap.com/ui/1.0/assets/position-picker2.png", //图片地址
            size: [48, 48], //要显示的点大小，将缩放图片
            ancher: [24, 40], //锚点的位置，即被size缩放之后，图片的什么位置作为选中的位置
          },
        });
        this.positionPicker.on("success", (res) => {
          const {
            position: { lat, lng },
          } = res;
          this.lat = lat;
          this.lng = lng;
        });
        this.positionPicker.start(map.getCenter());
        this.$watch(
          () => this.$parent.model[this.prop],
          (value, oldValue) => {
            if (!oldValue && value) {
              const { detail, latitude, longitude } = value;
              this.keyword = detail;
              this.lat = latitude;
              this.lnt = longitude;
              this.map.setZoomAndCenter(20, [longitude, latitude]);
              this.positionPicker.start(this.map.getCenter());
            }
          },
          { immediate: true }
        );
      });
    },
  },
};
</script>

<style>
#container {
  width: 100%;
  height: 100%;
}
#tipinput {
  display: inline-block;
  width: 70%;
  height: 42px;
  border: none;
  color: #08080a;
  text-indent: 1em;
}
#btn {
  display: inline-block;
  width: 20%;
}
.amap-sug-result {
  z-index: 99999;
}
</style>
