<template>
	<view class="content">
		<view class="top">
			<view class="vheight">
			</view>
			<view class="top-bg">
				<image src="../../static/img/user-bg.png" mode=""></image>
			</view>
			<view class="userinfo-box">
				<image class="avatar" :src="baseURL+userInfo.avatar" mode=""></image>
				<view class="name">
					{{userInfo.nickname}}
				</view>
			</view>

		</view>
		<view class="tou">
		</view>
		<view class="main">
			<view class="main-item flex" @click="navTo('/pages/user/userInfo')">
				<view class="main-left">
					<image class="main-icon" src="../../static/icon/user1.png" mode="widthFix"></image>
					<view class="main-name">
						个人资料
					</view>
				</view>
				<image class="main-jt" src="../../static/icon/user-bk.png" mode=""></image>
			</view>
			<view class="main-item flex" @click="cancel()">
				<view class="main-left">
					<image class="main-icon" src="../../static/icon/user2.png" mode="widthFix"></image>
					<view class="main-name">
						退出登录
					</view>
				</view>
				<image class="main-jt" src="../../static/icon/user-bk.png" mode=""></image>
			</view>
		</view>
		<!-- <m-tabbar v-if="userInfo.user_type==2" fixed fill current="1" :tabbar="tabbar"></m-tabbar>
		<m-tabbar fixed fill v-if="userInfo.user_type!=2" current="2" :tabbar="tabbar1"></m-tabbar> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		logout
	} from '@/api/login.js'
	export default {
		data() {
			return {};
		},
		computed: {
			...mapState('user', ['userInfo', 'hasLogin', 'urlFile']),
			...mapState(['baseURL']),

		},
		onLoad() {},
		onShow() {
			if (this.userInfo.user_type != 2) {
				uni.setTabBarItem({
					index: 1,
					"pagePath": "pages/user/grade",
					"iconPath": "../../static/tabbar/tab-grade.png",
					"selectedIconPath": "../../static/tabbar/tab-grade-current.png",
					"text": "我的成绩",
					"visible": true
				});
			} else {
				uni.setTabBarItem({
					index: 1,
					"pagePath": "pages/user/grade",
					"iconPath": "../../static/tabbar/tab-grade.png",
					"selectedIconPath": "../../static/tabbar/tab-grade-current.png",
					"text": "我的成绩",
					"visible": false
				});
			}
		},
		onReachBottom() {},
		onReady() {},
		methods: {
			...mapMutations('user', ['logout']),
			cancel() {
				let obj = this;
				uni.showModal({
					content: '确定要退出登录么',
					success: e => {
						if (e.confirm) {
							logout({})
								.then(e => {
									obj.logout();
									uni.navigateTo({
										url: '/pages/public/login'
									});
								})
								.catch(e => {
									console.log(e);
								});
						}
					}
				});
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			}
		}
	};
</script>

<style lang="scss">
	page,
	.content {
		min-height: 100%;
		height: auto;
		background: #FFFFFF;
	}

	.vheight {
		height: var(--status-bar-height);
		width: 100%;
	}

	.top {
		width: 750rpx;
		height: 416rpx;
		position: relative;

		.top-bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.userinfo-box {
			position: relative;
			z-index: 2;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 80rpx 0 0;
			line-height: 1;

			.avatar {
				width: 102rpx;
				height: 102rpx;
				border-radius: 50%;
			}

			.name {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				margin-top: 20rpx;
			}
		}
	}

	.tou {
		position: relative;
		z-index: 2;
		width: 100%;
		height: 100rpx;
		margin-top: -80rpx;
		border-top-left-radius: 60rpx;
		border-top-right-radius: 60rpx;
		background: #FFFFFF;
	}

	.main-item {
		padding: 30rpx 70rpx;

		.main-left {
			display: flex;
			align-items: center;

			.main-icon {
				width: 32rpx;
			}

			.main-name {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #1A3B34;
				margin-left: 34rpx;
			}
		}

		.main-jt {
			width: 13rpx;
			height: 22rpx;

		}
	}
</style>