<template>
	<view class="content">
		<view class="distance">
			<view class="digit">{{info.distance.toFixed(2)}}</view>
			<view class="km">公里</view>
		</view>
		<view class="time">
			<view class="hms">
				{{parseInt(info.duration/3600).toString().padStart(2,0)}}:{{parseInt(info.duration%3600/60).toString().padStart(2,0)}}:{{(info.duration%60).toString().padStart(2,0)}}
			</view>
			<view class="text">用时</view>
		</view>
		<view class="button">
			<image v-if="!is" class="start" :src="start" @click="click(2)"></image>
			<image v-if="!is" class="finish" :src="finish" @click="click(3)"></image>
			<image v-if="is" class="stop" :src="stop" @click="click(1)"></image>
		</view>

	</view>
</template>

<script>
	export default {
		onLoad(option) {
			this.run()
			this.info.startTime = this.getTime()
			this.info.type = option.type
		},
		data() {
			return {
				info: {
					id: '',
					type: '',
					userId: '644a643a0c801ca878983559',
					startTime: '',
					duration: 0,
					distance: 0,
					polyline: [{
						points: [],
						color: "#00aa00", //线的颜色
						arrowLine: true,
						width: 20,
						dottedLine: true
					}]
				},

				timer: null, //定时器
				is: true,
				start: '/static/sport/start.png',
				stop: '/static/sport/stop.png',
				finish: '/static/sport/finish.png',
				latitude: 23.099994,
				longitude: 113.324520,

			}
		},
		methods: {
			run() {
				this.timer = setInterval(() => {
					this.getLocationInfo()
				}, 1000)
			},
			click(index) {
				if (index === 1) {
					this.is = false
					clearInterval(this.timer);
					this.timer = null;
				} else if (index === 2) {
					this.run()
					this.is = true
				} else if (index === 3) {
					clearInterval(this.timer);
					this.timer = null;
					//向后端传数据
					var url
					if (this.info.type === '跑步') {
						url = 'fe-sport-run-save'
					} else {
						url = 'fe-sport-walk-save'
					}
					uniCloud.callFunction({
							name: url,
							data: {
								userId: getApp().globalData.userId,
								startTime: this.info.startTime,
								duration: this.info.duration,
								distance: this.info.distance,
								pace: this.info.duration / this.info.distance,
								startPoint: this.info.polyline[0].points[0],
								endPoint: this.info.polyline[0].points[this.duration - 1],
								pathLine: this.info.polyline[0].points
							}
						})
						.then(res => {
							this.info.id = res.result.data.id
							if (res.result.code === 200) {
								uni.showToast({
									title: '记录保存成功',
									icon: 'success'
								})
								let item = JSON.stringify(this.info)
								uni.setStorageSync('data-to-finish', item)
								uni.reLaunch({
									url: '/pages/sport/finish',
									animationType: 'pop-in',
									animationDuration: 300
								})
							} else {
								uni.showToast({
									title: '记录保存失败',
									icon: 'error'
								})
								uni.reLaunch({
									url: '/pages/sport/main',
									animationType: 'pop-in',
									animationDuration: 300
								})
							}
						})
				}
			},
			getTime() {
				var date = new Date(),
					year = date.getFullYear(),
					month = date.getMonth() + 1,
					day = date.getDate(),
					hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
					minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
					second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				var time = year + '/' + month + '/' + day + ' ' + hour + ':' + minute + ':' + second;
				return time;
			},
			getLocationInfo() {
				let that = this.info;
				let that1 = this;
				that.duration++
				uni.getLocation({
					type: 'gcj02',
					cacheTimeout: 3001,
					isHighAccuracy: true,
					highAccuracyExpireTime: 3001,
					success: function(res) {
						that1.latitude = res.latitude
						that1.longitude = res.longitude
						that.polyline[0].points.push({
							latitude: res.latitude,
							longitude: res.longitude
						})
						if (that.duration >= 4) {
							that.distance += that1.GetDistance(
								that.polyline[0].points[that.duration - 2].latitude,
								that.polyline[0].points[that.duration - 2].longitude,
								that.polyline[0].points[that.duration - 1].latitude,
								that.polyline[0].points[that.duration - 1].longitude
							)
						}
					}
				});
			},
			GetDistance(lat1, lng1, lat2, lng2) {
				var radLat1 = lat1 * Math.PI / 180.0;
				var radLat2 = lat2 * Math.PI / 180.0;
				var a = radLat1 - radLat2;
				var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137; // EARTH_RADIUS;
				s = Math.round(s * 10000) / 10000;
				console.log("计算结果", s, 'KM');
				return s;
			}
		}
	}
</script>

<style>
	.content {
		background-color: #505051;
		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;
	}

	.distance {
		position: relative;
		color: white;
		width: 100%;
		height: 20%;
		margin-top: 20%;
		font-weight: 600;
	}

	.digit {
		position: absolute;
		font-size: 85px;
		left: 50%;
		top: 10%;
		transform: translate(-50%, 0%);
	}

	.km {
		position: absolute;
		font-size: 28px;
		left: 50%;
		top: 75%;
		transform: translate(-50%, 0%);
	}

	.time {
		position: relative;
		color: white;
		width: 100%;
		height: 20%;
		margin-top: 15%;
		font-weight: 600;
	}

	.hms {
		position: absolute;
		font-size: 45px;
		left: 50%;
		top: 10%;
		transform: translate(-50%, 0%);
	}

	.text {
		position: absolute;
		font-size: 28px;
		left: 50%;
		top: 50%;
		transform: translate(-50%, 0%);
	}

	.button {
		background-color: ;
		position: absolute;
		margin-top: 125%;
		width: 100%;
		height: 200px;
	}

	.stop {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 150px;
		height: 150px;
	}

	.start {
		position: absolute;
		top: 40px;
		left: 34px;
		width: 130px;
		height: 130px;
	}

	.finish {
		position: absolute;
		top: 0px;
		right: 0px;
		width: 209px;
		height: 209px;
	}
</style>