<template>
	<view class="user-page ">
		<u-navbar :is-back="false" :title="title" :title-color="titleColor"
		:background="background" :border-bottom="false" :back-icon-color="backIconColor"></u-navbar>
		<view class="top-section-box">
			<view class="top-box">
				<view class="user-box">
					<view class="user-pic" @click="linkLoginF">
						<image class="upic" :src="userInfo.avatar?userInfo.avatar:''"></image>
					</view>
					<view class="desc-box">
						<view class="name">{{userInfo.name}}</view>
						<view class="tel">{{userInfo.phone|hidePhone}}</view>
					</view>
				</view>
			</view>
			<view class="bg_linec"></view>
		</view>
		<view class="content-box">
			<view class="pdlr18">
				<view class="card-box flex-row">
					<view class="p-list">
						<view class="txt clamp">{{userInfo.username?userInfo.username:'——'}}</view>
						<view class="tit">登录名</view>
					</view>
					<view class="p-list clamp">
						<view class="txt">{{userInfo.department?userInfo.department:'——'}}</view>
						<view class="tit">角色</view>
					</view>
				</view>
			</view>
			<view class="nav_title">系统管理</view>
			<view class="nav-box">
				<view class="nav-list" @click="linnavF('/pages/user/password-edit')">
					<view class="icon_img">
						<u-icon name="lock-open" size="46"></u-icon>
					</view>
					<view class="item-c">
						<view class="tname">修改密码</view>
						<view class="arrow_R"></view>
					</view>
				</view>
				<view class="nav-list" @click="linnavF('/pages/system/role')">
					<view class="icon_img">
						<u-icon name="man-add" size="46"></u-icon>
					</view>
					<view class="item-c">
						<view class="tname">角色管理</view>
						<view class="arrow_R"></view>
					</view>
				</view>
				<view class="nav-list" @click="linnavF('/pages/user/password-edit')">
					<view class="icon_img">
						<u-icon name="account" size="46"></u-icon>
					</view>
					<view class="item-c">
						<view class="tname">账号管理</view>
						<view class="arrow_R"></view>
					</view>
				</view>
				<view class="nav-list" @click="linnavF('/pages/user/password-edit')">
					<view class="icon_img">
						<u-icon name="clock" size="46"></u-icon>
					</view>
					<view class="item-c">
						<view class="tname">系统日志</view>
						<view class="arrow_R"></view>
					</view>
				</view>
				<view class="nav-list" @click="linnavF('/pages/user/password-edit')">
					<view class="icon_img">
						<u-icon name="attach" size="46"></u-icon>
					</view>
					<view class="item-c">
						<view class="tname">友情链接</view>
						<view class="arrow_R"></view>
					</view>
				</view>
			</view>
			<!-- 退出 -->
			<view class="yr-loginout">
				<u-button type="error" :plain="true" @click="loginOut()">退出系统</u-button>
			</view>
		</view>
		<u-modal v-model="show" :content="content" @confirm="handleLoginOut()" :show-cancel-button="true"></u-modal>
	</view>
</template>

<script>
	import {mapGetters,mapActions} from 'vuex'
	import {USER_INFO} from '@/store/mutation-types.js'
	import {showLoading,toast,setStorage,stringHide} from '@/com/utils.js'
	export default {
		data() {
			return {
				title:"个人中心",
				titleColor:"#ffffff",
				backIconColor:"#ffffff",
				background:{
					backgroundColor:"#2a7dc9"
				},
				show:false,
				content:'是否确认退出系统?'
			};
		},
		filters:{
			hidePhone(val){
				if(val){
					return stringHide(val,3,8)
				}
			}
		},
		computed:{
			...mapGetters(['userInfo'])
		},
		onLoad() {
			
		},
		onShow() {
			console.log(this.userInfo)
			this.getUserInfo()
		},
		methods:{
			getUserInfo(){
				this.$http.get('/api/users/info').then(({data})=>{
					if(data.code==200){
						let user = data.data.info;
						let userInfo = {...this.userInfo,...user};
						console.log(userInfo,'=====bbb====')
						this.$store.dispatch('USER_INFO',userInfo);
					}
					
				}).catch(err=>{
					
				})
			},
			linnavF(url){
				uni.navigateTo({
					url:url
				})
			},
			loginOut(){
				this.show = true;
			},
			//退出
			handleLoginOut(){
				this.$http.delete('/api/users/logout').then(({data})=>{
					if(data.code==200){
						uni.reLaunch({
							url:'/pages/login/login'
						})
					}
				}).catch(()=>{
					uni.reLaunch({
						url:'/pages/login/login'
					})
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.top-section-box{
	.top-box{
		background-color: #2a7dc9;
	}
	.user-box{
		display: flex;
		align-items: center;
		padding: 30rpx;
		.user-pic{
			flex: 0 0 134rpx;
			width: 134rpx;
			height: 134rpx;
			border-radius: 50%;
			border: 4rpx solid #FFFFFF;
			.upic{
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.desc-box{
			flex: 1;
			width: 0;
			color: #FFFFFF;
			padding-left: 24rpx;
			.name{
				font-size: 34rpx;
			}
			.tel{
				font-size: 34rpx;
				margin-top: 10rpx;
			}
		}
	}
	
}
.bg_linec{
	width: 100%;
	height: 110rpx;
	background-color: #2a7dc9;
	border-radius: 0 0 100% 100%;
	margin-top: -60rpx;
}
.content-box{
	padding: 0 20rpx;
	.card-box{
		min-height: 170rpx;
		padding: 30rpx 20rpx;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
		margin-top: -50rpx;
		border-radius: 12rpx;
		box-shadow:0 0 20rpx rgba(0,0,0,0.15);
		justify-content: center;
		.p-list{
			margin: 10rpx 0;
			font-size: 28rpx;
			color: #333333;
			flex: 1;
			width: 33%;
			text-align: center;
			.tit{
				color: #333333;
				font-size: 32rpx;
				margin-top: 10rpx;
			}
			.txt{
				color: #888;
			}
		}
	}
	.nav_title{
		padding: 20rpx 20rpx 0 20rpx;
		// font-weight: bold;
		font-size: 24rpx;
	}
	.nav-box{
		padding-top: 24rpx;
		background-color: #FFFFFF;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-bottom: 24rpx;
		border-radius: 12rpx;
	}
	.nav-list{
		height: 96rpx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		padding-left: 10rpx;
		position: relative;
		&::after{
			content:'';
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			border-bottom: 1px solid #e5e5e5;
			transform: scaleY(.5);
		}
		.icon_img{
			width: 46rpx;
			height: 46rpx;
			margin-right: 20rpx;
			color: #666;
			.img{
				width: 100%;
				height: 100%;
			}
		}
		.item-c{
			flex: 1;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 36rpx;
			box-sizing: border-box;
			position: relative;
			
			.arrow_R{
				width: 15rpx;
				height: 25rpx;
				background: url(../../static/img/my_arrow_right.png) no-repeat center;
				background-size: 100%;
			}
		}
		&.noBorder{
			.item-c{
				&::after{
					border: none;
				}
			}
		}
	}
}
.yr-loginout{
	margin-top: 140rpx;
}
</style>
