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

<script setup>
	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, Circle } from "ol/style";
	import { Draw, Modify, Select, Snap } from "ol/interaction";
	const { proxy } = getCurrentInstance();

	const map = ref(null);
	const draw = ref(null);
	const typeSelect = ref('Square');
	
	let source = new VectorSource({ wrapX: false });
	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 ,
			}), 
			image: new Circle({ 
				radius: 7, 
				fill: new Fill({
					color: "#e81818" ,
				}) 
			}) 
		}) 
	}); 
	function addInteraction() {
		let value = 'Square';
		if (value !== 'None') {
			let geometryFunction;
			if (value === 'Square') {
				value = 'Circle';
				geometryFunction = createRegularPolygon(4);
		    } else if (value === 'Box') {
				value = 'Polygon';
				geometryFunction = createBox();
		    }
		    draw.value = new Draw({
				source: source,
				type: value,
				geometryFunction: geometryFunction,
		    });
		    map.value.addInteraction(draw.value);
			draw.value.on('drawend', function(e) {
				map.value.removeInteraction(draw.value);
				const geometry = e.feature.getGeometry()
				console.log('顶点坐标是：',geometry)
			})
		}
	}; 
	
	
	
	
	// const map = ref(null);
	// const activeDraw = ref(null);
	// const select = ref(null);
	// const modify = ref(null);
	// // const Polygon = ref(null);
	// // const Circle = ref(null);
	// import {Draw, Modify, Select, Snap} from 'ol/interaction';
	// import { Vector as VectorSource} from 'ol/source';
	// import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
	// const vector = new VectorLayer({
	// 	source: new VectorSource(),
	// 	style: {
	// 		'fill-color': "rgba(37,241,239,0.2)",
	// 		'stroke-color': '#264df6',
	// 		'stroke-width': 2,
	// 		'circle-radius': 7,
	// 		'circle-fill-color': '#ffcc33',
	// 	}
	// });
	// const Polygon = new Draw({
	//     source: vector.getSource(),
	//     type: 'Polygon',
	// })
	// const Circle = new Draw({
	//     source: vector.getSource(),
	//     type: 'Circle',
	// })
	// const ExampleModifyTnit = function() {
	//     select.value = new Select();
	//     map.value.addInteraction(select.value);
	//     modify.value = new Modify({
	//       features: select.value.getFeatures(),
	//     });
	//     map.value.addInteraction(modify.value);
	//     setEvents();
	// };
	// const setEvents = function () {
	//     const selectedFeatures = select.value.getFeatures();
	//     select.value.on('change:active', function () {
	// 		selectedFeatures.forEach(function (each) {
	// 			selectedFeatures.remove(each);
	// 		});
	//     });
	// }
	// const setModifyActive = function (active) {
	// 	select.value.setActive(active);
	// 	modify.value.setActive(active);
	// };
	
	
	
	
	// const optionsForm = 'Circle';
	// const ExampleDrawInit = function(){
	//     map.value.addInteraction(Polygon);
	//     Polygon.setActive(false);
	//     map.value.addInteraction(Circle);
	//     Circle.setActive(false);
	// }
	
	// const setDrawActive = function (active) {
	//     if (activeDraw.value) {
	// 		activeDraw.value.setActive(false);
	// 		activeDraw.value = null;
	//     }
	//     if (active) {
	// 		activeDraw.value = Polygon;
	// 		activeDraw.value.setActive(true);
	//     }
	// };
	// // optionsForm.onchange = function (e) {
	// // 	const type = e.target.getAttribute('name');
	// // 	if (type == 'draw-type') {
	// // 		ExampleModify.setActive(false);
	// // 		ExampleDraw.setActive(true);
	// // 		optionsForm.elements['interaction'].value = 'draw';
	// // 	} else if (type == 'interaction') {
	// // 		const interactionType = e.target.value;
	// // 		if (interactionType == 'modify') {
	// // 			ExampleDraw.setActive(false);
	// // 			ExampleModify.setActive(true);
	// // 		} else if (interactionType == 'draw') {
	// // 			ExampleDraw.setActive(true);
	// // 			ExampleModify.setActive(false);
	// // 		}
	// // 	}
	// // };
	// const snap = new Snap({
	// 	source: vector.getSource(),
	// });
	// const handleMapReady = () => {
	// 	map.value = proxy.$refs["mapMap"].map;
	// 	// ExampleModifyTnit();
	// 	ExampleDrawInit();
	// 	// setModifyActive(false);
	// 	setDrawActive(true);
	// 	map.value.addInteraction(snap);
	// }
</script>