<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, LineString } from "ol/geom";
	import { Feature } from "ol";
	import { transform } from 'ol/proj';
	import { getLength, getDistance } from 'ol/sphere';
	const { proxy } = getCurrentInstance();
	const props = defineProps({
		data: {
			type: Object,
			default: {
				operateType: "edit",
				mapRows: []
			}
		},
		finishSta: {
			type: Boolean,
			default: false
		}
	});
	const { data, finishSta } = toRefs(props);
	const map = ref(null);
	let gpsInfos = [];
	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 addInterPolygon() {
		mapPolygonDraw = new Draw({ 
			source: source, 
			type: "Polygon"//Polygon\
		}); 
		map.value.addInteraction(mapPolygonDraw); 
		mapPolygonDraw.on('drawend', function(e) {
			mapPolygonDraw.setActive(false);
			const geometry = e.feature.getGeometry();
			getPiont(geometry, "end");
			mapModify.setActive(true);
		})
	};
	//选中修改几何图形
	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);//结束编辑
			}
		})
	}
	// 获取绘制的经纬度点
	function getPiont(_event){
		const corrdinates = _event.flatCoordinates;
		let _obj = JSON.parse(JSON.stringify(gpsInfos));
		if(_obj.length == (parseInt(corrdinates.length)/2)){
			for(let i=0;i<corrdinates.length;i+=2){
				_obj[i/2]["longitude"] = corrdinates[i];
				_obj[i/2]["latitude"] = corrdinates[i+1];
			}
		}else if(_obj.length < (parseInt(corrdinates.length)/2)){
			for(let i=0;i<corrdinates.length;i+=2){
				let _item = _obj.filter(item => (item.longitude == corrdinates[i]&&item.latitude == corrdinates[i+1]));
				if(!_item.length){
					_obj.splice(i/2, 0, {
						oilName: "ECA点-"+(_obj.length + 1),
						longitude: corrdinates[i],
						latitude: corrdinates[i+1],
					})
				}
			}
		}
		gpsInfos = _obj;
		emit("gpsPoints", gpsInfos);
	}
	function showHysi(_obj){
		var plygon, Polygona = [];
		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);
		// console.log(data.value)
		if(data.value.operateType == "edit"){
			mapModify.setActive(true);
		}else{
			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);
			// showHysi();
		}
	}
	watch(data, (newValue) => {
		source.clear();
		if(newValue.mapRows&&newValue.mapRows.length){
			gpsInfos = newValue.mapRows;
			showHysi(newValue.mapRows);
		}else if(newValue.operateType&&newValue.operateType == "add"){
			mapModify.setActive(false);
			mapPolygonDraw.setActive(true);
		}
	}, { deep: true });
	watch(finishSta, (newValue) => {
		if(newValue){
			emit("gpsPoints", gpsInfos);
			mapModify.setActive(false);
		}
	});
</script>
