<!--
  Description: leaflet地图
  Author: 李亚光
  Date: 2023-04-21
 -->
<script lang="ts" setup name="leafletMap">
import L from 'leaflet'
import leaflet from '@/components/map/leaflet.vue'
const $props = defineProps({
  init: {
    type: Array,
    default: () => [],
  },
})
const $emit = defineEmits(['confirm1'])
const publicPath = window.location.href.split('#')[0]
const mapRef = ref()
const complete = (map: any) => {
  // 先判断有无初始坐标
  if ($props.init.length) {
    map.setView([$props.init[1], $props.init[0]], 18)
    const myIcon = L.icon({
      iconUrl: `${publicPath}img/icon-marker.png`,
      iconSize: [25, 40], // 图标的大小
      iconAnchor: [10, 10], // 图标的锚点，即图标的位置应该放置在地图上的位置
    })
    const marker = L.marker([$props.init[1], $props.init[0]], { icon: myIcon })
    mapRef.value.layerAllList.push(marker)
    map.addLayer(marker)
  }
  else {
    map.setView([40.830627, 111.73142], 18)
    const myIcon = L.icon({
      iconUrl: `${publicPath}img/icon-marker.png`,
      iconSize: [25, 40], // 图标的大小
      iconAnchor: [10, 10], // 图标的锚点，即图标的位置应该放置在地图上的位置
    })
    const marker = L.marker([40.830627, 111.73142], { icon: myIcon })
    mapRef.value.layerAllList.push(marker)
    map.addLayer(marker)
    $emit('confirm1', [40.830627, 111.73142])
  }
  map.on('click', (e) => {
    console.log(e, '1')
    mapRef.value.layerAllList.forEach((element: any) => {
      map.removeLayer(element)
    })
    mapRef.value.layerAllList = []
    console.log(e.latlng.lat, 'e.latlng.lat')
    map.setView([e.latlng.lat, e.latlng.lng], 18)
    const myIcon = L.icon({
      iconUrl: `${publicPath}img/icon-marker.png`,
      iconSize: [25, 40], // 图标的大小
      iconAnchor: [10, 10], // 图标的锚点，即图标的位置应该放置在地图上的位置
    })
    const marker = L.marker([e.latlng.lat, e.latlng.lng], { icon: myIcon })
    mapRef.value.layerAllList.push(marker)
    map.addLayer(marker)

    $emit('confirm1', [e.latlng.lng, e.latlng.lat])
  })
}
</script>

<template>
  <div class="box" style="position: relative;overflow: hidden;">
    <leaflet ref="mapRef" :is-dashboard="false" class="map-1" @complete="complete" />
  </div>
</template>

<style lang="scss" scoped>
.map-1 {
  ::v-deep(.btns) {
    display: none;
  }
}

.box {
  position: relative;
}

#result {
  width: 270px;
  position: absolute;
  top: 34px;
  right: 0;
  height: 100px;
}

#map {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: "微软雅黑";
}

.info {
  // padding: 0.5rem 0.7rem;
  margin-bottom: 1rem;
  border-radius: 0.25rem;
  position: absolute;
  top: 0;
  background-color: #fff;
  width: auto;
  min-width: 270px;
  border-width: 0;
  right: 0;
  // box-shadow: 0 2px 6px 0 rgb(240 131 0 / 50%);

  .input-item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    height: 2.2rem;
    border: 1px solid #ccc;
    border-radius: 0.2rem;

    .input-item-prepend {
      margin-right: -1px;
      width: 35%;
      font-size: 13px;
      border-right: 1px solid #666;
      height: 100%;
      display: flex;
      align-items: center;
      background: #b2cefe;

      span {
        text-align: center;
      }
    }

    input {
      width: 60%;
      background: #fff;
      padding: 0.2rem 0.6rem;
      margin-left: 0.3rem;
      border: none;
    }
  }
}
</style>

<style>
/* 隐藏高德logo  */
.amap-logo {
  display: none !important;
}

/* 隐藏高德版权  */
.amap-copyright {
  display: none !important;
}

.amap-marker-label {
  border: 0;
  background-color: transparent;
}
</style>