<template>
	<q-menu touch-position context-menu>
		<q-list dense style="min-width: 100px">
			<q-item clickable v-close-popup>
				<q-item-section @click="addPoint">添加标点</q-item-section>
			</q-item>
			<q-item clickable v-close-popup>
				<q-item-section @click="addDev">添加设备</q-item-section>
			</q-item>
		</q-list>
	</q-menu>
</template>
<script setup lang="ts">
	import { onMounted, PropType } from 'vue';
	import { useMarkStore } from '../store/useMarkStore';
	import { LeafletMouseEventHandlerFn } from 'leaflet';

	const { marks } = useMarkStore();

	const emit = defineEmits(['addPoint', 'addDev']);
	const props = defineProps({ map: Object as PropType<L.Map> });

	onMounted(() => {});

	function addPoint() {
		const { map } = props;
		if (!map) return;
		const pushMark: LeafletMouseEventHandlerFn = (e) => {
			marks.push({ latlng: [e.latlng.alt || 0, e.latlng.lng || 0], type: 'localtion', opacity: 1, title: '新地标' });
		};
		map.addEventListener('contextmenu', pushMark);
		return map.removeEventListener('contextmenu', pushMark);
	}
	function addDev() {
		const { map } = props;
		if (!map) return;
		const pushMark: LeafletMouseEventHandlerFn = (e) => {
			marks.push({ latlng: [e.latlng.alt || 0, e.latlng.lng || 0], type: 'equipment', opacity: 1, title: '新设备' });
		};
		map.addEventListener('contextmenu', pushMark);
		return map.removeEventListener('contextmenu', pushMark);
	}
</script>
