<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="uc-box" style="margin-top: -80upx;">
			<!-- 学习时长模块 -->
			<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('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('myArticles')">
							<view class="one-img">
								<img src="../../static/images/artical.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/text.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>
	.peo{
		width: 80px;
		height: 80px;
		
		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;
		background: url('../../static/images/bg.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: 35px;
				height:35px;
			}
		}
		.one-text{
			font-weight: 500;
			font-size: 26upx;
			color: #585858;
		}
		.one-num{
			position: absolute;
			top:15px;
			right: 0px;
			text-align: center;
		}
	}

</style>
