<template>
	<view>
		<view class="mytop">
			<view class="mytop-bell"  style="height: 60upx;display: flex;justify-content:space-between;color:#ffffff;">
				<view><!--此处比较空白 ，以后增加一内容--> &nbsp;</view>
			<!-- 	<view @click="system()" style="padding: 20upx 30upx 5upx 0upx;">
					<view style="position: absolute;top:10px;right: 10px;z-index: 999;">
						<u-badge  :max="99" :value="99" shape="circle"></u-badge>
					</view>
					<u-icon name="bell" color="#ffffff" :size="30"></u-icon>
				</view> -->
			</view>
			<view class="top-user" style="">
				<view class="top-user-left">
					<view class="top-user-name" style="font-size: 1.8em;">
						{{userInfoObj.name}}
					</view>
					<view class="" style="margin-top: 8px;">
						{{userInfoObj.userNo}}
					</view>
					<view class="" style="margin-top: 8px;">
						学习时长：{{userInfoObj.studyTotalH}}小时
						<!-- 没找到这个字段 -->
					</view>
				</view>
				<view class="top-user-right" @click="navigateTo('setting')">
					<view>
						<u-avatar v-if="userInfoObj.avatar" :size="80" :src="userInfoObj.avatar"></u-avatar>
						<u-avatar v-else class="uavatar" font-size="66" :size="80" bg-color="#d9e9ff">
							<view class="peo" v-if="userInfoObj.sex === 1 "><image src="../../static/images/man.png" alt=""></view>
							<view class="peo" v-else><image src="../../static/images/woman.png" alt=""></view>
							
						</u-avatar>
					</view>
					<view  style="padding-top: 50upx;">
						<u-icon name="arrow-right" color="#ffffff" size="30"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="myhead">
			<view class="head-box">
				<view class="hear-avatar">
					<view>
						<u-avatar v-if="userInfoObj.avatar" :size="60" :src="userInfoObj.avatar"></u-avatar>
						<u-avatar v-else class="uavatar" font-size="66" :size="60" bg-color="#d9e9ff">
							<view class="peo" v-if="userInfoObj.sex === 1 "><image src="../../static/images/man.png" alt=""></view>
							<view class="peo" v-else><image src="../../static/images/woman.png" alt=""></view>
						</u-avatar>
					</view>
				</view>
				<view class="hear-info">
					<view class="info-name">
						{{userInfoObj.name}} <text>现代优秀独立女性</text>
					</view>
					<view class="information">
						<text class="grade">LV.6</text>
						<view class="Progress">
							<text>200/300</text>
							<u-line-progress :showText="false" :percentage="50" activeColor="#007DFF" height="4"></u-line-progress>
						</view>
						<view class="edit"  @click="navigateTo('setting')">
							<text>编辑资料</text><u-icon style="float: right;margin-top: 12px;" name="arrow-right" size="8"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="my-asset">
				<view>
					<text>3679</text>
					U币
					
				</view>
				<text class="asset-border"></text>
				<view>
					<text>5643.5<i style="color: #999999;font-size: 24upx;font-style:normal;padding-left:5upx">h</i></text>
					学习时长
					
				</view>
				<text class="asset-border"></text>
				<view>
					<text>113</text>
					关注我的
				</view>
				<text class="asset-border"></text>
				<view>
					<text>412</text>
					我的关注
				</view>
			</view>
			
		</view>
		<view class="uc-box" style="margin-top: -260upx;display: none;">
			<!-- 学习时长模块 -->
			<!-- <view class="uc-box-items">
				<view class="one" @click="navigateTo('toMeShares')">
					<view class="" style="font-weight: 600;font-size:22px;margin-top: 30px;">
						<img style="width: 40px;height:40px;" src="../../static/images/toShare.png">
					</view>
					<view class="" style="font-weight: 500;font-size: 28upx;color: #585858;">
						分享给我的
					</view>
				</view>
				<view class="one" @click="navigateTo('myShares')">
					<view class="" style="font-weight: 600;font-size:22px;margin-top: 30px">
						<img style="width: 40px;height:40px;" src="../../static/images/meSh.png">
					</view>
					<view class="" style="font-weight: 500;font-size: 28upx;color: #585858;">
						我分享的
					</view>
				</view>
				<view class="one" @click="navigateTo('myFavorites')">
					<view class="" style="font-weight: 600;font-size:22px;margin-top: 30px">
						<img style="width: 40px;height:40px;" src="../../static/images/collect.png">
					</view>
					<view class="" style="font-weight: 500;font-size: 28upx;color: #585858;">
						我收藏的
					</view>
				</view>
			</view> -->
		</view>
		<!-- 学习内容模块 -->
		<view class="uc-box">
			<view class="uc-box-con">
				<u-grid :border="false">
					<u-grid-item>
						<view class="one" @click="navigateTo('myub')">
							<view class="one-img">
								<img src="../../static/images/center/myubicon.png">
							</view>
							<view class="one-text">
								我的u币
							</view>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view class="one" @click="navigateTo('toMeComments')">
							<view class="one-img">
								<img src="../../static/images/center/mymedalicon.png">
							</view>
							<view class="one-text">
								我的勋章
							</view>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view class="one" @click="navigateTo('rankingList')">
							<view class="one-img">
								<img src="../../static/images/center/rankingicon.png">
							</view>
							<view class="one-text">
								我的排行榜
							</view>
						</view>
					</u-grid-item>
					<!-- <u-grid-item>
						<view class="one" @click="navigateTo('toMeComments')">
							<view class="one-img">
								<img src="../../static/images/l1.png">
							</view>
							<view class="one-text">
								@我的
							</view>
						</view>
					</u-grid-item> -->
					<!-- <u-grid-item>
						<view class="one" @click="navigateTo('myQuestions')">
							<view class="one-img">
								<img src="../../static/images/que.png">
							</view>
							<view class="one-text">
								我提问的
							</view>
						</view>
					</u-grid-item> -->
					<!-- <u-grid-item>
						<view class="one" @click="navigateTo('myAnswers')">
							<view class="one-img">
								<img src="../../static/images/answer.png">
							</view>
							<view class="one-text">
								我回答的
							</view>
						</view>
					</u-grid-item> -->
					<!-- <u-grid-item>
						<view class="one" @click="toStudyTask()">
							<view class="one-img">
								<img src="../../static/images/stuR.png">
							</view>
							<view class="one-text">
								学习任务
							</view>
							<view class="one-num">
								<u-badge numberType="overflow" max="99" :value="value" shape="circle"></u-badge>
							</view>
						</view>
					</u-grid-item> -->
					<!-- <u-grid-item>
						<view class="one" @click="toStuding(1)">
							<view class="one-img">
								<img  src="../../static/images/studing.png">
							</view>
							<view class="one-text">
								自主学习
							</view>
						</view>
					</u-grid-item> -->
					<!-- <u-grid-item>
						<view class="one" @click="toStudyHistory()">
							<view class="one-img">
								<img src="../../static/images/his.png">
							</view>
							<view class="one-text">
								历史记录
							</view>
						</view>
					</u-grid-item> -->
					<u-grid-item>
						<view class="one" @click="navigateTo('myAssesses')">
							<view class="one-img">
								<img src="../../static/images/center/Evaluation.png">
							</view>
							<view class="one-text">
								我的测评
							</view>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view class="one" @click="navigateTo('myArticles')">
							<view class="one-img">
								<img src="../../static/images/center/articon.png">
							</view>
							<view class="one-text">
								我的文章
							</view>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view class="one" @click="navigateTo('myAssesses')">
							<view class="one-img">
								<img src="../../static/images/center/interlocu.png">
							</view>
							<view class="one-text">
								我的问答
							</view>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view class="one" @click="navigateTo('myFavorites')">
							<view class="one-img">
								<img src="../../static/images/center/colle.png">
							</view>
							<view class="one-text">
								我的收藏
							</view>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view class="one" @click="navigateTo('myShares')">
							<view class="one-img">
								<img src="../../static/images/center/mycentericon.png">
							</view>
							<view class="one-text">
								我分享的
							</view>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view class="one" @click="navigateTo('toMeShares')">
							<view class="one-img">
								<img src="../../static/images/center/shareme.png">
							</view>
							<view class="one-text">
								分享给我的
							</view>
						</view>
					</u-grid-item>
					<!-- <u-grid-item>
						<view class="one" @click="navigateTo('setting')">
							<view class="one-img">
								<img src="../../static/images/per.png">
							</view>
							<view class="one-text">个人设置</view>
						</view>
					</u-grid-item> -->
					<!-- <u-grid-item>
						<view class="one" @click="navigateTo('/pages/my/message')">
							<view class="one-img">
								<img src="../../static/images/que.png">
							</view>
							<view class="one-text">消息</view>
						</view>
					</u-grid-item> -->
				</u-grid>
			</view>
			 
		</view>
	</view>

</template>

<script>
	import { mapGetters } from 'vuex'
	import userApi from "@/api/system/user";
	import {userAvatarText} from '@/utils/tools.js';
	export default {
		computed: {
			...mapGetters(['userInfo']),
			avatarText(){
				return userAvatarText(this.userInfo.name);
			}
		},
		data() {
			return {
				userInfoObj:{
					// sex:null,
					account:{
						nickName:''
					}
				},
				msgNumber:11,
				show: false,
				zoom: true,
				//徽标
				type: "error",
				value: 11
			}
		},
		onShow() {
			this.userInfoObj=this.userInfo;
			//console.log(this.userInfoObj,"我拿到的数据")
		},
		onload(){
			//this.load()
			
		},
		methods: {
			navigateTo(u) {
				uni.navigateTo({
					url: u
				})
			},
		},
		components: {

		}
	}
</script>

<style lang="scss" scoped>
	.myhead{
		height: 510upx;
		background: url('../../static/images/centerbg.png');
		background-size: 100%;
		background-repeat: no-repeat;
		padding: 0 34upx;
		padding-top: 60upx;
		box-sizing: border-box;
		.head-box {
			padding-top: 100upx;
			width: 100%;
			height: 120upx;
			display: flex;
			.hear-avatar{
				width: 120upx;
				margin-right: 28upx;
			}
			.hear-info{
				flex: 1;
				.info-name{
					font-size: 36upx;
					color: #333333;
					font-weight: 500;
					text{
						font-size: 28upx;
						font-weight: 400;
						color: #666666;
						margin-left: 26upx;
					}
				}
				.information{
					display: flex;
					.grade{
						margin-top: 12upx;
						display: inline-block;
						width: 102upx;
						height: 44upx;
						background: #DEEEFF;
						font-size: 24upx;
						color: #387DF7;
						font-weight: 600;
						text-align: center;
						line-height: 44upx;
						border-radius: 20upx;
					}
					.Progress{
						flex: 1;
						width: 100%;
						margin-left: 22upx;
						text{
							font-size: 24upx;
							color: #999999;
						}
					}
					.edit{
						margin-left: 80upx;
						text{
							float: left;
							line-height: 60upx;
							display: inline-block;
							font-size: 24upx;
							color: #333333;
							font-weight: 400;
						}
						
					}
				}
				
			}
		}
		
		.my-asset{
			border-radius: 8upx;
			width: 100%;
			height: 190upx;
			background-color: #fff;
			margin-top: 44upx;
			display: flex;
			view{
				box-sizing: border-box;
				padding-top: 60upx;
				// padding-left: 40upx;
				padding-bottom: 40upx;
				flex: 1;
				text-align: center;
				color: #999999;
				font-size: 24upx;
				text{
					display: block;
					font-size: 32upx;
					color: #333333;
					font-weight: 600;
					margin-bottom: 16upx;
				}
			}
			.asset-border{
				display: inline-block;
				width: 2upx;
				height: 36upx;
				margin-top: 80upx;
				opacity: 0.6;
				background-color: #ddd;
				border: 1px solid #ddd;
				border-radius: 10upx;
				
			}
		}
	}
	.peo{
		width: 120upx;
		height: 120upx;
		
		image{
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
	 .uavatar{
	    // border: 2upx solid #d9e9ff;
	    // color: #fff;
	    // text-align: center;
	    // font-size: 50upx;
	    // line-height: 500upx;
	    // border-radius: 50%;
	  }
	.mytop {
		height: 200px;
		display: none;
		// background: url('../../static/images/centerbg.png')
	}
	.top-user{
		display: flex;
		justify-content: space-between;
		color: #FFFFFF;
		.top-user-left{
			padding-left: 40upx;
		}
		.top-user-right{
			padding-right: 20upx;
			padding-top: 30upx;
			display: flex;
			justify-content: flex-end;
		}
	}
	.top-right img {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		margin-bottom: -40px;

	}
	.uc-box{
		margin: 10upx;
		padding: 20upx;
		.uc-box-con{
			box-shadow: #F1F6FE 0px 6px 5px;
			background-color: #FFFFFF;
			border-radius: 17px;
		}
		.uc-box-items{
			height: 114px;
			background-color: #FFFFFF;
			border-radius: 17px;
			display: flex;
			justify-content: space-between;
			box-shadow: #F1F6FE 0px 6px 5px;
			padding: 0upx 50upx 40upx 50upx;
		}
	}
	.one {
		position: relative;
		text-align: center;
		padding-bottom: 40upx;
		
		.one-img{
			font-weight: 600;
			margin-top: 24px;
			img{
				width: 48upx;
				height:48upx;
			}
		}
		.one-text{
			font-weight: 500;
			font-size: 24upx;
			color: #333;
		}
		.one-num{
			position: absolute;
			top:15px;
			right: 0px;
			text-align: center;
		}
	}

</style>
