<template>
	<view class="profile">
		<view class="nav-bar" style="position: relative;">
			<image style="position: absolute;left: 0;top: 0;display: block;width: 100%;height: 100%;z-index: 1;"
				:src="myTopBgSrc" mode=""></image>
		</view>
		<view class="num-info" style="position: relative;z-index: 3;">
			<view class="user-info" style="z-index: 2;">
				<view class="user-head">
					<!-- #ifdef MP-WEIXIN -->
					<view class="avatarImg">
						<open-data type="userAvatarUrl" default-avatar="/static/other/timg.jpg"></open-data>
					</view>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<u-avatar :src="vuex_user.avatar" size="100"></u-avatar>
					<!-- #endif -->
				</view>
				<view>
					<view style="font-weight: bold;" class="user-name">{{vuex_user.name}}</view>
					<view class="user-phone">
						<u-tag text="正式员工" v-if="vuex_user.type === 'employee'"/>
						<u-tag text="相关方" v-if="vuex_user.type === 'remployee'"/>
						<u-tag text="访客" v-if="vuex_user.type === 'visitor'"/>
					</view>
				</view>
				<view>{{vuex_version}}</view>
				<!-- <button type="default" class="modify-info" @click="goInto('myDataChange')">完善资料</button> -->
			</view>
		</view>
		<view class="enter-list">
			<view class="enter-item" @click="goInto('certificate')">
				<image class="left-icon" src="../../static/my/wodeshenqing.png" mode=""></image>
				<text class="title-text">我的证书</text>
				<uni-icons size="13" color="#b9b9b9" class="right-icon" type="right"></uni-icons>
			</view>
			<view class="enter-item" @click="goInto('myData')">
				<image style="width: 34rpx;height: 30rpx;" class="left-icon" src="../../static/my/wodeziliao.png"
					mode=""></image>
				<text class="title-text">我的资料</text>
				<uni-icons size="13" color="#b9b9b9" class="right-icon" type="right"></uni-icons>
			</view>
			<view class="enter-item" @click="goInto('clockIn')">
				<image style="width: 34rpx;height: 30rpx;" class="left-icon" src="../../static/my/wodeziliao.png"
					mode=""></image>
				<text class="title-text">我的打卡记录</text>
				<uni-icons size="13" color="#b9b9b9" class="right-icon" type="right"></uni-icons>
			</view>
			<view class="enter-item">
				<image style="width: 34rpx;height: 30rpx;" class="left-icon" src="../../static/my/wodeziliao.png"
					mode=""></image>
				<text class="title-text">我的访客库</text>
				<uni-icons size="13" color="#b9b9b9" class="right-icon" type="right"></uni-icons>
			</view>
		</view>
		<view class="sign-out">
			<button type="default" @click="signoutFn" class="sign-out-btn">退出账号</button>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '用户名',
				mobile: '1478585',
				head: '',
				userName: '',
				userId: '',
				getBusinessTripDayTimeCon: '',
				getLeaveTimePaidLeaveCon: '',
				getLeaveTimeCon: '',
				myTopBgSrc: require("../../static/my/my-bg.jpg"),
				imageUrl: '',
				isHaveLookApply: false,
				annualLeaveDay: 0.00, //年假剩余天数
			}
		},
		onShow() {
			// this.getUserInfo();
		},
		methods: {
			goInto(type) {
				if (type == "certificate") {
					uni.navigateTo({
						url: '/pages/my/myCertificates'
					})
				}
				if (type == "myData") {
					uni.navigateTo({
						url: '/pages/my/myInfo'
					})
				}
				if (type == "myDataChange") {
					uni.navigateTo({
						url: '/pages/my/myInfoChange'
					})
				}
				if (type == "clockIn") {
					uni.navigateTo({
						url: '/pages/my/clock_in'
					})
				}
			},
			getUserInfo() {
				var promise;
				var that = this;
				promise = new Promise(function(resolve, reject) {
					that.$u.api.authUser().then(res => {
						if (res.statusCode === 200) {
							const principal = res.data.principal;
							that.username = principal.realname;
							that.mobile = principal.mobile || '';
							that.userName = principal.username;
							that.userId = principal.userId;
							that.$store.commit("SET_AUTHORITIES", res.data.authorities);
							//获取微信头像
							// this.wxUserImg(principal.username);
							resolve()
						} else {
							uni.showToast({
								title: '获取用户信息失败',
								icon: 'none'
							})
						}
					}).catch(err => {
						uni.showToast({
							title: 'user请求失败',
							icon: 'none'
						})
					})
				})
				promise.then(function() {
					userConnection(that.userName).then(res => {
						that.imageUrl = res.data.data.imageUrl;
					}).catch(err => {
						uni.showToast({
							title: '微信头像请求失败',
							icon: 'none'
						})
					})
					//查看当前用户路由
					getCurrentUserRoute(that.userName).then(res => {
						if (res.statusCode === 200) {

							const routes = res.data.data.routes;
							const obj = routes.find(item => {
								return item.path === '/new_apply_approval'
							})
							if (obj) {

								that.isHaveLookApply = Boolean(obj.children.find(item => {
									return item.path === 'look_apply'; //查看是否有我的审批
								}))
							}
						} else {
							uni.showToast({
								title: '获取当前用户路由失败',
								icon: 'none'
							})
						}
					}).catch(err => {
						uni.showToast({
							title: '获取路由失败',
							icon: 'none'
						})
					})
				})

			},

			signoutFn() {
				var that = this;
				this.$u.api.loginOut().then(()=>{
					that.$u.vuex('vuex_token', null);
					try {
						uni.removeStorageSync('mySecret');
					} catch (e) {
						// error
					}
					uni.reLaunch({
						url:'/pages/login/login_?autoLoading=no'
					})
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #f3fbff;
	}
</style>
<style scoped>
	.profile {
		position: relative;
		background-color: #f3fbff;
		padding-bottom: 70rpx;
	}

	.nav-bar {
		height: 210rpx;
		background-color: #2cade8;
		color: #FFFFFF;
		display: flex;
		align-items: center;
	}

	.user-info {
		width: 680rpx;
		height: 122rpx;
		display: flex;
		align-items: center;
		margin: 0 auto;
	}

	.user-head {
		width: 114rpx;
		height: 114rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 30rpx;
	}

	.user-head image {
		width: 114rpx;
		height: 114rpx;
	}

	.user-name {
		font-family: PingFang-SC-Bold;
		font-size: 34rpx;
		color: #666666;
	}

	.user-phone {
		font-family: AdobeHeitiStd-Regular;
		font-size: 22rpx;
		color: #b7d3fa;
	}

	.modify-info {
		width: 136rpx;
		height: 50rpx;
		background-image: linear-gradient(253deg, #febe3d 0%, #ff890a 100%);
		border-radius: 25rpx;
		font-family: PingFang-SC-Medium;
		font-size: 24rpx !important;
		line-height: 50rpx;
		padding-right: 0rpx;
		padding-left: 0rpx;
		color: #ffffff;
		margin-right: 0rpx;
	}

	.num-info {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 720rpx;
		height: 199rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(101, 176, 249, 0.41);
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: -130rpx;
		text-align: center;
	}

	.num-content {
		font-size: 40rpx;
		color: #2c6fd9;
		font-weight: bold;
	}

	.text-content {
		font-family: PingFang-SC-Medium;
		font-size: 26rpx;
		color: #333333;
	}

	.enter-list {
		padding: 0 11rpx;
		box-sizing: border-box;
		width: 720rpx;
		/* height: 405rpx; */
		background-color: #ffffff;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 28rpx;
	}

	.enter-item {
		position: relative;
		border-bottom: 1rpx solid #f8f8f8;
	}

	.title-text {
		margin-left: 78rpx;
		line-height: 102rpx;
		font-family: PingFang-SC-Medium;
		font-size: 28rpx;
		color: #666666;
	}

	.enter-item .left-icon {
		width: 29rpx;
		height: 32rpx;
		position: absolute;
		top: 50%;
		left: 26rpx;
		transform: translateY(-50%);
	}

	.enter-item .right-icon {
		position: absolute;
		top: 50%;
		right: 20rpx;
		transform: translateY(-50%);
		font-size: 36rpx !important;
	}

	.sign-out-btn {
		width: 711rpx;
		height: 90rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 28rpx;
		font-family: PingFang-SC-Medium;
		font-size: 28rpx;
		line-height: 90rpx;
		color: #d30101;
	}

	.sign-out-btn:after {
		border: none !important;
	}
</style>
