<template>
	<view class="page">
		<u-navbar title="行程结束" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
			height='45'></u-navbar>
		<map class="map" id="map" ref="map" :scale="zoomSize" :latitude="latitude" :longitude="longitude"
			:show-location='true' :markers="markers" :polygons="polygons" :polyline="polyline"> </map>
			<view class="park" @click="toggleIconAndCallout">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uRiYQZQEb3l2LsltEsyW" mode=""></image>
			</view>
		<!-- 	<map class="map" id="map" ref="map"
				\> </map> -->
		<view class="bot_btn" v-if="false">
			<view class="time">
				骑行时间30分钟9秒
			</view>
			<view class="price">
				4.00<span>元</span>
			</view>
			<view class="toinfo">
				查看骑行费明细 >
			</view>
			<view class="btn">
				去支付
			</view>
		</view>
		<view class="bot" v-if="loading">
			<view class="card">
				<view class="top">
					<view class="topcont">
						<view class="left">
							{{orderInfo.totalFee}}<span style="font-size: 24rpx;">元</span>
						</view>
						<view class="right" @click="topage(2)"
							style="display: flex;flex-wrap: nowrap;align-items: center;">
							费用明细<view class="iconfont icon-xiangyou1" style="font-size: 24rpx;"></view>
						</view>
					</view>
					<view class="info">
						<view class="type">
							电单车
						</view>
						<view class="data" style="font-size: 26rpx;">
							{{orderInfo.createTime}}
						</view>
					</view>
					<view class="topcont" style="margin-top: 32rpx;">
						<view class="left" style="font-size:26rpx ;">
							订单时长
						</view>
						<view class="right" style="font-size:26rpx ;">
							{{computedList(orderInfo)}}
						</view>
					</view>
					<view class="topcont" style="margin-top: 14rpx;">
						<view class="left" style="font-size:26rpx ;">
							骑行距离
						</view>
						<view class="right" style="font-size:26rpx ;" v-if="orderInfo.distance">
						<!-- {{orderInfo.distance}}公里 -->
					{{ (orderInfo.distance / 1000).toFixed(2) }} 公里
						</view>
						<view class="right" style="font-size:26rpx ;" v-else>
						--公里 
						</view>
					</view>
				</view>
				<view class="bottom" @click="topage(1)">
					<view class="text" style="display: flex;flex-wrap: nowrap;align-items: center;">
						故障上报 <view class="iconfont icon-xiangyou1" style="font-size: 26rpx;"></view>
					</view>
				</view>
			</view>
		</view>
		<u-mask :show="show" @click="show = false" :z-index='100' />

	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#F7FAFE",
				},
				latitude: 0,
				longitude: 0,
				isMap: false,
				zoomSize: 18,
				markers: [],
				polyline: [{
					points: [],
					width: 8,
					arrowLine: true,
					color: '#00AF99'
					// strokeWidth: 2,
					// strokeColor: '#00AF99',
					// fillColor: '#00AF99'
				}, ],
				polygons: [],

				cardId: '001区域',
				orderId: '',
				orderInfo: {},
				loading: false,
				showIconAndCallout:false

			}
		},
		onLoad(e) {
			this.orderId = e.id
			this.getOrderDetail()

		},
		components: {

		},
		methods: {
			topage(num) {
				if (num == 1) {
					uni.navigateTo({
						url: '/page_user/gzsb?sn=' + this.orderInfo.sn
					})
				} else if (num == 2) {
					uni.navigateTo({
						url: '/page_user/ckmx?orderId=' + this.orderInfo.orderNo
					})
				}
			},
			computedList(info) {
				const createTime = new Date(info.createTime);
				const payTime = new Date(info.returnTime);
				const timeDifference = Math.abs(createTime - payTime);

				const hours = Math.floor(timeDifference / (1000 * 60 * 60));
				const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
				const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);

				return `${minutes}分钟${seconds}秒`
			},
			convertBoundaryToPolyline(boundary) {
				if (!boundary) return null;

				const points = JSON.parse(boundary).map(coord => ({
					latitude: coord[1],
					longitude: coord[0]
				}));

				const polyline = {
					points: points,
					fillColor: "#55888840", //填充颜色
					strokeColor: "#22FF00", //描边颜色
					strokeWidth: 2, //描边宽度
					zIndex: 1, //层级
				};

				return polyline;
			},
			convertBoundaryToPolyliness(boundary) {
				if (!boundary) return null;

				const points = JSON.parse(boundary).map(coord => ({
					latitude: coord[1],
					longitude: coord[0]
				}));

				const polyline = {
					points: points,
					width: 8,
					arrowLine: true,
					color: '#00AF99'
				};

				return polyline;
			},
			convertBoundaryToPolylines(boundaries, num) {
				if (num == 1) {
					console.log('判断');
					return boundaries.map(boundary => {
						if (!boundary) return null;
						let coords;
						try {
							coords = JSON.parse(boundary);
						} catch (error) {
							console.error("Error parsing boundary JSON:", error);
							return null;
						}
						if (!Array.isArray(coords)) {
							console.error("Parsed boundary is not an array:", coords);
							return null;
						}
						const points = coords.map(coord => ({
							latitude: coord[1],
							longitude: coord[0]
						}));
						return {
							points: points,
							fillColor: "#3A7EDB40", //填充颜色
							strokeColor: "#3A7EDB", //描边颜色
							strokeWidth: 2, //描边宽度
							zIndex: 1, //层级

						};
					}).filter(polyline => polyline !== null); // 过滤掉无效的折线数据
				} else if (num == 2) {
					return boundaries.map(boundary => {
						if (!boundary) return null;
						let coords;
						try {
							coords = JSON.parse(boundary);
						} catch (error) {
							console.error("Error parsing boundary JSON:", error);
							return null;
						}
						if (!Array.isArray(coords)) {
							console.error("Parsed boundary is not an array:", coords);
							return null;
						}
						const points = coords.map(coord => ({
							latitude: coord[1],
							longitude: coord[0]
						}));
						return {
							points: points,
							fillColor: "#FFF5D640", //填充颜色
							strokeColor: "#FFC107", //描边颜色
							strokeWidth: 2, //描边宽度
							zIndex: 1, //层级

						};
					}).filter(polyline => polyline !== null); // 过滤掉无效的折线数据
				} else if (num == 3) {
					return boundaries.map(boundary => {
						if (!boundary) return null;
						let coords;
						try {
							coords = JSON.parse(boundary);
						} catch (error) {
							console.error("Error parsing boundary JSON:", error);
							return null;
						}
						if (!Array.isArray(coords)) {
							console.error("Parsed boundary is not an array:", coords);
							return null;
						}
						const points = coords.map(coord => ({
							latitude: coord[1],
							longitude: coord[0]
						}));
						return {
							points: points,
							fillColor: "#FFD1CF40", //填充颜色
							strokeColor: "#FF473E", //描边颜色
							strokeWidth: 2, //描边宽度
							zIndex: 1, //层级

						};
					}).filter(polyline => polyline !== null); // 过滤掉无效的折线数据
				}

			},
			getParking() {
				// 发送请求获取数据
				let data={
					areaId:this.orderInfo.areaId
				}
				this.$u.get('/app/parking/list?',data).then((res) => {
					if (res.code === 200) {
						// 处理接口返回的数据
						const type1Data = [];
						const type2Data = [];
						const type3Data = [];

						res.rows.forEach(row => {
							if (row.type == 1) {
								type1Data.push(row);
							} else if (row.type == 2) {
								type2Data.push(row);
							} else if (row.type == 3) {
								type3Data.push(row);
							}
						});
						const validBoundaries = type1Data.map(row => row.boundaryStr).filter(boundary =>
							typeof boundary === 'string' && boundary.trim() !== '');
						const polylines = this.convertBoundaryToPolylines(validBoundaries, 1);


						const validBoundaries1 = type2Data.map(row => row.boundaryStr).filter(boundary =>
							typeof boundary === 'string' && boundary.trim() !== '');
						const polylines1 = this.convertBoundaryToPolylines(validBoundaries1, 2);

						const validBoundaries2 = type3Data.map(row => row.boundaryStr).filter(boundary =>
							typeof boundary === 'string' && boundary.trim() !== '');
						const polylines2 = this.convertBoundaryToPolylines(validBoundaries2, 3);
						// 将处理后的数据添加到 this.polyline 中
						this.polygons = this.polygons.concat(polylines2);
						this.polygons = this.polygons.concat(polylines1);
						this.polygons = this.polygons.concat(polylines);

						// console.log(this.polyline);
						
						this.parkingList = res.rows
					}
				}).catch(error => {
					console.error("Error fetching parking data:", error);
				});
			},
			toggleIconAndCallout() {
				this.showIconAndCallout = !this.showIconAndCallout;
				if (this.showIconAndCallout) {
					const newMarkers = [];
					this.parkingList.forEach(item => {
						newMarkers.push({
							id: parseFloat(item.parkingId),
							latitude: parseFloat(item.latitude),
							longitude: parseFloat(item.longitude),
							width: 20,
							height: 28.95,
							iconPath: item.type == 1 ?'https://lxnapi.ccttiot.com/bike/img/static/up2xXqAgwCX5iER600k3':item.type == 2 ?'https://lxnapi.ccttiot.com/bike/img/static/u53BAQcFIX3vxsCzEZ7t' :' https://lxnapi.ccttiot.com/bike/img/static/uDNY5Q4zOiZTCBTA2Jdq',
							callout: {
								content: item.parkingName,
								color: '#ffffff',
								fontSize: 14,
								borderRadius: 10,
								bgColor: item.type == 1 ? '#3A7EDB' : item.type == 2 ? '#FFC107' :
									'#FF473E',
								padding: 6,
								display: 'ALWAYS'
							},
							isCalloutVisible: true // 添加标记
						});
					});
					this.$set(this, 'markers', [...this.markers, ...newMarkers]);
				} else {
					// 过滤掉所有气泡显示的标记
					this.$set(this, 'markers', this.markers.filter(marker => !marker.isCalloutVisible));
				}
			
			},
			getArea() {
				// this.$u.get("/app/area/" + this.orderInfo.areaId).then((res) => {
				
				this.$u.get("/app/area/" + this.orderInfo.areaId).then((res) => {

					if (res.code == 200) {
						this.areaInfo = res.data
						const polylines = this.convertBoundaryToPolyline(res.data.boundaryStr)

						// 更新折线数据
						this.polygons.push(polylines)
						this.getParking()
						console.log(this.polygons, 'polylinespolylines');
					} else {
						// uni.showToast({
						// 	title: res.msg,
						// 	icon: 'none',
						// 	duration: 2000
						// });
					}
				});
				// 发送请求获取数据

			},
			status() {
				if (this.orderInfo != '') {
					if (this.orderInfo.status == 0) {
						return '预约中'
					} else if (this.orderInfo.status == 1) {
						return '取消预约'
					} else if (this.orderInfo.status == 2) {
						return '开始骑行'
					} else if (this.orderInfo.status == 3) {
						return '骑行结束'
					} else if (this.orderInfo.status == 4) {
						return '订单完成'
					}
				}

			},
			getOrderDetail() {
				   uni.showLoading({});
				    this.$u.get('/appVerify/order/' + this.orderId).then((res) => {
				        if (res.code === 200) {
				            this.orderInfo = res.data;
				            this.loading = true;
				
				            this.getArea();
							if(res.data.tripRouteStr){
								let abb;
								try {
								    abb = JSON.parse(res.data.tripRouteStr);
								} catch (error) {
								    console.error("Error parsing tripRouteStr:", error);
								    return;
								}
								if (abb.length > 2) {
								    this.latitude = parseFloat(abb[0][1]);
								    this.longitude = parseFloat(abb[0][0]);
								    this.polyline[0].points = abb.map(coord => ({
								        latitude: coord[1],
								        longitude: coord[0]
								    }));
								    this.markers.push({
								        id: 0,
								        latitude: abb[0][1],
								        longitude: abb[0][0],
								        width: 25,
								        height: 38,
								        iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u06paUGiHLvL08Pw7BGr'
								    }, {
								        id: 1,
								        latitude: abb[abb.length - 1][1],
								        longitude: abb[abb.length - 1][0],
								        width: 25,
								        height: 38,
								        iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/uwpAj9vYtPRmhtTOtflx'
								    });
								}else{
									this.latitude = parseFloat(abb[0][1]);
									this.longitude = parseFloat(abb[0][0]);
								}
							}
				          
				            uni.hideLoading();
				        }
				    }).catch(error => {
				        console.error("Error fetching area data:", error);
				    });
			}
		}
	}
</script>


<style lang="scss">
	page {
		background-color: #F7FAFE;
	}

	.page {
		width: 750rpx;

		.map {
			width: 750rpx;
			height: 100vh;
		}
		.park {
			position: fixed;
			display: flex;
			align-items: center;
			justify-content: center;
			right: 30rpx;
			bottom: 500rpx;
			// background-color: #fff;
			border-radius: 50%;
			width: 82rpx;
			height: 82rpx;
			z-index: 10;
		
			.img {
				width: 82rpx;
				height: 82rpx;
			}
		}
		.bot {
			display: flex;
			justify-content: center;
			padding: 26rpx 34rpx 48rpx 34rpx;
			position: fixed;
			bottom: 0;
			width: 750rpx;
			// height: 420rpx;
			background: #F7F7F7;
			border-radius: 30rpx;

			.card {
				width: 708rpx;
				// height: 320rpx;
				background: #FFFFFF;
				border-radius: 32rpx 32rpx 32rpx 32rpx;

				.top {
					padding: 26rpx 38rpx;

					.topcont {
						display: flex;
						flex-wrap: nowrap;
						justify-content: center;
						justify-content: space-between;

						.left {
							font-weight: 500;
							font-size: 36rpx;
							color: #3D3D3D;
						}

						.right {
							font-weight: 400;
							font-size: 26rpx;
							color: #808080;
						}
					}

					.info {
						margin-top: 16rpx;
						display: flex;
						flex-wrap: nowrap;
						align-items: center;

						.type {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 112rpx;
							height: 42rpx;
							background: linear-gradient(90deg, #4C97E7 0%, rgba(158, 205, 255, 0.58) 100%);
							border-radius: 8rpx 8rpx 8rpx 8rpx;

							font-weight: 500;
							font-size: 24rpx;
							color: #FFFFFF;
						}

						.data {
							margin-left: 15rpx;
							font-weight: 400;
							font-size: 20rpx;
							color: #3D3D3D;
						}
					}
				}

				.bottom {
					// padding-top: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-top: 2rpx solid #EFEFEF;
					width: 100%;
					height: 80rpx;

					.text {
						font-weight: 400;
						font-size: 24rpx;
						color: #3D3D3D;
					}


				}
			}
		}

		.bot_btn {
			padding: 26rpx 34rpx 48rpx 34rpx;
			position: fixed;
			// display: flex;
			// flex-wrap: wrap;
			// justify-content: center;
			bottom: 0;
			width: 750rpx;
			height: 420rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
			border-radius: 30rpx;

			.time {
				// height: 88rpx;
				width: 100%;
				text-align: center;
				padding-bottom: 24rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #3D3D3D;
				border-bottom: 2rpx solid #EFEFEF;
			}

			.price {
				margin-top: 22rpx;
				width: 100%;
				text-align: center;
				font-weight: 500;
				font-size: 72rpx;
				color: #3D3D3D;

				span {
					font-size: 28rpx;
					font-weight: 500;
				}
			}

			.toinfo {
				// margin-top: 12rpx;
				width: 100%;
				text-align: center;
				font-weight: 400;
				font-size: 24rpx;
				color: #3D3D3D;
			}

			.btn {
				margin-top: 34rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 680rpx;
				height: 90rpx;
				background: #4C97E7;
				border-radius: 54rpx 54rpx 54rpx 54rpx;
				font-weight: 500;
				font-size: 40rpx;
				color: #FFFFFF;
			}

		}
	}
</style>