<template>
	<view class="container">
		<view class="banner">
			<view class="mim-flex-wrap-left" style="padding-top: 160rpx;">
				<u-image src="@/static/images/user/user_img.png" width="120rpx" height="120rpx" shape="circle">
				</u-image>
				<view class="mim-flex-vertical" style="margin-left: 16rpx;">
					<text class="h">{{name}}</text>
					<text class="p">{{phone}}</text>
				</view>
			</view>
		</view>
		<view class="mim-view">
			<view class="storm mim-flex-wrap-space-between" v-for="(item, index) in list" :key="index"
				@click="goPage(index)">
				<text>{{item}}</text>
				<u-image src="@/static/icon/icon_right_list.png" width="40rpx" height="40rpx"></u-image>
			</view>
		</view>
		<u-modal v-model="show" :content="content" :show-cancel-button='true' :mask-close-able='true'
			@confirm="outLogin"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				phone: '',
				list: ["修改密码", "退出登录"],
				show: false,
				content: '确定要退出登录吗？'
			};
		},
		onShow() {
			this.getUserInfoFn()
		},
		methods: {
			goPage(e) {
				switch (e) {
					case 0: //修改密码页面
						this.$u.route('/pages/alterPassword/alterPassword');
						break;
					case 1: //退出登录
						this.show = true
						break;
					default:
						console.log('Unknown fruit');
						break;
				}
			},

			//获取用户信息
			async getUserInfoFn() {
				const res = await this.$u.api.getUserInfo()
				this.name = res.data.name
				this.phone = res.data.mobile
				this.$u.vuex('userRoles', res.data.roles);
				this.$u.vuex('userDepartment', res.data.department);
				console.log(this.userRoles)
			},

			//退出登录
			outLogin() {
				uni.removeStorageSync('token')
				uni.removeStorageSync('lifeData')
				this.$u.route({
					type: 'reLaunch',
					url: '/pages/login/login'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;

		.container {
			.banner {
				width: 100%;
				height: 328rpx;
				opacity: 1;
				background: #DE2E27;
				padding: 0 24rpx;

				.userAvatarUrl {
					width: 120rpx;
					height: 120rpx;
					overflow: hidden;
					border-radius: 50%;
					padding: 0;
					margin: 0;
				}

				.inform_div {
					position: absolute;
					width: 36rpx;
					height: 38rpx;
					z-index: 1;
				}

				.h {
					font-size: 36rpx;
					font-weight: normal;
					line-height: 36rpx;
					letter-spacing: 0em;
					color: #FFFFFF;
				}

				.p {
					font-size: 28rpx;
					font-weight: normal;
					line-height: 28rpx;
					letter-spacing: 0em;
					margin-top: 16rpx;
					color: #FFFFFF;
				}
			}

			.mim-view {
				padding: 0 24rpx;

				.storm {
					padding: 40rpx 0;
					border-bottom: 2rpx solid #F2F2F2;

					&:last-child {
						border-bottom: none;
						padding-bottom: 40rpx;
					}

					&:first-child {
						padding-top: 40rpx;
					}

					text {
						font-size: 32rpx;
						font-weight: bold;
						letter-spacing: 0em;
						color: #333333;
					}
				}
			}


		}
	}
</style>