<template>
  <div>
    <el-input v-model="value" placeholder="请选择坐标" readonly @focus="handlerFocus"/>

    <!-- 地图弹窗 -->
    <ed-dialog ref="elsDialog" :close-on-click-modal="false" :closeOnPressEscape="false" :title="title"
                :visible="visible"
                width="65vw" @close="handlerClose" @ok="handlerOk">
      <!-- 查询表单 -->
      <ed-form ref="elsForm" :inline="true" v-model="formData" :form-desc="formDesc">
        <template v-slot:form-btn>
          <el-button icon="el-icon-search" type="primary" @click="handlerSearch">搜索</el-button>
          <el-button icon="el-icon-delete" @click="handlerClear">清空</el-button>
        </template>
      </ed-form>

      <!-- 地图渲染 -->
      <div class="gao-de-map">
        <div id="gao-de-map"></div>
        <div v-show="showPlaceSearch" id="map__result"></div>
      </div>
    </ed-dialog>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";

window._AMapSecurityConfig = {
  securityJsCode: '0be9b3d556aa10ca3b722f97ce0b96c6' // 输入你的jscode
}
/**
 * 地图组件
 *
 * - 示例
 *
 * ```vue
 * <ed-input-map v-model="elsFormData" :options="elsFormOptions">
 * </ed-input-map>
 * ```
 *
 * [](./EdInputMap.md ':include')
 */
export default {
  name: "EdInputMap",
  props: {
    //默认值
    value: {
      type: String,
      default: ""
    },
    //标题
    title: {
      type: String,
      default: "坐标选择器"
    },
    //选项
    options: {
      type: Object
    },
  },

  data() {
    return {
      visible: false,
      map: null, // 地图
      placeSearch: null, // //构造地点查询类
      showPlaceSearch: false, // 是否显示搜索结果
      auto: null, // 搜索框自动完成类
      startIcon: null, // 自定义标记图标属性
      formDesc: [{
        label: '地址',
        prop: "address",
        children: {tags: "el-input", attrs: {id: "mapInput", placeholder: `输入关键字选取地点`}}
      }],
      formData: {},
    }
  },
  watch: {
    options: {
      handler(nVal, oVal) {
        if (nVal) {
          if (nVal.jsCode) {
            // 该写法只推荐在开发阶段，如果在生产阶段建议采用反向代理
            // 官网说明https://lbs.amap.com/api/javascript-api/guide/abc/prepare

          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    /**
     * @description 初始化地图
     */
    initMap() {
      console.log('initMap')
      AMapLoader.load({
        "key": this.options.key,              // 申请好的Web端开发者Key，首次调用 load 时必填
        "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        "plugins": ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Geocoder"],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等

      }).then((AMap) => {
        console.log(AMap)
        // 初始化地图
        this.map = new AMap.Map("gao-de-map", {
          viewMode: "2D",  //  是否为3D地图模式
          zoom: 18,   // 初始化地图级别
          willReadFrequently: true,
          resizeEnable: true
        });

        // 关键字查询
        this.searchMap();

        // 配置标记点
        this.initMarker()

        // 监听鼠标点击事件
        this.map.on("click", this.clickMapHandler);
      }).catch(err => {
        console.log(err)
      });
    },

    // 配置搜索框及搜索结果
    searchMap() {
      // 搜索框自动完成类
      this.auto = new AMap.AutoComplete({
        input: "mapInput", // 使用联想输入的input的id
      });
      //构造地点查询类
      this.placeSearch = new AMap.PlaceSearch({
        pageSize: 10, // 单页显示结果条数
        pageIndex: 1, // 页码
        map: this.map,
        panel: "map__result", // 结果列表将在此容器中进行展示。
        autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        extensions: 'base' //返回基本地址信息
      });

      // 当选中某条搜索记录时触发
      this.auto.on("select", this.selectSite);
    },

    // 配置标记点
    initMarker() {
      if (Object.prototype.hasOwnProperty.call(this.options, 'icons')) {
        const icons = this.options.icons

        //创建marker图标的大小和图片路径
        this.startIcon = new AMap.Icon({
          // 图标尺寸
          size: new AMap.Size(icons.size, icons.size),
          // 图标的取图地址
          image: icons.image,
          // 图标所用图片大小
          imageSize: new AMap.Size(icons.imageSize, icons.imageSize),
          // 图标取图偏移量
          imageOffset: new AMap.Pixel(icons.imageOffset[0], icons.imageOffset[1])
        });
      }
    },

    // 实例化点标记
    setMapMarker(position) {
      this.marker = new AMap.Marker({
        icon: this.startIcon,
        map: this.map,
        position: position,
        offset: new AMap.Pixel(-5, -30),
      });
    },

    // 地图点击事件
    clickMapHandler(e) {
      console.log(e)
      if (this.marker) {
        this.marker.setMap(null);
        this.marker = null;
      }
      this.setMapMarker([e.lnglat.lng, e.lnglat.lat])
    },

    //当选中某条搜索记录时触发
    selectSite(e) {
      console.log(e)
    },
    // 确认
    handlerOk() {

    },

    // 获取焦点时,打开弹窗
    handlerFocus() {
      this.visible = true
      this.$nextTick(() => {
        this.initMap()
      })
    },

    // 关闭
    handlerClose() {
      this.visible = false
    },
    // 清空
    handlerClear() {
    },
    // 搜索
    handlerSearch() {
      this.placeSearch.search(this.formData.address, (status, res) => {
        if (status === 'complete') {
          console.log(status)
          console.log(res)
          this.showPlaceSearch = true
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
@import "../../../style/index";
.gao-de-map {
  height: 50vh;
  position: relative;

  #gao-de-map {
    height: 100%;
  }

  #map__result {
    position: absolute;
    background-color: white;
    height: 100%;
    overflow-y: auto;
    top: 0;
    right: 0;
    width: 280px;
  }
}

</style>
