<!--
  Description: 展示位置
  Author: 李亚光
  Date: 2025-01-02
 -->
<script lang="ts" setup name="showMapPosition">
import AMap from '@/components/map/index.vue'
const dialogFormVisible = ref(false) // 对话框是否显示

// 初始化对话框
const mapRef = ref()
// 地图是否加载完成
const completeMapFlag = ref(false)
const init = ref(false)
const position = ref<string[]>(['116.397428', '39.90923'])
const initDialog = (location: string[]) => {
  position.value = location
  dialogFormVisible.value = true
  if (completeMapFlag.value === true) {
    mapRef.value.map.setCenter(location)
    mapRef.value.removeMarker()
    mapRef.value.addMarker({
      position: location,
      content: '',
      label: '',
    })
  }
  else {
    init.value = true
  }
}
const completeMap = () => {
  completeMapFlag.value = true
  if (init.value) {
    mapRef.value.map.setCenter(position.value)
    mapRef.value.addMarker({
      position: position.value,
      content: '',
      label: '',
    })
  }
}
defineExpose({
  initDialog,
})
const cancel = () => {
  dialogFormVisible.value = false
}

const resetMap = () => {
  mapRef.value.map.setCenter(position.value)
  mapRef.value.map.setZoom(17.5)
}
</script>

<template>
  <van-popup v-model:show="dialogFormVisible" round closeable style="width: 96%;">
    <div style="position: relative;">
      <div style="width: 100%;height: 50vh;">
        <a-map ref="mapRef" :zoom="17.5" @complete="completeMap" />
      </div>
      <div class="reset-icon" @click="resetMap">
        <div class="icon"></div>
      </div>
    </div>
  </van-popup>
</template>

<style lang="scss" scoped>
::v-deep(.van-popup__close-icon) {
  color: #000 !important;
}
.reset-icon{
  width: 30px;
  height: 30px;
  position: absolute;
  bottom: 10px;
  right: 16px;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
  background-color: #fff;
  .icon {
    width: 24px;
    height: 24px;
    background: url('@/assets/icons/icon-location_current.svg') no-repeat center center / cover;
  }
}

.el-dialog {
  width: 700px;
}

.el-select {
  width: 100%;
}
</style>