<template>
	<view class="mine">
		<div class="status_bar"></div>
		<view class="mine-user u-m-b-20">
			<view class="avatar">
				<u-avatar :text="user.nickName.slice(0, 1)" size="55" bgColor="#fff" color="#2b7"></u-avatar>
			</view>
			<view class="info">
				<view class="item">
					<text class="text">{{ user.nickName }}</text>
				</view>
				<view class="item">
					手机:<text class="phone">{{user.phoneNum}}</text>
				</view>
			</view>
			<u-icon name="arrow-right" color="#fff" class="more"></u-icon>
		</view>
		<view class="content">
			<view class="module tips">
				<u-cell-group :border="false">
					<!-- <u-cell :border="false" title="我的消息" :isLink="true" >
						<u-icon slot="icon" name="chat" color="#43B96B" size="20"></u-icon>
					</u-cell> -->
					<u-cell :border="false" title="修改密码" :isLink="true" @click="fixPassword">
						<u-icon slot="icon" name="lock-fill" color="#DC7E81" size="20"></u-icon>
					</u-cell>
					<u-cell :border="false" title="版本号" :isLink="false"
						:value="`${appVersion.outVersionName}(${appVersion.outVersionCode}/${appVersion.innerVersion})`">
						<u-icon slot="icon" name="info-circle" color="#43B96B" size="20"></u-icon>
					</u-cell>
				</u-cell-group>
			</view>


			<view class="module">
				<u-cell-group :border="false">
					<u-cell :border="false" :isLink="false" @click="logOut">
						<view slot="title" style="text-align: center;color: #EB7376;">
							退出登录
						</view>
					</u-cell>
				</u-cell-group>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				appVersion: {
					//apk版本名称
					outVersionName: '',
					//wgt版本名称
					innerVersion: '',
					//apk版本号
					outVersionCode: ''
				},
				show: false
			};
		},
		computed: {
			...mapState(['user']),
		},
		onShow() {
			/** 获取版本信息 */
			uni.getSystemInfo({
			  success: (res)=> {
			    this.appVersion.outVersionName = res.appVersion;
			    this.appVersion.outVersionCode = res.appVersionCode;
			    this.appVersion.innerVersion = res.appVersion;
			  }
			});
		},
		methods: {
			...mapActions(['logout']),

			/** 处理用户退出 */
			async logOut() {
				await this.logout()
				this.$u.route({
					type: 'reLaunch',
					url: 'pages/login/index'
				})
			},

			/** 处理修改密码 */
			fixPassword() {
				uni.$u.route({
					url: 'pages/mine/password'
				});
			}
		}
	};
</script>

<style lang="scss">
	$width: 1500rpx;

	.mine {
		overflow: hidden;

		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
			background: #2b7;
		}

		&-user {
			display: flex;
			align-items: center;
			padding: 80rpx 20rpx;
			background: #2b7;
			color: #fff;
			margin-bottom: -40rpx;
			position: relative;

			&::after {
				content: "";
				display: block;
				background-color: $my-primary-color;
				width: $width;
				height: $width;
				border-radius: 50%;
				position: absolute;
				z-index: -999;
				bottom: -140rpx;
				left: 0;
				transform: translateX(-($width/2 - 375rpx));
			}

			.avatar {
				margin-right: 20rpx;
			}

			.info {
				.item {
					width: 500rpx;

					&:last-of-type {
						font-size: 30rpx;
					}

					.text {
						font-size: 36rpx;
					}

					.phone {
						font-size: 30rpx;
					}
				}
			}

			.more {
				margin: auto 0 auto auto;
			}
		}
	}

	.content {
		padding: 0 30rpx;
		box-sizing: border-box;

		.module {
			margin-bottom: 40rpx;
			border-radius: 20rpx;
			overflow: hidden;
		}
	}

	.concat {
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: $my-primary-color;
	}

	// 修改组件样式
	/deep/ .u-cell__body {
		background-color: #fff;
		height: 100rpx;
	}
</style>