<template>
  <div class="dialog">
    <el-dialog v-model="modelValue" align-center :modal="false" :show-close="false">
      <div id="big-car-ship" class="big-car-ship" />
      <img class="close" src="@/assets/images/close.png" @click="modelValue = false" />
    </el-dialog>
  </div>
</template>

<script setup>
  import carIcon from '@/assets/images/car.png'
  import shipIcon from '@/assets/images/ship.png'
  import { useMap } from '@/hooks/map'

  let modelValue = defineModel()
  const { map, initMap, addMarker } = useMap()

  watch(
    () => modelValue.value,
    (val) => {
      if (val && !map.value) {
        setTimeout(() => {
          initMap('big-car-ship', 109.491961, 31.024285, 16)
          addMarker(carIcon, [109.491045, 31.028725], [36, 50])
          addMarker(carIcon, [109.483266, 31.024718], [36, 50])
          addMarker(shipIcon, [109.479062, 31.021499], [36, 50])
          addMarker(shipIcon, [109.488907, 31.017476], [36, 50])
        }, 500)
      }
    }
  )
</script>

<style scoped lang="scss">
  :deep(.BMap_cpyCtrl) {
    display: none;
  }
  :deep(.anchorBL) {
    display: none;
  }
  .dialog {
    :deep(.el-dialog) {
      width: vw(2540);
      height: vh(900);
      padding: 0;
    }
    :deep(.el-dialog__header) {
      padding-bottom: 0 !important;
    }
  }
  .big-car-ship {
    width: vw(2540);
    height: vh(900);
  }
  .close {
    cursor: pointer;
    position: absolute;
    right: vw(20);
    top: vh(20);
    width: vw(60);
    z-index: 9999;
  }
</style>
