<template>
	<view class="user">
		<!-- 头部 -->
		<view class="user-wrap">
			<view class="setting iconfont icon31shezhi"></view>
			<view class="info">
				<image class="avatar" mode="aspectFill" :src="headerVerify.userInfo.icon"></image>
				<view class="nickname">{{headerVerify.userInfo.name}}</view>
				<view class="nickname">（ 工号：{{headerVerify.userInfo.number}} ）</view>
				<view class="nickname">{{headerVerify.userCont.companyname}} — {{headerVerify.userCont.maindeparmentname}} — {{headerVerify.userCont.positionname}}</view>
			</view>
		</view>
		
		<view class="com-item">
			<view class="com-wrap">
				<view class="cell" v-for="(item, index) in serverList" :key="index"  @click="jumpUrlPage(item.path)">
					<view class="cell-left">
						<image class="cell-icon" :src="item.icon" mode="aspectFill"></image>
						<view class="cell-text">{{ item.title }}</view>
					</view>
					<view class="iconfont iconmore1"></view>
				</view>
			</view>
		</view>
		<view class="containerbution">
			
			<button type="warn" :disabled="loading" :loading="loading" @click="exitlogin">退出登录</button>
			
		</view>
		
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading:false,
				headerVerify:{
					userkey:"",
					token:"",
					userCont:"",
					userInfo:""
				},
				serverList: [
					{
						title: '被考核记录',
						icon: '/static/images/status-01.png',
						path: '/pages/user/myrecords'
					},
					{
						title: '修改密码',
						icon: '/static/images/status-05.png',
						path: '/pages/user/editpwd'
					},
					{
						title: '版本',
						icon: '/static/images/icon-about.png',
						text: '#'
					}
				]
			};
		},
		onLoad() {
			let _this = this
			//判断Token是否有效
			let systemCache = _this.$commonMethod.getSystemCacheDate('myCache')
			if(!systemCache){
				_this.$commonMethod.JumpUrl('/pages/login/login')
			}else{
				let currentTime = new Date().getTime() - systemCache.tokenTime
				if (currentTime >= 10800000){
					_this.$commonMethod.verifyPowerIsTrue('myCache')
				}
			}
			_this.headerVerify.userkey = systemCache.userKey
			_this.headerVerify.token = systemCache.token
			_this.headerVerify.userInfo = systemCache.userInfo
			_this.headerVerify.userCont = systemCache.userCont
			console.log(_this.headerVerify)
		},
		methods:{
			//退出登录
			exitlogin(){
				let _this = this
				_this.loading = true
				uni.request({
					url:_this.$commonMethod.localhostUrl+'/kpiapi/base/signout',
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						// 'User-Agent':250,
						'user-key': _this.headerVerify.userkey,
						'user-token': _this.headerVerify.token
					},
					method:'POST',//请求方式，必须为大写
					success: (res) => {
						
						console.log(res)
						let callBackDate = res.data
						if(callBackDate.code == 0){
							_this.$refs.uToast.show({
								message: callBackDate.msg,
								duration: 500 * 1,
								position:'bottom',
								complete(){
									_this.$commonMethod.JumpUrl("/pages/login/login");
								}
							})
						}else{
							_this.$refs.uToast.show({
								message: callBackDate.msg,
								duration: 1000 * 1,
								position:'bottom',
								complete(){
									_this.loading = false
								}
							})
						}
					},
					fail:function(e){
						console.log('接口返回--login--2--',e);
						_this.$refs.uToast.show({
							message: e,
							duration: 1000 * 1,
							position:'bottom',
							complete(){
								_this.loading = false
							}
						})
					},
				})
			},
			//跳转页面
			jumpUrlPage(url,date){
				if(date){
					this.$commonMethod.JumpUrl(url+"?data="+JSON.stringify(data));
				}else{
					this.$commonMethod.JumpUrl(url)
				}
			},
			
		}
	}
</script>

<style lang="scss">
page {
	background: #f2f2f2;
}
.btn-hover {
	background: #f2f2f2 !important;
}
.user {
	.user-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 50vw;
		padding: 30rpx;
		z-index: 9;
		border-radius: 0 0 20% 20%;
		background: url('/static/images/3.jpg') no-repeat;
		background-size: cover;
		.setting {
			color: #fff;
			position: absolute;
			top: 60rpx;
			left: 60rpx;
			font-size: 50rpx;
		}
		.info {
			position: absolute;
			text-align: center;
			margin-bottom: 20rpx;
			.avatar {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
			}
			.nickname {
				color: #fff;
				font-size: 28rpx;
			}
		}
	}
	.order-status {
		padding: 0 20rpx;
		margin-top: -10vw;
		.status-wrap {
			border-radius: 25rpx;
			overflow: hidden;
			.status-list {
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				background: #fff;
				padding-top: 30rpx;
				padding-bottom: 30rpx;
				.status-item {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.item-icon {
						line-height: 1;
						font-size: 65rpx;
						color: #bbb;
					}
					.item-text {
						font-size: 28rpx;
						color: #666;
						margin-top: 5rpx;
					}
				}
			}
		}
	}
	.com-item {
		padding-left: 20rpx;
		padding-right: 20rpx;
		// margin-top: 20rpx;
		margin-top: -10vw;
		.com-wrap {
			border-radius: 25rpx;
			overflow: hidden;
		}
	}
	.cell {
		height: 80rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		border-bottom: 1px solid #f8f8f8;
		&:active {
			background: #f2f2f2;
		}
		&:last-child {
			border-bottom: none !important;
		}
		.cell-left {
			display: flex;
			align-items: center;
			.cell-icon {
				width: 50rpx;
				height: 50rpx;
			}
			.cell-text {
				color: #666;
				font-size: 28rpx;
				margin-left: 20rpx;
			}
		}
		.iconfont {
			font-size: 40rpx;
			color: #999;
		}
	}
	.containerbution{
		padding-left: 20rpx;
		padding-right: 20rpx;
		margin-top: 20rpx;
	}
}
</style>
