<template>
  <el-dialog v-model="visible" title="请选择位置">
    <el-form label-position="right" label-width="50px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="坐标">
            <el-input disabled :model-value="currentLongitude || longitude" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="10px">
            <el-input disabled :model-value="currentLatitude || latitude" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div
      v-loading="loading"
      element-loading-text="地图正在加载中..."
      element-loading-background="rgba(0, 0, 0, 0.5)"
    >
      <div id="map_container" style="width: 100%; height: 500px" />
    </div>
    <template #footer>
      <el-button @click="fnClose">取消</el-button>
      <el-button type="primary" @click="fnConfirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { useVModels } from "@vueuse/core";
import { nextTick, onBeforeUnmount, ref, watch } from "vue";

let mapInstance;
const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
  longitude: {
    type: [Number, String],
    required: true,
    default: "",
  },
  latitude: {
    type: [Number, String],
    required: true,
    default: "",
  },
});
const emits = defineEmits([
  "update:visible",
  "update:longitude",
  "update:latitude",
]);
const { visible, longitude, latitude } = useVModels(props, emits);
const loading = ref(false);
const currentLongitude = ref("");
const currentLatitude = ref("");
const fnMapInit = async () => {
  loading.value = true;
  await nextTick();
  mapInstance = new window.BMapGL.Map("map_container");
  mapInstance.centerAndZoom(
    new window.BMapGL.Point(
      props.longitude || "116.3972282409668",
      props.latitude || "39.90960456049752"
    ),
    16
  );
  mapInstance.enableScrollWheelZoom(true);
  mapInstance.setMapStyleV2({
    styleId: "6f501abeb2a0cc0d961d110b9407b127",
  });
  loading.value = false;
  if (props.longitude && props.latitude) {
    const point = new window.BMapGL.Point(props.longitude, props.latitude);
    const marker = new window.BMapGL.Marker(point);
    mapInstance.addOverlay(marker);
  }
  mapInstance.addEventListener("click", function (event) {
    mapInstance.clearOverlays();
    const point = new window.BMapGL.Point(event.latlng.lng, event.latlng.lat);
    const marker = new window.BMapGL.Marker(point);
    mapInstance.addOverlay(marker);
    currentLatitude.value = event.latlng.lat;
    currentLongitude.value = event.latlng.lng;
  });
};
const fnClose = () => {
  visible.value = false;
};
const fnConfirm = () => {
  latitude.value = currentLatitude.value;
  longitude.value = currentLongitude.value;
  fnClose();
};
const stop = watch(
  () => props.visible,
  (val) => {
    if (val && !mapInstance) {
      fnMapInit();
      stop && stop();
    }
  },
  {
    immediate: true,
  }
);
onBeforeUnmount(() => {
  if (mapInstance) {
    mapInstance.destroy();
    mapInstance = null;
  }
});
</script>

<style scoped lang="scss"></style>
