'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var AMapLoader = require('@amap/amap-jsapi-loader');
var elementPlus = require('element-plus');

"use strict";
const _hoisted_1 = { class: "search-box" };
var script = /* @__PURE__ */ vue.defineComponent({
  __name: "map",
  props: {
    isFullscreen: {
      type: Boolean,
      default: false
    },
    modelValue: {
      type: Object,
      default() {
        return {};
      }
    },
    mapKey: {
      type: String,
      default: ""
    }
  },
  emits: ["update:modelValue"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const map = vue.shallowRef();
    const location = vue.computed({
      get() {
        return props.modelValue;
      },
      set(val) {
        console.log(val);
        emit("update:modelValue", val);
      }
    });
    vue.watch(location, (val) => {
      if (val.longitude && val.latitude) {
        drawMarker(val);
      }
    });
    vue.watch(
      () => props.isFullscreen,
      () => {
        setTimeout(() => {
          map.value.resize();
        }, 100);
      }
    );
    const keyword = vue.ref("");
    let placeSearch, AMapObj, marker, geocoder;
    function initMap() {
      AMapLoader.load({
        key: props.mapKey,
        // 申请好的Web端Key，首次调用 load 时必填
        version: "2.0"
      }).then((AMap) => {
        AMapObj = AMap;
        map.value = new AMap.Map("mapcontainer");
        map.value.on("click", onMapClick);
        if (location.value.longitude) {
          drawMarker(location.value);
        }
        AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.Geolocation", "AMap.PlaceSearch", "AMap.Geocoder"], () => {
          const toolbar = new AMap.ToolBar();
          const scale = new AMap.Scale();
          const geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,
            //是否使用高精度定位，默认:true
            timeout: 1e4,
            //超过10秒后停止定位，默认：5s
            position: "RT",
            //定位按钮的停靠位置
            buttonOffset: new AMap.Pixel(10, 20),
            //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: true
            //定位成功后是否自动调整地图视野到定位点
          });
          geocoder = new AMap.Geocoder({
            city: "\u5168\u56FD"
          });
          map.value.addControl(geolocation);
          map.value.addControl(toolbar);
          map.value.addControl(scale);
          placeSearch = new AMap.PlaceSearch({
            map: map.value,
            city: "",
            pageSize: 30,
            // 单页显示结果条数
            pageIndex: 1,
            // 页码
            citylimit: false,
            // 是否强制限制在设置的城市内搜索
            autoFitView: true
          });
        });
        AMap.Event.addListener(placeSearch, "markerClick", function(e) {
          location.value.longitude = e.data.location.lng;
          location.value.latitude = e.data.location.lat;
          location.value.name = e.data.name;
        });
      });
    }
    vue.onMounted(() => {
      initMap();
      setTimeout(() => {
        const { longitude, latitude } = location.value;
        if (longitude && latitude) {
          map.value.setZoomAndCenter(16, [longitude, latitude]);
        }
      }, 500);
    });
    function handleSearch(queryString, cb) {
      placeSearch.search(queryString, (status, result) => {
        if (result && typeof result === "object" && result.poiList) {
          const list = result.poiList.pois;
          list.forEach((item) => {
            item.value = item.name;
            item.label = item.name;
          });
          cb(list);
        } else {
          cb([]);
        }
      });
    }
    function onMapClick(e) {
      const { lng, lat } = e.lnglat;
      geocoder.getAddress([lng, lat], (status, result) => {
        if (status === "complete" && result.info === "OK") {
          const { addressComponent, formattedAddress } = result.regeocode;
          let { city, province, district } = addressComponent;
          if (!city) {
            city = province;
          }
          location.value = {
            longitude: lng,
            latitude: lat,
            address: formattedAddress,
            zone: [province, city, district]
          };
        }
      });
    }
    function handleSelect(item) {
      const { pname, cityname, adname, address, name } = item;
      const { lng, lat } = item.location;
      location.value = {
        longitude: lng,
        latitude: lat,
        address,
        zone: [pname, cityname, adname],
        name
      };
      map.value.setZoomAndCenter(16, [lng, lat]);
    }
    function drawMarker(val = location.value) {
      const { longitude, latitude } = location.value || val;
      console.log(longitude, latitude);
      if (marker) {
        marker.setMap(null);
      }
      marker = new AMapObj.Marker({
        position: new AMapObj.LngLat(longitude, latitude),
        anchor: "bottom-center"
      });
      map.value.add(marker);
    }
    __expose({
      handleSearch,
      handleSelect
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock(
        "div",
        {
          class: "me-input-gps__map",
          style: vue.normalizeStyle({ height: __props.isFullscreen ? "100%" : "400px", width: "100%" })
        },
        [
          _cache[3] || (_cache[3] = vue.createElementVNode(
            "div",
            { id: "mapcontainer" },
            null,
            -1
            /* CACHED */
          )),
          vue.createElementVNode("div", _hoisted_1, [
            vue.createVNode(vue.unref(elementPlus.ElAutocomplete), {
              modelValue: keyword.value,
              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => keyword.value = $event),
              "fetch-suggestions": handleSearch,
              "trigger-on-focus": false,
              clearable: "",
              placeholder: "\u8F93\u5165\u57CE\u5E02+\u5173\u952E\u5B57\u641C\u7D22",
              onSelect: handleSelect,
              style: { "width": "300px" }
            }, null, 8, ["modelValue"]),
            vue.createVNode(vue.unref(elementPlus.ElInput), {
              modelValue: location.value.longitude,
              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => location.value.longitude = $event),
              placeholder: "\u70B9\u51FB\u5730\u56FE\u9009\u62E9\u7ECF\u5EA6",
              maxlength: "15",
              clearable: "",
              style: { "width": "150px", "margin": "0 5px" }
            }, null, 8, ["modelValue"]),
            vue.createVNode(vue.unref(elementPlus.ElInput), {
              modelValue: location.value.latitude,
              "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => location.value.latitude = $event),
              placeholder: "\u70B9\u51FB\u5730\u56FE\u9009\u62E9\u7EAC\u5EA6",
              maxlength: "15",
              clearable: "",
              style: { "width": "150px" }
            }, null, 8, ["modelValue"])
          ])
        ],
        4
        /* STYLE */
      );
    };
  }
});

exports.default = script;
//# sourceMappingURL=map.vue2.js.map
