<template>

	<view >
		<view style="height:60vh">
			<map id="mapRef" ref="mapRef" style="width: 100%;height: 60vh;" show-location
				:longitude="location.longitude" :latitude="location.latitude" :markers="markers" :scale="scale"
				:polyline="polylines" />

		</view>
		<view v-if="showOrderPay"  style="height:30vh">
			<bike-pay :orderId="orderData.orderId" /> 
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		getCurrentInstance
	} from 'vue';
	import {
		showModelMessage,
		getUrlParams,
		jkcBaseDecode
	} from "@/utils/tools.js";
	import {
		callOrdereApi,
		callOperateApi
	} from "@/utils/api.js";

	import {
		findIndex
	} from 'lodash';
	import config from '@/utils/config';
	import {
		onShow,
		onUnload,
		onLoad
	} from "@dcloudio/uni-app";
	import * as map from "@/utils/usermap.js"; 

	const location = ref({
		longitude: "",
		latitude: ""
	});
	const scale = ref(15);
	const markers = ref([]); 
	const polylines = ref([]); //线 
	const pointStart = 100000000000;
	const pointEnd = 100000000001;

	let oMap = null; 
	let oUser = null; 
	const showOrder = ref(false);
	const order = ref({});
	onLoad((options) => {
		if (options.orderId) {
			orderData.orderId = options.orderId;
		}

	})
	//订单信息
	let orderData = {
		bikeCode: null,
		status: null,
		createdAt: null,
		orderId: null
	};  
	const showOrderPay = ref(false);
	//车辆
	let arrBikeData = []; 
	const bikeData = ref({});
	const getInfoOrderData = () => {
		callOrdereApi("userOrders/orderDetailsInfo?orderId=" + orderData.orderId, {}, "get").then(res => {
			if (res.code == 200) {
				orderData = res.data;
				getTracking();
			}
		})
	}

	//显示订单
	function openOrderPay() { 
		showOrderPay.value = true;
	}

	//轨迹
	function getTracking() {
		const {
			bikeCode,
			createdAt,
			ridePoint,
			returnPoint,
			endTime
		} = orderData;
		let params = {
			ebikeCode: bikeCode,
			startTime: createdAt
		}
		if (endTime) params = {
			...params,
			endTime
		}
		callOperateApi("ebikeTracking/query", params, "post").then(res => {
			const {
				code,
				data,
				message
			} = res;
			if (code != 200) {
				return;
			}
		
			const arrPoints = (!data || data.length == 0) ? [] : data.map(item => {
				const {
					lngGCJ02,
					latGCJ02
				} = item;
				return {
					longitude: lngGCJ02,
					latitude: latGCJ02
				}
			});

			const startPoint = ridePoint.split(",");
			const lng = startPoint[0];
			const lat = startPoint[1];
			const start = {
				longitude: lng,
				latitude: lat
			}
			location.value.latitude = lat;
			location.value.longitude = lng; 
			const arrMakers = markers.value || [];
			arrPoints.splice(0, 0, start);
			let indexStart = findIndex(arrMakers, {
				pointStart
			});
			indexStart = indexStart == -1 ? arrMakers.length : indexStart; 
			arrMakers[indexStart] = map.addMarker(pointStart, lng, lat, "start.png");
			if (data && data.length > 0) {
				let {
					lngGCJ02: endlng,
					latGCJ02: endlat
				} = data[data.length - 1];
				arrMakers[indexStart + 1] = map.addMarker(pointEnd, endlng, endlat, "end.png");
			}
			markers.value = arrMakers;
			if (arrPoints.length > 1) {
				polylines.value = [map.addLine("#168DED", arrPoints)];
			}
		})
	}  
	onMounted(() => {
		const instance = getCurrentInstance();
		oMap = uni.createMapContext("mapRef", {
			this: instance.proxy
		}); 
		getInfoOrderData();
		openOrderPay();
	}) 
</script>

<style scoped>
   
    
</style>