<template>
	<view>
		<view class="top">
			<image class="back" src="/static/login/returnBack.png" @click="goBack()"></image>
			<view class="title">累计排名</view>
			<span class="empty"></span>
		</view>
		<view class="userList" v-for="(item,index) in userList" :key="index">
			<view class="rank">{{item.rank}}</view>
			<image class="icon" :src="item.icon"></image>
			<view class="info">
				<view class="username">{{item.username}}</view>
				<view class="distance">{{item.distance.toFixed(2)}}km</view>
			</view>
		</view>
		<view class="my">
			<view class="rank">{{rank}}</view>
			<image class="icon" :src="icon"></image>
			<view class="info">
				<view class="username">{{username}}</view>
				<view class="distance">{{distance.toFixed(2)}}km</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: '644a643a0c801ca878983559',
				rank: 1,
				distance: 99.99,
				type: '',
				icon: '/static/sport/icon.jpg',
				username: "不会取名字",
				userList: []
			}
		},
		methods: {
			goBack() {
				uni.reLaunch({
					url: '/pages/sport/main',
					animationType: 'pop-in',
					animationDuration: 300
				});
			}
		},
		onReady() {
			this.username = getApp().globalData.name
			this.icon = getApp().globalData.icon
			var data = uni.getStorageSync('data-to-ranking')
			var res = JSON.parse(data)
			this.type = res.type
			this.rank = res.rank
			this.distance = res.distance
			var url
			if (this.type === '跑步') {
				url = 'fe-sport-run-rank'
			} else {
				url = 'fe-sport-walk-rank'
			}
			uniCloud.callFunction({
					name: url,
					data: {}
				})
				.then(res => {
					console.log(res)
					this.userList = res.result.data.userList
				})
		}
	}
</script>

<style>
	.returnBack {
		height: 55rpx;
		width: 55rpx;
		margin-top: 60rpx;
		margin-left: 20rpx;
		margin-right: auto;
	}

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

	.userList {
		margin-top: 10px;
	}

	.my {
		position: fixed;
		bottom: 0px;
		background-color: #EDEEF0;
		width: 100%;
		height: 55px;
		padding: 5px 0;
	}

	.rank {
		position: relative;
		bottom: 15px;
		left: 20px;
		display: inline;
		font-size: 20px;
		font-weight: bold;
	}

	.icon {
		position: relative;
		top: 3px;
		left: 38px;
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}

	.info {
		position: absolute;
		margin-left: 115px;
		width: 80%;
	}

	.username {
		display: inline;
		position: absolute;
		font-size: 17px;
		font-weight: bold;
		bottom: 25px;
		color: #7F7F7F;
	}

	.distance {
		display: inline;
		position: absolute;
		font-size: 14px;
		font-weight: bold;
		bottom: 5px;
	}
</style>