<template>
	<div class="bg-el-color" style="position: relative;height: 100%;width: 100%;">
		<MapShipListMap ref="mapShipListMap" :coordinates="coordinates" :style="$store.state.settings.sideTheme == 'theme-dark'? 'opacity: .8;' : ''" />
	</div>
</template>

<script setup>
import MapShipListMap from "@/components/Map/ShipList/map";
import { getHistoricalTrack } from "@/api/shipApi/index";
const { proxy } = getCurrentInstance();
const emit = defineEmits();
const loading = ref(false);
const coordinates = ref([{
    lat: 113.1047683,
    lng: 22.1617233,
    time: proxy.parseTime(new Date(), "{y}-{m}-{d} {h}:{i}:{s}"),
    x0a9: 0,
    x0aA: 0,
}]);
const props = defineProps({
	data: {
		type: String,
		default: ""
	}
});
const { data } = toRefs(props);
const handleGetHistoricalTrack = function(){
	loading.value = true;
	getHistoricalTrack()
	.then((response) => {
		coordinates.value = response;
		loading.value = false;
    })
    .catch((response) => {
		proxy.$modal.error(response.msg);
		loading.value = false;
    });
};
handleGetHistoricalTrack()
</script>