<template>
	<view class="content">
		<view class="type-select">
			<uni-data-select custom-class="type" v-model="info.type" :localdata="range" :clear="false"
				@change="change"></uni-data-select>
		</view>
		<view class="accumulate">
			<view class="block1">
				<ul>
					<li>累计{{info.type}}</li>
				</ul>
				<view class="dis">
					<view class="distance">{{info.distance.toFixed(2)}}</view>
					<view class="km">公里</view>
				</view>
			</view>
			<view class="block2" @click="click">
				<ul>
					<li>本校累计排名</li>
				</ul>
				<view class="rank">{{info.rank}}</view>
			</view>
		</view>
		<image class="pic" src="/static/login/login.png"></image>
		<image class="start-button" src="/static/sport/start1.png" @click="start"></image>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				info: {
					type: '跑步',
					distance: 0,
					rank: 1
				},
				range: [{
						value: '跑步',
						text: '跑 步'
					},
					{
						value: '健走',
						text: '健 走'
					}
				]
			};
		},
		methods: {
			change() {
				uniCloud.callFunction({
						name: 'fe-sport-index',
						data: {
							userId: getApp().globalData.userId,
							type: this.info.type
						}
					})
					.then(res => {
						console.log(res)
						this.info.distance = res.result.data.totalRunningDistance
						this.info.rank = res.result.data.totalRunningRank
					});
			},
			click() {
				let item = JSON.stringify(this.info)
				uni.setStorageSync('data-to-ranking', item)
				uni.navigateTo({
					url: './ranking'
				})
			},
			start() {
				if (this.info.type === '跑步') {
					uni.navigateTo({
						url: './ready?type=跑步'
					})
				} else {
					uni.navigateTo({
						url: './ready?type=健走'
					})
				}
			}
		},
		onLoad() {
			uniCloud.callFunction({
					name: 'fe-sport-index',
					data: {
						userId: getApp().globalData.userId,
						type: '跑步'
					}
				})
				.then(res => {
					console.log(res)
					this.info.distance = res.result.data.totalRunningDistance
					this.info.rank = res.result.data.totalRunningRank
				})
		}
	}
</script>


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

	.type-select {
		width: 30%;
		margin-top: 40px;
		margin-left: 30px;
		color: #f1992d;
		/* background-color: #f1992d; */
	}

	.pic {
		margin: 0 auto;
		margin-top: 15px;
		width: 270px;
		height: 250px;
	}

	.accumulate {
		margin: 10px;
		margin-top: 10px;
	}

	.block1 {
		background-color: white;
		padding: 10px;
		margin: 2%;
		width: 40%;
		height: 110px;
		border-radius: 10px;
		float: left;
	}

	.block2 {
		background-color: white;
		padding: 10px;
		margin: 2%;
		width: 40%;
		height: 110px;
		border-radius: 10px;
		float: right;
	}

	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;
	}

	.dis {
		margin-left: 5px;
		margin-top: 16px;
	}

	.distance {
		font-size: 30px;
		font-weight: bold;
		margin-top: 12px;
		margin-left: 5px;
		display: inline;
	}

	.km {
		font-weight: bold;
		margin-left: 5px;
		margin-top: 2px;
		display: inline;
	}

	.rank {
		font-size: 45px;
		font-weight: bold;
		color: #f1992d;
		/* opacity: 80%; */
		margin-top: 10px;
		margin-left: 55px;
	}

	.start-button {
		position: relative;
		justify-content: center;
		width: 300rpx;
		height: 300rpx;
		margin: 0 auto;
		margin-top: 20px;
	}
</style>