<template>
	<view class="logout-popup">
		<view class="top-right">
			<view class="nav-bar-userName" @click="open">
				<image src="../static/img/username.png" alt="" class="nav-bar-username-img">
					<!-- {{userInfo.realName}} -->
			</view>
			<!-- <view class="BLE" @click="setHandle">
				BEL
			</view> -->
		</view>
		<uni-popup background-color="#fff" @change="change" ref="popup" type="bottom" class="popup">
			<view class="popup-content">
				<view class="userName-info">
					<text class="name">姓名：{{userInfo.realName}}</text>
					<!-- <text class="zw">职位：{{userInfo.position}}</text> -->
				</view>
				{{userInfo.position}}
				<button type="warn" @click="backLogo" class="back-logn">退出登录</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				userInfo:{}
			}
		},
		mounted() {
			this.userInfo = uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')):''
		},
		methods: {
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
			},
			change(e) {
				this.show = e.show
			},
			async backLogo() {
				const res = await this.$baseAPI.request(this.$portAdress.logout, {}, 'POST')
				console.log(res)
				if (res.code === 0) {
					uni.clearStorageSync()
					uni.navigateTo({
						url: '/pages/logo/index'
					});
				} else if(res.code === 401){
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
					uni.navigateTo({
						url: '/pages/logo/index'
					});
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				}
			},
			// 点击设置按钮
			setHandle() {
				uni.redirectTo({
					url: '/pages/set/index'
				});
				this.setShow = false
			},
		}
	}
</script>

<style lang="less" scoped>
	.top-right {
		display: flex;
		align-items: center;
	}
	.BLE {
		margin-left: 10px;
	}
	.nav-bar-userName {
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 50%;
		background-color: #36546e;
		color: #fff;
	}

	.nav-bar-username-img {
		width: 28rpx;
		height: 28rpx;
	}
	.popup-content {
		background-color: #fff;
		height: 20vh;
		width: 100vw;
		position: relative;
	}
	.userName-info {
		padding: 40rpx;
		color: #002648;
		font-size: 32rpx;
		text-align: center;
		.name,.zw {
			padding: 10rpx 20rpx;
		}
		.name {
			// margin-right: 10rpx;
			// border-right:1px solid #ccc
		}
	}
	.back-logn {
		position: absolute;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 90vw;
	}
</style>
