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

<script setup>
	import MapMap from "@/components/Map/map";
	import Fill from "ol/style/Fill";
	import Text from "ol/style/Text";
	import VectorLayer from "ol/layer/Vector";
	import VectorSource from "ol/source/Vector";
	import {
		Feature
	} from "ol";
	import {
		Point,
		LineString
	} from "ol/geom";
	import {
		Style,
		Icon,
		Stroke
	} from "ol/style";
	import markerIcon from "@/assets/images/ship3.png";
	// import { duToGpsDM } from "@/utils/gpsToDu";
	// import { getCurrencyConfigByMid } from "@/utils/index";

	const {
		proxy
	} = getCurrentInstance();

	const props = defineProps({
		coordinates: {
			type: Array,
			default: () => [{
				lat: null,
				lng: null,
				time: null,
				x0a9: null,
				x0aA: null,
			}, ],
		}
	});

	const {
		coordinates
	} = toRefs(props);

	const map = ref(null);
	const zoom = 17;
	let timer;
	let carPoints = [];
	let routeLayer = new VectorLayer({
		source: new VectorSource({
			features: [],
		}),
	});
	let featureMove;
	let shipListSource = new VectorSource({
		features: [],
	});
	let shipListLayer = new VectorLayer({
		source: shipListSource,
	});
	watch(() => coordinates.value, (newValue) => {
		nextTick(() => {
			if (map != null) {
				let nowPos = {
					"0a4": 113.119904,
					"0a5": 22.169388,
					"iboatName": "测试1号",
					"sn": "4800000012",
					"0aA": 76
				};
				newValue.push({
					lat: nowPos["0a4"],
					lng: nowPos["0a5"],
					x0aA: 76
				})
				let lat = (newValue[0].lat + newValue[newValue.length - 1].lat) / 2;
				let lng = (newValue[0].lng + newValue[newValue.length - 1].lng) / 2;
				proxy.$refs["mapMap"].moveTo([nowPos["0a4"], nowPos["0a5"]], zoom, 0);
				deleteFeatures();
				// 画轨迹线
				drawLine();
				addFeature(nowPos);
			}
		});
	});
	const handleMapReady = () => {
		map.value = proxy.$refs["mapMap"].map;
		map.value.addLayer(routeLayer);
		map.value.addLayer(shipListLayer);
	};
	//轨迹线  把每个点连起来
	const drawLine = () => {
		let comDots = [];
		let wireFeature = {};
		coordinates.value.map((item) => {
			comDots.push([item.lat, item.lng]);
			wireFeature = new Feature({
				geometry: new LineString(comDots),
			});
			wireFeature.setStyle(
				new Style({
					stroke: new Stroke({
						// 设置边的样式
						color: "#5470c6",
						width: 4,
					}),
				})
			);

			let iconFeature = new Feature({
				geometry: new Point([item.lat, item.lng]), //绘制图形（点）
			});
			let rotation = (Number(item.x0aA) - 90) * (Math.PI / 180);
			rotation = isNaN(rotation) ? 0 : rotation;
			// //// console.log(rotation);

			iconFeature.setStyle(
				new Style({
					image: new Icon({
						scale: 0.5,
						rotation: rotation,
						snapToPixel: true,
						src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAnElEQVQ4T63TsQ0CMQyF4f/NgMQQ0CBR0FIx190cFIiWhhFoKdgEiRUeSoF0gO8cjkub+Evs2OLPpc9422dgBRwlNZn/BtjeApdOUJsh0QuuwKYWiYAFcAKWHaSR1EbpfAHlkO0ICdMJgV+QXmAAmUu6v9IZA8wkPVKgtg7TF7H25t4UbN+A9ahGmqqVD8AO2GdzUF45+I3ZJJb9JxbwRhEhB66xAAAAAElFTkSuQmCC",
					}),
					text: new Text({
						// 字体与大小
						font: "10px",
						// 文字填充色
						fill: new Fill({
							color: "#000",
						}),
						textAlign: "center",
						// 显示文本，数字需要转换为文本string类型！
						//   {m}-{d}
						text: (item.level?(`电量消耗：${item.level}L `):''),
						offsetX: -40,
						offsetY: -6,
						// backgroundStroke: new Stroke({
						// 	// color: "#000",
						// }),
						padding: [1, 4, 1, 4]
						// rotation: 30 * (Math.PI / 180),
					}),
				})
			);
			routeLayer.getSource().addFeatures([iconFeature]);
		});
		routeLayer.getSource().addFeatures([wireFeature]);
	};
	// 删除轨迹
	const deleteFeatures = () => {
		if (routeLayer) {
			routeLayer.getSource().clear();
		}
	};
	
	const getStyls = (feature, analogData) => {
		let rotation = Number(analogData["0aA"]) * (Math.PI / 180);
		rotation = isNaN(rotation) ? 0 : rotation;
		let Styles = [];
		Styles.push(
			new Style({
				image: new Icon({
					src: markerIcon,
					scale: map.value.getView().getZoom() / 20,
					anchor: [0.5, 0.7], // 偏移的 x 与 y 方向值，注意此值与 Cesium 等GIS库偏向方向正好相反
					rotation: rotation,
				}),
			})
		);
		Styles.push(
			new Style({
				text: new Text({
					textAlign: "center",
					text: `${feature.values_.name}`,
					offsetX: 0,
					offsetY: 18,
					fill: new Fill({
						//文字填充色
						color: "#2520ff",
					}),
					backgroundFill: new Fill({
						color: "rgba(255,255,255,0)",
					}),
				}),
			})
		);
		return Styles;
	};
	const addFeature = (analogData) => {
		//新建一个要素 Feature
		var newFeature = new Feature({
			//几何信息
			geometry: new Point([Number(analogData["0a4"]), Number(analogData["0a5"])]),
			//名称属性
			name: analogData["iboatName"],
		});
	
		// 设置ID
		newFeature.setId(analogData["sn"]);
		// 设置样式
		newFeature.setStyle(getStyls(newFeature, analogData));
		//将新要素添加到数据源中
		shipListSource.addFeature(newFeature);
	};
</script>