<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: {
				refuelId: undefined,
				oilName: "",
				mapRows: []
			}
		}
	});
	const { data, finishSta } = toRefs(props);
	const map = ref(null);
	let gpsInfos = {
		"lon": [],
		"lat": []
	};
	let 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(){
		var plygon, Polygona = [];
		let _obj = data.value;
		if(_obj.length){
			for(let i = 0;i<_obj.length;i++){
				Polygona.push([_obj[i].longitude,_obj[i].latitude]);
			}
		}
		var plygon = new Polygon([Polygona]);
		map.value.getView().animate({
			center: Polygona[0],
			duration: 300,
		});
		var feature = new Feature({
			geometry: (plygon)
		});
		source.addFeature(feature);
		mapModify.setActive(true);
	}
	function addInterPolygon() {
		mapPolygonDraw = new Draw({ 
			source: source, 
			type: "Polygon"//Polygon，Circle
		}); 
		map.value.addInteraction(mapPolygonDraw); 
		mapPolygonDraw.on('drawend', function(e) {
			mapPolygonDraw.setActive(false);
			const geometry = e.feature.getGeometry();
			getPiont(geometry);
			mapModify.setActive(true);
		})
	};
	function getPiont(_event){
		let _obj = data.value;
		const corrdinates = _event.flatCoordinates;
		for(let i=0;i<corrdinates.length;i+=2){
			_obj[i]["longitude"] = corrdinates[i];
			_obj[i]["latitude"] = corrdinates[i+1];
		}
		// emit("gpsPoints", gpsInfos);
	}
	//选中修改几何图形
	function selectModify(){
		let mapSelect = new Select({
			multi:false //取消多选
		})
		map.value.addInteraction(mapSelect);
		mapModify = new Modify({
			features: mapSelect.getFeatures()//将选中的要素添加修改功能
		})
		map.value.addInteraction(mapModify)
		//监听要素修改时
		mapModify.on("modifyend",function (evt) {
			let newFeature = evt.features.item(0);
			if(newFeature){
				getPiont(newFeature["geometryChangeKey_"]["target"]);
				// mapModify.setActive(false);//结束编辑
			}
		})
	}
	const handleMapReady = () => {
		map.value = proxy.$refs["mapMap"].map;
		if (source == null) {
			source = new VectorSource({ wrapX: false }); 
			vector.setSource(source);
			map.value.addLayer(vector);
			addInterPolygon();
			selectModify();
			mapModify.setActive(false);
			mapPolygonDraw.setActive(false);
		}
	}
	watch(data, (newValue) => {
		source.clear();
		showHysi();
	}, { deep: true });
</script>
