<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() {
			//传从运动界面传数据过来
			var data = uni.getStorageSync('data-to-finish')
			var res = JSON.parse(data)
			this.id = res.id;
			this.polyline = res.polyline;
			this.markers[0].latitude = this.polyline[0].points[0].latitude;
			this.markers[0].longitude = this.polyline[0].points[0].longitude;
			this.markers[1].latitude = this.polyline[0].points[res.duration - 1].latitude;
			this.markers[1].longitude = this.polyline[0].points[res.duration - 1].longitude;
			this.latitude = this.markers[1].latitude;
			this.longitude = this.markers[1].longitude;
			uni.$emit('information', {
				type: res.type,
				startTime: res.startTime,
				distance: res.distance,
				duration: res.duration,
				pace: res.duration / res.distance
			});
			const subNVue = uni.getSubNVueById('popup'); // 通过 id 获取 nvue 子窗体 
			subNVue.show('slide-in-top', 250); // 打开 nvue 子窗体
		},
		data() {
			return {
				id: '',
				icon: '/static/sport/icon.jpg',
				longitude: 121.44820869,
				latitude: 37.48330837,
				scale: 16,
				polyline: [],
				markers: [{
						id: 0,
						longitude: 121.44577861,
						latitude: 37.48205260,
						iconPath: '/static/sport/marker1.png'
					},
					{
						id: 1,
						longitude: 121.44820869,
						latitude: 37.48330837,
						iconPath: '/static/sport/marker2.png'
					}
				]
			}
		},
		methods: {
			goBack() {
				uni.reLaunch({
					url: '/pages/sport/main',
					animationType: 'pop-in',
					animationDuration: 300
				})
			}
		}
	}
</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>