<template>
	<view class="my_box">
		<view class="my" v-if="hasLogin">
			<view class="box-bg">
				<u-image width="100%" height="500rpx" :src="vuex_baseImgUrl+'/myBg.png'" />
			</view>
			<view class="container">
				<view class="avatar">
					<u-image :src="reversedAvatarUrl" shape="circle" width="190rpx" height="190rpx" />
				</view>
				<view class="top">

					<view class="title">
						<text class="name">{{reversedName}}</text>
						<view class="info" @click="link('person')">
							<text class="edit-name">{{"个人资料"}}</text>
							<u-icon class="arrowRight" width="20rpx" name="arrow-right" color="#B2B2B2" size="28">
							</u-icon>
						</view>
					</view>

					<view class="cell">
						<u-cell-group :border="false">
							<u-cell title="账号与安全" :isLink="true" url="/pages/main/my/accountSafe/accountSafe"
								arrow-direction="right" :rightIconStyle="{fontSize:'28rpx'}" :border="false"
								:title-style="{padding:'0 0 0 14rpx', color:'#333', fontSize:'28rpx'}">
								<u-icon slot="icon" size="48" :name="'/static/img/my/accountSafe.png'"></u-icon>
							</u-cell>
							<u-cell title="政策与协议" :isLink="true"
								url="/pages/main/my/policiesAgreement/policiesAgreement" arrow-direction="right"
								:rightIconStyle="{fontSize:'28rpx'}" :border="false"
								:title-style="{padding:'0 0 0 14rpx', color:'#333', fontSize:'28rpx'}">
								<u-icon slot="icon" size="48" :name="'/static/img/my/policiesAgreement.png'"></u-icon>
							</u-cell>
						</u-cell-group>
					</view>
				</view>

				<view class="bottom">
					<view class="cell">
						<u-cell-group :border="false">
							<u-cell title="版本信息" :isLink="true" url="/pages/main/my/versionInfo/versionInfo"
								arrow-direction="right" :rightIconStyle="{fontSize:'28rpx'}" :border="false"
								:title-style="{padding:'0 0 0 14rpx', color:'#333', fontSize:'28rpx'}">
								<u-icon slot="icon" size="48" :name="'/static/img/my/versionInfo.png'"></u-icon>
							</u-cell>
						</u-cell-group>
					</view>
				</view>

				<view class="btn loginOut">
					<c-button type="cancel" @click="link('loginOut')" text="退出登录">
					</c-button>
				</view>
			</view>
		</view>

		<view class="my" v-else>
			<view class="box-bg">
				<u-image width="100%" height="500rpx" :src="vuex_baseImgUrl+'/myBg.png'" />
			</view>
			<view class="container">
				<view class="avatar">
					<u-image src="/static/img/my/default_avatar.png" shape="circle" width="190rpx" height="190rpx" />
				</view>
				<view class="top">

					<view class="title">
						<text class="name" @click="handelLOgin">{{`未登录/注册`}}</text>
						<view class="info" @click="handelLOgin">
							<text class="edit-name">{{"个人资料"}}</text>
							<u-icon class="arrowRight" width="20rpx" name="arrow-right" color="#B2B2B2" size="28">
							</u-icon>
						</view>
					</view>

					<view class="cell">
						<u-cell-group :border="false">
							<u-cell icon="/static/img/my/school_authen.png" title="账号与安全" :isLink="true"
								url="/pages/main/my/login/login" arrow-direction="right"
								:rightIconStyle="{fontSize:'36rpx'}" :border="false"
								:title-style="{padding:'0 0 0 14rpx', color:'#333', fontSize:'36rpx'}">
								<u-icon slot="icon" size="64" :name="'/static/img/my/school_authen.png'"></u-icon>
							</u-cell>
							<u-cell icon="/static/img/my/school_authen.png" title="政策与协议" :isLink="true"
								url="/pages/main/my/login/login" arrow-direction="right"
								:rightIconStyle="{fontSize:'36rpx'}" :border="false"
								:title-style="{padding:'0 0 0 14rpx', color:'#333', fontSize:'36rpx'}">
								<u-icon slot="icon" size="64" :name="'/static/img/my/school_authen.png'"></u-icon>
							</u-cell>
						</u-cell-group>
					</view>
				</view>

				<view class="cell bottom">
					<u-cell-group :border="false">
						<u-cell icon="/static/img/my/school_authen.png" title="版本信息" :isLink="true"
							url="/pages/main/my/login/login" arrow-direction="right"
							:rightIconStyle="{fontSize:'36rpx'}" :border="false"
							:title-style="{padding:'0 0 0 14rpx', color:'#333', fontSize:'36rpx'}">
							<u-icon slot="icon" size="64" :name="'/static/img/my/school_authen.png'"></u-icon>
						</u-cell>
					</u-cell-group>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'

	export default {
		data() {
			return {
				avatarUrl: '',
			}
		},

		onLoad() {

		},

		onShow() {
			if (this.hasLogin) {
				this.getUserInfo()
			}
		},

		computed: {
			...mapState({
				hasLogin: 'hasLogin',
				vuex_user: 'vuex_user',
				vuex_weixinUserInfo: 'vuex_weixinUserInfo',
				teacher: (state) => state.vuex_user.teacher,
				vuex_weixinUserInfo: (state) => state.vuex_weixinUserInfo,
			}),

			//name
			reversedName() {
				return (this.teacher && this.teacher.name) ? this.teacher.name : this.vuex_user.username;
			},

			//avatar
			reversedAvatarUrl() {
				if (this.teacher && this.teacher.avatarUrl) {
					return this.vuex_ossUrlPubilc + '/' + this.teacher.avatarUrl
				}
				return (this.vuex_weixinUserInfo && this.vuex_weixinUserInfo.avatarUrl) ? this.vuex_weixinUserInfo
					.avatarUrl : '/static/img/my/default_avatar.png';
			}
		},

		methods: {

			...mapActions('user', {
				getUserInfo: 'getUserInfo',
			}),

			handelLOgin() {
				this.$u.route('/pages/main/my/login/login');
			},

			link(type) {
				const {
					dispatch
				} = this.$store;

				switch (type) {

					case 'person':
						this.$u.route('/pages/main/my/personInfo/personInfo');
						break;

					case 'loginOut':
						dispatch(`user/loginOut`);
						break;


				}

			},

		}


	}
</script>

<style lang="scss" scoped>
	.my_box {
		width: 100%;
		height: 100%;
	}

	.my {
		width: 100%;
		height: 100%;
		position: relative;
		background-color: #F7F7F7;

		.box-bg {}

		.container {
			width: 100%;
			position: absolute;
			top: 320rpx;
			left: 0;
			background-color: #F7F7F7;
			padding: 0 0 100rpx 0;



			.avatar {
				position: absolute;
				top: -95rpx;
				left: 32rpx;
			}
			
			.cell /deep/ .u-cell {
				padding: 16rpx 2rpx;
			}

			.top {
				background: #FFFFFF;
				box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.03);
				border-top-left-radius: 20px;
				border-top-right-radius: 20px;

				.title {
					padding: 32rpx 0 40rpx 234rpx;
					display: flex;
					flex-flow: row nowrap;
					justify-content: space-between;


					.name {
						display: inline-block;
						width: 300rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 44rpx;
						line-height: 60rpx;
						font-size: 500;
					}

					.info {
						display: flex;
						flex-flow: row nowrap;
						padding: 0 30rpx 0 0;

						.edit-name {
							float: right;
							font-size: 26rpx;
							line-height: 36rpx;
							padding: 12rpx 6rpx 0 0;
							color: rgba(0, 0, 0, 0.65);
						}

						.arrowRight {
							float: right;
							padding: 18rpx 32rpx 0 130rpx;
						}
					}
				}

			}

			.bottom {
				margin: 16rpx 0 0 0;
				background-color: #FFFFFF;
			}

			.loginOut {
				width: 634rpx;
				margin: 48rpx auto 0;
			}




		}

		.fixed_bottom_btn {
			width: 100%;
			height: 144rpx;
			padding: 24rpx 32rpx;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 99;
			border-top: 1rpx solid #F0F0F1;

			view {
				display: inline-block;
			}

			.left_btn {
				width: 212rpx;
				margin: 0 40rpx 0 0;
			}

			.right_btn {
				width: 434rpx;
			}
		}
	}
</style>