<template>
	<div ref="mapContainer" style="width: 100%; height: 100%">
		<q-menu touch-position context-menu>
			<q-list dense style="min-width: 100px">
				<q-item clickable v-close-popup>
					<q-item-section @click="$emit('flyTo')">跳转</q-item-section>
				</q-item>
				<q-item clickable v-close-popup>
					<q-item-section @click="$emit('remove')">删除</q-item-section>
				</q-item>
			</q-list>
		</q-menu>
	</div>
</template>
<script lang="ts" setup>
	import { onMounted, ref } from 'vue';
	import useOption from '../../hook/useOption';
	import useMap from '../../hook/useMap';
	import useTileLayer from '../../hook/useTileLayer';
	import 'leaflet/dist/leaflet.css';
	import { useResizeObserver } from '@vueuse/core';

	const mapContainer = ref<HTMLElement>();
	const { heatmap } = useOption();
	const { gaodeChart } = useTileLayer();

	onMounted(() => {
		if (!mapContainer.value) return;
		const { map } = useMap(mapContainer.value, heatmap({ leaflet: { center: [116.396226, 39.914797], zoom: 13 } }));
		gaodeChart.addTo(map);
		useResizeObserver(mapContainer, () => map.invalidateSize(true));
	});
</script>
