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

<script setup>
	import { useMap } from '@/hooks/map'
	const { map, marker, initMap, addMarker } = useMap()
	let modelValue = defineModel()
	let props = defineProps({
	  longitude: {
	    type: String,
	    default: ''
	  },
	  latitude: {
	    type: String,
	    default: ''
	  }
	})
	watch(
	  () => modelValue.value,
	  (val) => {
	    if (val) {
	      setTimeout(() => {
			  console.log(props.longitude,props.latitude)
	        initMap('big-car-ship', props.longitude, props.latitude, 17)
			map.value.setTrafficOn()
	      }, 1000)
	    }
	  },
	  { immediate: true }
	)
</script>

<style scoped lang="scss">
	.big-car-ship {
	  flex: 1;
	  height: vh(820);
	}
	.dialog {
	  :deep(.el-dialog) {
	    width: vw(2540);
	    padding: vw(8);
	    background-image: url('@/assets/images/dialog-bg.png') !important;
	    background-size: 100% 100%;
	  }
	  :deep(.el-dialog__header) {
	    padding-bottom: 0 !important;
	  }
	}
	.close {
	  cursor: pointer;
	  position: absolute;
	  right: vw(20);
	  top: vw(20);
	  width: vw(60);
	  z-index: 9999;
	}
</style>