<template>
	<view style="width: 100vw; height: 100vh; position: relative;">
		 <map style="width: 100vw; height: 100vh;" id="navi_map"  :longitude="longitude" :latitude="latitude" scale="10" :markers="markers" :polyline="polyline"></map>
		 
		 <!--剩余公里数 -->
		 
			<view class="Highways">
				<view class="stactInfo-title">
					进行中
				</view>
				<view class="stactInfo-hend">
					剩余里程<span>{{distance}}公里</span>
				</view>
			</view>
		 
		<!-- 送往到信息 -->
		<view class="userInfo">
			<!-- <img src="../../static/toes.png" alt="" /> -->
			<view class="carInfp">
				<img style="width: 32rpx;height: 32rpx;margin:0 20rpx;" src="/static/lindang.png" alt="" />
				<view class="item" style="margin-right: 80rpx;">
					车牌：{{userInfo.licencePlate || ''}}
				</view>
				<view class="item">
					驾驶员：{{userInfo.driver || ''}}
				</view>
			</view>
			<view class="doctorInfp">
				<view class="stactInfo">
					<view class="stactInfo-title">
						进行中
					</view>
					<view class="logo">
						<img style="" src="/static/toes.png" alt="" />
					</view>
				</view>
				<!-- 医生 -->
				<view class="doctor-name" style="margin-top: -30rpx;">
					<view class="item">
						操作人员：{{userInfo.doctorName || ''}} | 跟车人员：{{userInfo.nurseName || ''}}
					</view>
				</view>
					
				<!-- 医院 -->
				<view class="hospital" >
					<img style="width: 32rpx;height: 32rpx;margin:0 20rpx;" src="/static/lindang.png" alt="" />
					<view class="hospital-title">
						送往{{userInfo.hospital || ''}}
					</view>
				</view>
				
				<view class="patient">
					<view> 患者信息<span>：{{PatientAray.name || ''}} <span style="margin: 0 10rpx;" v-if="PatientAray.sex == 0">男 </span><span style="margin: 0 10rpx;" v-if="PatientAray.sex == 1">女 </span> {{PatientAray.age || ''}}</span></view>
				</view>
			</view>
		</view>
	
	
		<!-- 到地方到对话框 完成-->
		<u-modal :show="showModal" width="200px" :showConfirmButton="false">
						<view class="slot-content">
							<view class="slot-content-item">
								<img src="/static/toes.png" style="width: 220rpx; height: 150rpx;" alt="" />
								<view style="margin-top: 20rpx; margin-bottom: 40rpx;text-align: center;">
									已到达医院
								</view>
								<u-button style="width: 183rpx;
								height: 57rpx;
								background: #5581FF;
								border-radius: 29rpx 29rpx 29rpx 29rpx;" 
								type="primary" text="我已知晓" @click="apologizeBtn"></u-button>
							</view>
						</view>
					</u-modal>
	</view>
</template>

<script>
	// 引入高德地图JSAPI（请替换你的API Key）
	// 引入haversine库
	import haversine from 'haversine-distance';
	import {request} from '../../request/request.js'
	export default {
		data(){
			return {
					longitude:null,
					latitude:null,
					markers:null,
				    cost: '',
				    polyline: [],
					showModal:false,
					distance:'',//米
					userInfo:{	
					},
					PatientAray:{}
			}
		},
		mounted() {
		
		},
		onLoad() {
		this.getRouter()
		this.getPatient()			
		},
		onShow() {
			this.getRouter()
			this.getPatient()		
		},
		  onUnload() {
		    // 页面销毁时的处理
		    // 比如取消网络请求、清除定时器、解绑事件等
			clearInterval(this.walkInterval)
		  },
		methods:{
		async	apologizeBtn(){
				await request({url:`/dispatchOrder/${this.userInfo.id}`})
				// this.showModal  = true
				uni.showToast({
					title:'提交完成'
				})
				uni.redirectTo({
					url:'/pages/home/index'
				})
			},
			Setpolyline(points){
				this.polyline = [
					{
						points: points,
						color: "#0091ff",
						width: 6	
					}
				]
				
				
			},	
			
			// 计算公里数
			onRegionChange(startCoords,endCoords){
				// 使用haversine库计算距离
				const distance = haversine(startCoords, endCoords);
				const distance1 = distance.toFixed(1) 
				this.distance =  (distance1 / 1000).toFixed(1); //计算公里数
			},
			// 添加标记点
			setMarker(origin,currentLocation,points,location) {
				const location1 = location.split(',')
				const  origin1 = origin.split(',')
				const currentLocation1  = currentLocation.split(',')
				const markerWidth = 23;
				const markerHeight = 33;
			  this.markers = [
				{
				   id: 0,
				   latitude: origin1[1] ,
				   longitude: origin1[0] ,
				   width: markerWidth,
				   height: markerHeight
				},
				{
				  id: 0,
				  latitude: currentLocation1[1] ,
				  longitude: currentLocation1[0] ,
				  width: markerWidth,
				  height: markerHeight
				},
				{	
					iconPath: "/static/toes.png",
					id: 2,
					latitude: location1[1] ,
					longitude:location1[0] ,
					width: 50,
				    height: 50
				}
			  ];
				// 起点和终点的经纬度
				const startCoords = { latitude: location1[1], longitude: location1[0] };
							  
				const endCoords = { latitude: currentLocation1[1], longitude: currentLocation1[0] };
				// 行走动态图
				this.getTrajectory(points,startCoords,endCoords,location)
			},
			getTrajectory(trajectory ,startCoords,endCoords ,location){
			// uni.hideLoading();
			// this.showModal = false
			// // // 定义当前标记的索引
			let currentIndex = 0;
			this.onRegionChange(startCoords,endCoords)
			// 定义行走速度（单位：毫秒）
			const walkSpeed = 40000;
			// 定义setInterval函数，每隔一定时间更新标记位置 怎么进行销毁
				this.walkInterval = setInterval(async () => {
				const res = await request({url:'/dispatchOrder'})
				const location = res[0].location.split(',')
				  // 更新标记位置
				  const startCoords = {latitude: location[1], longitude: location[0]}
				  this.onRegionChange(startCoords,endCoords)
			  if (this.distance == 0.0) {
			    clearInterval(this.walkInterval); // 停止行走
				// this.showModal = true
			  } else {
			    currentIndex++; // 更新当前索引
			  }
			}, walkSpeed);
		
			},
			// 唤醒

			// 获取患者信息
			async	getPatient(){
				const res =	await 	request({url:'/patient'})
				this.PatientAray = res
			},
				async	getRouter(){
					// uni.showLoading({
					// 	title: '加载中'
					// });
					const _that = this
					const res = await request({url:'/dispatchOrder'})
					const location = res[0].location
					_that.latitude = +location.split(',')[1]
					_that.longitude = +location.split(',')[0]
					const origin = res[0].orderLocation
					_that.userInfo = res[0]
					const  currentLocation = res[0].hospitalLocation
					var amapFile = require('../../libs/amap-wx.130.js');
					var myAmapFun = new amapFile.AMapWX({key: 'd4d729753f518b7b925d2f1046fa2cf5'});
					myAmapFun.getDrivingRoute({
					origin: `${origin}`,
					destination: `${currentLocation}`,
						 success:function(data){
									var points = [];
									 if(data.paths && data.paths[0] && data.paths[0].steps){
									   var steps = data.paths[0].steps;
									   for(var i = 0; i < steps.length; i++){
										 var poLen = steps[i].polyline.split(';');
										 for(var j = 0;j < poLen.length; j++){
										   points.push({
											 longitude: parseFloat(poLen[j].split(',')[0]),
											 latitude: parseFloat(poLen[j].split(',')[1])
										   })
										 } 
									   }
								  }
								  // 添加汽车标记
									_that.setMarker(origin,currentLocation,points,location)
									_that.Setpolyline(points)
							 
						 },
						  fail: function(info){
							console.log(info);
						 }
					})
			}
		}
	}
</script>


<style scoped lang="scss">
::v-deep .slot-content-item{
		height: 300rpx;
		width: 200rpx;
	}
	.Highways{
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top:30rpx;
		width: 363rpx;
		height: 167rpx;
		background: #FFFFFF;
		box-shadow: 8rpx 0rpx 16rpx 0rpx #171B25;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		.stactInfo-title{
			font-family: SourceHanSansSC, SourceHanSansSC;
			font-weight: 400;
			font-size: 32rpx;
			color: #2F3135;
			margin: 30rpx 50rpx;
		}
		.stactInfo-hend{
			font-family: SourceHanSansSC, SourceHanSansSC;
			font-weight: 400;
			font-size: 26rpx;
			color: #ADB0B8;
			margin: -20rpx 50rpx;
			span {
				color: #51B343;
			}
		}
	}
	
	.userInfo{
		position: absolute;
		margin: 0 auto;
		bottom: 20rpx;
		// width: 670rpx;
		padding: 30rpx;
		
		.doctorInfp{
			// width: 670rpx;
			height: 265rpx;
			background: #FFFFFF;
			padding: 30rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-top: 40rpx;
			.patient{
				margin-top: 30rpx;
				view{
					font-family: SourceHanSansCN, SourceHanSansCN;
					font-weight: 400;
					font-size: 22rpx;
					color: #747474;
					
					span{
						font-size: 28rpx;
						color: #5580FF;
					}
				}
			}
			.hospital{
				display: flex;
				margin-top: 30rpx;
				width: 267rpx;
				height: 30rpx;
				background: rgba(255,117,42, .1);
				border-radius: 3rpx 3rpx 3rpx 3rpx;
				.hospital-title{
					// margin-left: 10rpx;
					font-family: SourceHanSansCN, SourceHanSansCN;
					font-weight: 400;
					font-size: 22rpx;
					color: #FF7529;

				}
			}
			.doctor-name{
				display: flex;
			}
			.stactInfo{
				display: flex;
				justify-content: space-between;
				margin-bottom: 50rpx;
				.stactInfo-title{
					ont-family: SourceHanSansCN, SourceHanSansCN;
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
				}
				.logo{
					width: 78rpx;
					height: 78rpx;
					// margin-top: 20rpx;
					border-radius: 2rpx 2rpx 2rpx 2rpx;
						background-color: rgba(85,129,255,.1);
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 20rpx;
					img{
						width: 65rpx;
						height: 46rpx;
					}
					
				}
			}
		}
		.item{
			font-family: SourceHanSansSC, SourceHanSansSC;
			font-weight: 400;
			font-size: 28rpx;
			color: #818387;
		}
		.carInfp{
			width: 690rpx;
			height: 100rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		
		}
	}
</style>