<template>
	<MapMap ref="mapMap" @ready="handleMapReady"/>
</template>

<script setup>
	const emit = defineEmits(["gpsPoints"]);
	import MapMap from "@/components/Map/map";
	import Fill from "ol/style/Fill";
	import VectorLayer from "ol/layer/Vector";
	import VectorSource from "ol/source/Vector";
	import { Style, Icon, Stroke } from "ol/style";
	import { Draw, Modify, Select, Snap } from "ol/interaction";
	import { Polygon, Circle } from "ol/geom";
	import { Feature } from "ol";
	const { proxy } = getCurrentInstance();
	const props = defineProps({
		data: {
			type: Object,
			default: {
				fence_type: 1
			}
		}
	});
	const { data, finishSta } = toRefs(props);
	const map = ref(null);
	let gpsInfos = {
		"lon": [],
		"lat": [],
		"radius": 0
	};
	let mapCircleDraw = null, mapPolygonDraw = null, mapModify = null;
	let source = null;
	let vector = new VectorLayer({ 
		source: source, 
		style: new Style({ 
			fill: new Fill({ 
				color: "rgba(37,241,239,0.2)" ,
			}), 
			stroke: new Stroke({ 
				color: "#264df6", 
				width:2 ,
			}) 
		}) 
	}); 
	function showHysi(_obj){
		var circle, plygon, Polygona = [];
		if(_obj.gpsInfo.lon.length){
			let _lon = _obj.gpsInfo.lon;
			let _lat = _obj.gpsInfo.lat;
			for(let i = 0;i<_lon.length;i++){
				Polygona.push([_lon[i],_lat[i]]);
			}
		}
		var plygon = new Polygon([Polygona]);
		var circle = new Circle(Polygona[0], parseFloat(_obj.gpsInfo.radius)/103360);
		map.value.getView().animate({
			center: Polygona[0],
			duration: 300,
		});
		var feature = new Feature({
			geometry: (_obj.fence_type == 0?circle:plygon)
		});
		source.addFeature(feature);
		mapModify.setActive(true);
	}
	const handleMapReady = () => {
		map.value = proxy.$refs["mapMap"].map;
		if (source == null) {
			source = new VectorSource({ wrapX: false }); 
			vector.setSource(source);
			map.value.addLayer(vector);
		}
	}
	watch(data, (newValue) => {
		source.clear();
		showHysi(newValue);
	}, { deep: true });
</script>
