<template>
	<view class="main">
		<view class="modify">
			<image class="modify-icon" src="/static/my/main/modify-icon.png" @click="goToModify()"></image>
		</view>
		<view class="info">
			<view class="info1">
				<view class="head-portrait" :style="'background: url('+headPortraitIcon+') no-repeat center/cover #eeeeee;'"></view>
				<view class="nickname">{{nickname}}</view>
			</view>
			<view class="info2">
				<view class="school">
					<view class="school-icon"></view>
					<view class="school-name">学&emsp;&emsp;校：{{schoolName}}</view>
				</view>
				<view class="team">
					<view class="team-icon"></view>
					<view class="team-name">运动小队：{{teamName}}</view>
				</view>
			</view>
		</view>
		<view>
			<view class="func">
				<view class="my-walking-record">
					<view class="my-walking-record-icon" @click="goToWalkingRecord()"></view>
					<view>健走记录</view>
				</view>
				<view class="running-record">
					<view class="running-record-icon" @click="goToRunningRecord()"></view>
					<view>跑步记录</view>
				</view>
				<view class="setting">
					<view class="setting-icon" @click="goToSetting()"></view>
					<view>设置</view>
				</view>
				<view class="reset-password">
					<view class="reset-password-icon" @click="goToResetpassword()"></view>
					<view>修改密码</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				headPortraitIcon:'',
				nickname:'',
				schoolName:'',
				teamName:'',
				// moblie:'',
				// gender:'',
				userId:'',
			}
		},
		methods:{
			goToModify() {
				uni.navigateTo({
					url: '/pages/my/my-modify'
				})
			},
			goToSetting() {
				uni.navigateTo({
					url: '/pages/my/my-setting'
				})
			},
			goToResetpassword() {
				uni.navigateTo({
					url: '/pages/my/my-resetpassword'
				})
			},
			goToRunningRecord() {
				uni.navigateTo({
					url: '/pages/my/my-running-record'
				})
			},
			goToWalkingRecord() {
				
				uni.navigateTo({
					url: '/pages/my/my-walking-record'
				})
			},
			getData() {
				uniCloud.callFunction({
					name: 'fe-my-information',
					data: {userId:this.userId}
				})
				.then(res => {
					console.log(res);
					
					this.teamName=res.result.data.team;
					
					//this.activityList=res.result.data.activityList,
					//console.log(res);
				});						
			},
		},
		onLoad() {
			plus.navigator.setStatusBarBackground('#EDEEF0');
			// this.headPortraitIcon=getApp().globalData.icon;
			// this.nickname=getApp().globalData.name;
			// this.schoolName=getApp().globalData.school;
			// this.teamName=
			
		},
		onShow(){
			this.headPortraitIcon=getApp().globalData.icon;
			this.nickname=getApp().globalData.name;
			this.schoolName=getApp().globalData.school;
			this.userId=getApp().globalData.userId;
			this.getData();
			// this.moblie=getApp().globalData.moblie;
			// this.gender=getApp().globalData.gender;
			
			
		}
	}
</script>

<style>
	
	.main {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #EDEEF0;
	}
	.modify{
		
		height: 10%;
	}
	.modify-icon{
		
		margin-top: 50rpx;
		margin-left: 85%;
		width: 70rpx;
		height: 70rpx;
	}
	.info{
		
		height: 60%;
	}
	.info1{
		
		height: 30%;
	}
	.head-portrait {
		
		margin-top: 50rpx;
		margin-left: 15%;
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		background-size:100% 100%;
		/* background-image:url("/static/my/main/head-portrait.png") ;
		background-repeat:no-repeat; */
		float: left;
	}
	.nickname{
		
		width: 250rpx;
		height: 50rpx;
		font-size: 60rpx;
		text-align: left;
		float: right;
		margin-top: 100rpx;
		margin-right: 100rpx;
	}
	.info2{
		
		border-radius: 20rpx;
		background-color: #FFFFFF;
		width:75%;
		height: 40%;
		margin-top: 50px;
		margin-left: auto;
		margin-right: auto;
	}
	.school{
		
		height: 50%;
		
	}
	.school-icon{
		
		width: 100rpx;
		height: 100rpx;
		margin-top: 30rpx;
		margin-left: 50rpx;
		background-size:100% 100%;
		background-image:url("/static/my/main/school-icon.png");
		background-repeat:no-repeat;
		float: left;
	}
	.school-name{
		
		width: 340rpx;
		height: 30rpx;
		margin-top: 60rpx;
		margin-right: 45rpx;
		font-size: 35rpx;
		text-align: left;
		float: right;
	}
	.team{
		
		height: 50%;
	}
	.team-icon{
		
		width: 100rpx;
		height: 100rpx;
		margin-top: 40rpx;
		margin-left: 50rpx;
		background-size:100% 100%;
		background-image:url("/static/my/main/team-icon.png");
		background-repeat:no-repeat;
		float: left;
	}
	.team-name{
		
		width: 340rpx;
		height: 30rpx;
		margin-top: 60rpx;
		margin-right: 45rpx;
		font-size: 35rpx;
		text-align: left;
		float: right;
	}
	
	.func{
		
		width:75%;
		/* margin-top: 10rpx; */
		margin-left: auto;
		margin-right: auto;
		display: flex;
		flex-direction: row;
		text-align: center;
		font-size: 20rpx;
	}
	.my-walking-record{
		
		width:200rpx;
		height: 250rpx;
	}
	.my-walking-record-icon{
		
		width: 100rpx;
		height: 100rpx;
		margin-top: 50rpx;
		margin-left: auto;
		margin-right: auto;
		background-size:100% 100%;
		background-image:url("/static/my/main/walking-record-icon.png");
		background-repeat:no-repeat;
	}
	.running-record{
		
		width:200rpx;
		height: 250rpx;
	}
	.running-record-icon{
		
		width: 100rpx;
		height: 100rpx;
		margin-top: 50rpx;
		margin-left: auto;
		margin-right: auto;
		background-size:100% 100%;
		background-image:url("/static/my/main/running-record-icon.png");
		background-repeat:no-repeat;
	}
	.setting{
		
		width:200rpx;
		height: 250rpx;
	}
	.setting-icon{
		
		width: 100rpx;
		height: 100rpx;
		margin-top: 50rpx;
		margin-left: auto;
		margin-right: auto;
		background-size:100% 100%;
		background-image:url("/static/my/main/setting-icon.png");
		background-repeat:no-repeat;
	}
	.reset-password{
		
		width:200rpx;
		height: 250rpx;
	}
	.reset-password-icon{
		
		width: 100rpx;
		height: 100rpx;
		margin-top: 50rpx;
		margin-left: auto;
		margin-right: auto;
		background-size:100% 100%;
		background-image:url("/static/my/main/reset-password-icon.png");
		background-repeat:no-repeat;
	}
</style>