<template>
	<view class="main">
		<view class="top">
			<image @click="goBack" class="back" :src="'/static/my/exit-icon.png'"></image>
			<view class="title">健走记录</view>
			<span class="empty"></span>
		</view>
		
		<view class="record" v-for="(item,index) in walkingrecordList" :key="index" @click="goToDetail(item.walkingId)">
			<view class="icon">

			</view>
			<view class="content">
				<view class="content1">
					<view class="distance">
						{{item.distance.toFixed(2)}}公里
					</view>
					<image class="type-icon" :src="'/static/my/my-record/walking.png/'"></image>
				</view>
				<view class="content2">
					<view class="duration">
						{{item.duration}}
					</view>
					<image class="duration-icon" :src="'/static/my/my-record/duration.png'"></image>
					<view class="pace">
						{{parseInt(item.pace/60).toString().padStart(2,0)}}'{{parseInt(item.pace%60).toString().padStart(2,0)}}''
					</view>
					<image class="pace-icon" :src="'/static/my/my-record/pace.png'"></image>
					<view class="date">
						{{item.startDatetime}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				walkingrecordList: [],
				type:'健走',
			}
		},
		methods: {
			goBack() {
				uni.reLaunch({
					url: '/pages/my/main',
					animationType: 'pop-in',
					animationDuration: 300
				})
			},
			goToDetail(walkingId) {
				
				uni.reLaunch({
					url: '/pages/my/finish?id=' + walkingId +'&type=' + this.type,
					animationType: 'pop-in',
					animationDuration: 300
				})
			},
			getData() {
				// console.log('a');
				uniCloud.callFunction({
						name: 'fe-my-walkingList',
						data: {
							userId: getApp().globalData.userId
						}
					})
					.then(res => {

						//console.log(res);
						this.walkingrecordList = res.result.data.walkingList;
						this.walkingrecordList.forEach((item, index) => {
							item.duration = this.formatSeconds(item.duration);
							item.startDatetime = this.formatDate(item.startDatetime);
						});
					});
			},
			formatDate(value){
				const str = value + '';  //转成字符串
				let arr = str.split(' ');
				return arr[0];
			},
			formatSeconds(value) {
				var secondTime = parseInt(value); // 秒
				var minuteTime = 0; // 分
				var hourTime = 0; // 小时
				var result = "";
				if (secondTime > 60) { //如果秒数大于60，将秒数转换成整数
					//获取分钟，除以60取整数，得到整数分钟
					minuteTime = parseInt(secondTime / 60);
					//获取秒数，秒数取佘，得到整数秒数
					secondTime = parseInt(secondTime % 60);
					//如果分钟大于60，将分钟转换成小时
					if (minuteTime > 60) {
						//获取小时，获取分钟除以60，得到整数小时
						hourTime = parseInt(minuteTime / 60);
						//获取小时后取佘的分，获取分钟除以60取佘的分
						minuteTime = parseInt(minuteTime % 60);
					}
				}
				//var result = "" + parseInt(secondTime) + "";
				if (secondTime >= 10) {
					result = "" + parseInt(secondTime) + "";
				} else {
					result = "0" + parseInt(secondTime) + "";
				}
				if (minuteTime >= 10) {
					result = "" + parseInt(minuteTime) + ":" + result;
				} else {
					result = "0" + parseInt(minuteTime) + ":" + result;
				}
				if (hourTime >= 10) {
					result = "" + parseInt(hourTime) + ":" + result;
				} else {
					result = "0" + parseInt(hourTime) + ":" + result;
				}

				return result;
			},
			onLoad() {

				plus.navigator.setStatusBarBackground('#EDEEF0');
				this.getData();
			}
		}
	}
</script>

<style>
	.main {
		position: absolute;
		width: 100%;
		height: 100%;
		/* background-color: #EDEEF0; */
	}

	.top {
		width: 100%;
		height: 50px;
		background-color: #EDEEF0;
		text-align: center;
	}

	.back {
		width: 40px;
		height: 30px;
		margin-top: 10px;
		margin-bottom: 10px;
		float: left;
		margin-left: 10px;
	}

	.empty {
		width: 40px;
		height: 30px;
		margin-top: 10px;
		margin-bottom: 10px;
		float: right;
		margin-right: 10px;
	}

	.title {
		font-size: 20px;
		margin-top: 10px;
		font-weight: bold;
		color: #f1992d;
		display: inline-block;
	}

	.record {
		border-bottom: 2rpx solid #EDEEF0;
		width: 100%;
		height: 200rpx;
		/* display: flex;
		flex-direction: row; */

	}

	.icon {
		border: 2rpx solid #EDEEF0;
		width: 150rpx;
		height: 150rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
		float: left;
	}

	.content {

		width: 72%;
		height: 100%;
		/* margin: 10rpx 0 10rpx 30rpx; */
		float: right;
	}

	.content1 {

		height: 50%;

	}

	.distance {
		width: 70%;
		font-weight: bold;
		font-size: 55rpx;
		margin-top: 35rpx;
		float: left;
	}

	.type-icon {

		float: right;
		margin-top: 50rpx;
		margin-right: 70rpx;
		width: 50rpx;
		height: 50rpx;
	}

	.content2 {
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		font-size: 25rpx;
	}

	.duration {}

	.duration-icon {
		width: 35rpx;
		height: 35rpx;
	}

	.pace {

		margin-left: 60rpx;
	}

	.pace-icon {
		width: 35rpx;
		height: 35rpx;
	}

	.date {

		margin-left: 90rpx;
	}
</style>