<template>
	<view class="content">
		<map id="myMap" style="width: 100%; height: 780px;" :latitude="latitude" :longitude="longitude"
			:markers="markers" :polyline="polyline" show-location="true" scale="20">
			<cover-image class="returnBack" src="/static/login/returnBack.png" @click="goBack()"></cover-image>
		</map>
	</view>
</template>

<script>
	export default {
		onReady() {
			if (this.type=='跑步'){
				uniCloud.callFunction({
				name: 'fe-my-runningDetail',
				data: {runningId: this.id}
				})
				.then(res => {
					this.getData(res);
					
				});
				const subNVue = uni.getSubNVueById('popup1'); // 通过 id 获取 nvue 子窗体 
				subNVue.show('slide-in-top', 250); // 打开 nvue 子窗体
			}
			else if(this.type=='健走'){
				uniCloud.callFunction({
				name: 'fe-my-walkingDetail',
				data: {walkingId: this.id}
				})
				.then(res => {
					this.getData(res);
					
				});
				const subNVue = uni.getSubNVueById('popup1'); // 通过 id 获取 nvue 子窗体 
				subNVue.show('slide-in-top', 250); // 打开 nvue 子窗体
			}
			
			
		},
		data() {
			return {
				type:',',
				id: '',
				icon: '/static/sport/icon.jpg',
				longitude: '',
				latitude: '',
				scale: 16,
				polyline: [{
					points: [],
					color: "#00aa00", //线的颜色
					arrowLine: true,
					width: 20,
					dottedLine: true
				}],
				markers: [{
						id: 0,
						longitude: '',
						latitude: '',
						iconPath: '/static/sport/marker1.png'
					},
					{
						id: 1,
						longitude: '',
						latitude: '',
						iconPath: '/static/sport/marker2.png'
					}
				]
			}
		},
		methods: {
			goBack() {
				uni.reLaunch({
					url: '/pages/my/my-running-record',
					animationType: 'pop-in',
					animationDuration: 300
				})
				// uni.navigateBack({
				// 	delta: 1, //返回层数，2则上上页
				// })
			},
			getData(res){
				console.log(res);
				
				uni.$emit('information', {
					type: this.type,
					startTime: res.result.data.StartDatetime,
					distance: res.result.data.distance,
					duration: res.result.data.duration,
					pace: res.result.data.pace,
					feeling:res.result.data.feeling,
					id:this.id
				});
				//this.id = res.result.data.id;
				this.polyline[0].points = res.result.data.pathLine;
				this.markers[0].latitude = res.result.data.startPoint.latitude;
				this.markers[0].longitude = res.result.data.startPoint.longitude;
				this.markers[1].latitude = this.polyline[0].points[this.polyline[0].points.length - 1].latitude;
				this.markers[1].longitude = this.polyline[0].points[this.polyline[0].points.length - 1].longitude;
				// this.markers[1].longitude = res.result.data.endPoint.longitude;
				//this.markers[1].latitude = res.result.data.endPoint.latitude;
				this.latitude = this.markers[1].latitude;
				this.longitude = this.markers[1].longitude;
			}
		},
		onLoad(e){
			this.id=e.id;
			this.type=e.type;
			console.log(this.type);
			//console.log(this.id);
		}
	}
</script>

<style>
	.content {
		background-color: #edeef0;
		display: flex;
		flex-direction: column;
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.returnBack {
		height: 55rpx;
		width: 55rpx;
		margin-top: 50rpx;
		margin-left: 25rpx;
		margin-right: auto;
	}

	.show {
		position: relative;
		margin-top: 250px;
	}

	cover-view.icon {
		border-radius: 50%;
	}

	.icon cover-image {
		border-radius: 50%;
	}

	.icon {
		position: absolute;
		top: 15px;
		right: 50px;
		width: 70px;
		height: 70px;
		border-radius: 50%;
		z-index: 999;
	}

	.block1 {
		position: relative;
		background-color: white;
		padding: 10px;
		margin: 0 auto;
		margin-top: 50px;
		width: 85%;
		height: 180px;
		border-radius: 15px;
	}

	.distance {
		position: absolute;
		width: 50%;
		height: 30%;
		left: 15px;
		top: 35px;
	}

	.digit {
		position: absolute;
		font-size: 50px;
		font-weight: 1000;
		bottom: 3px;
		left: 15px;
		display: inline;
	}

	.km {
		position: absolute;
		font-weight: 1000;
		left: 125px;
		bottom: 10px;
		display: inline;
	}

	.info {
		position: absolute;
		width: 40%;
		height: 30%;
		right: 25px;
		top: 40px;
	}

	.username {
		position: absolute;
		font-size: 18px;
		font-weight: 1000;
		top: 15px;
		right: 10px;
	}

	.start-time {
		position: absolute;
		font-size: 12px;
		color: #6c6c6d;
		right: 10px;
		top: 40px;
	}

	.time {
		position: absolute;
		width: 45%;
		height: 35%;
		left: 15px;
		top: 110px;
	}

	.speed {
		position: absolute;
		width: 35%;
		height: 35%;
		right: 20px;
		top: 110px;
	}

	.first {
		font-size: 24px;
		color: #6c6c6d;
		font-weight: 1000;
		margin-top: 15px;
		text-align: center;
	}

	.second {
		font-size: 12px;
		color: #6c6c6d;
		margin-top: 5px;
		text-align: center;
	}

	.block2 {
		background-color: white;
		padding: 10px;
		margin: 0px auto;
		margin-top: 15px;
		width: 85%;
		height: 200px;
		border-radius: 15px;
	}

	li {
		cursor: pointer;
		color: #8A8A8C;
		font-weight: bold;
		list-style-position: outside;
		font-size: 18px;
		text-indent: -10px;
		margin-top: 10px;
		margin-left: -15px;
	}

	li::marker {
		font-size: 25px;
		color: #f1992d;
	}
</style>