<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, 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: {
				name: "",
				pid: 0,
				fence_type: "0"
			}
		},
		finishSta: {
			type: Boolean,
			default: false
		}
	});
	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 addInterCircle() {
		mapCircleDraw = new Draw({ 
			source: source, 
			type: "Circle"
		}); 
		map.value.addInteraction(mapCircleDraw); 
		mapCircleDraw.on('drawend', function(e) {
			mapCircleDraw.setActive(false);
			const geometry = e.feature.getGeometry();
			getPiont(geometry);
			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 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){
		if(data.value.fence_type == 0){
			const _lonlat = _event.getCenter();
			const _radius = _event.getRadius()*103360;
			gpsInfos = {
				"lon": [_lonlat[0]],
				"lat": [_lonlat[1]],
				"radius": _radius
			};
		}else if(data.value.fence_type == 1){
			const corrdinates = _event.flatCoordinates;
			let _lon = [], _lat = [];
			for(let i=0;i<corrdinates.length;i+=2){
				let xy = [corrdinates[i],corrdinates[i+1]];
				_lon.push(corrdinates[i]);
				_lat.push(corrdinates[i+1]);
			}
			gpsInfos = {
				"lon": _lon,
				"lat": _lat,
				"radius": 0
			};
		}
		// console.log(gpsInfos)
	}
	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);
			addInterCircle(); 
			addInterPolygon(); 
			selectModify();
			mapModify.setActive(false);
			mapCircleDraw.setActive(false);
			mapPolygonDraw.setActive(false);
			// showHysi();
		}
	}
	watch(data, (newValue) => {
		if(newValue.operate != undefined&&!newValue.operate){
			source.clear();
			mapModify.setActive(false);
			mapCircleDraw.setActive(false);
			mapPolygonDraw.setActive(false);
			if(newValue.fence_type != null){
				if(newValue.fence_type == 0){
					mapCircleDraw.setActive(true);
				}else{
					mapPolygonDraw.setActive(true);
				}
			}
		}else if(newValue.gpsInfo != undefined){
			showHysi(newValue);
		}
	}, { deep: true });
	watch(finishSta, (newValue) => {
		if(newValue){
			emit("gpsPoints", gpsInfos);
			gpsInfos = {
				"lon": [],
				"lat": [],
				"radius": 0
			};
			mapModify.setActive(false);
		}
	});
</script>
