<template>
	<view class="center">
		<image class="pic_hp_tbbg" src="/static/img/pic_mine_tbbg.png" mode=""></image>
		<view class="center_box">
			<u-navbar ref="uNavbar" :border-bottom="false" :back-icon-color="setNav.backColor" :is-back="setNav.isdisPlayNavTitle"
			 :title-size="setNav.size" :title-bold="setNav.bold" :title="setNav.navTitle" :title-color="setNav.color"
			 :background="setNav"></u-navbar>
			<view class="userInfo">
				<view class="img">
					<image src="../../../static/img/icon_hp_hp.png"></image>
				</view>
				<view class="info" style="flex: 1;">
					<view class="info-one">
						<view class="name">{{userInfo.userName}}</view>
						<view class="position">{{userInfo.nickName}}</view>
					</view>
					<!-- <view class="info-two">{{userInfo.dept && userInfo.dept.deptName}}</view> -->
					<view class="info-three" style="padding-left: 0;display: flex;align-items: center;" v-if="userInfo.phonenumber">
						<image style="width: 20rpx;height: 28rpx;" src="/static/img/icon_mine_tel.png" mode=""></image>
						<view class="" style="margin-left: 20rpx;">{{userInfo.phonenumber}}</view>
					</view>
				</view>
				<view class="changePassword" @click="jumpPwd">
					<view>修改密码</view>
					<image src="../../../static/img/icon_mine_white_enter.png"></image>
				</view>
			</view>
			<view class="ul">
				<view class="li" @click="addCollection" v-if="roles.indexOf('user-admin') != -1">
					<view class="icon">
						<image src="../../../static/img/icon_mine_csw.png"></image>
					</view>
					<view class="middle">催收文</view>
					<view class="jump">
						<image src="../../../static/img/icon_black_enter.png"></image>
					</view>
				</view>
				<view class="li" @click="addSchedule">
					<view class="icon">
						<image src="../../../static/img/icon_mine_csw.png"></image>
					</view>
					<view class="middle">待办
					<view class="tips" v-if="num!=0" >
							<view>{{num}}</view>
						</view>
					</view>
					<view class="jump">
						<image src="../../../static/img/icon_black_enter.png"></image>
					</view>
				</view>
				<view class="li" @click="addToExamine" v-if="roles.indexOf('user-admin') != -1">
					<view class="icon">
						<image src="../../../static/img/icon_mine_sh.png"></image>
					</view>
					<view class="middle">审核
					<view class="tips" v-if="num2!=0">
							<view>{{num2}}</view>
						</view>
					</view>
					<view class="jump">
						<image src="../../../static/img/icon_black_enter.png"></image>
					</view>
				</view>
				<view class="li" @click="addFiled" v-if="roles.indexOf('user-admin') != -1">
					<view class="icon">
						<image src="../../../static/img/icon_mine_csw.png"></image>
					</view>
					<view class="middle">已归档</view>
					<view class="jump">
						<image src="../../../static/img/icon_black_enter.png"></image>
					</view>
				</view>
				<view class="li" @click="logout">
					<view class="icon">
						<image src="../../../static/img/icon_mine_tcdl.png"></image>
					</view>
					<view class="middle">退出登录</view>
					<view class="jump">
						<image src="../../../static/img/icon_black_enter.png"></image>
					</view>
				</view>
			</view>

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

<script>
	const infoThree = require('../../../static/img/icon_mine_tel.png')
	export default {
		data() {
			return {
				setNav: {
					backgroundColor: '', //背景色
					color: '#fff', //字体颜色
					bold: true,
					size: '36',
					backColor: '#ffff',
					isdisPlayNavTitle: false, //是否显示返回按钮
					navTitle: '我的' //导航标题
				},
				infoThree: {
					'background': 'url('+ infoThree +') no-repeat',
					'background-size': '20rpx 28rpx',
					'background-position': '0 50%'
				},
				userInfo: {},
				num: 0,
				roles: [],
				num2: 0,
			}
		},
		onLoad() {

		},
		onShow() {
			this.getInfo()
		},
		computed: {

		},
		methods: {
			async getInfo () {
				let that = this
				let res = await that.$u.get('system/user/getInfo')
				that.userInfo = res.user
				that.roles = res.roles
				let res1 = await this.$u.post(`boman-web-core/message/toDoMessage`, {
						 "pageNo": 1,
				        "pageSize": 1000000,
				        "username": that.userInfo.userName
					})
					if (res1.data && res1.data.rows) {
						this.num = res1.data.rows.length
					} else {
						this.num = 0
					}
				this.backlog()
			},
			async backlog () {
				let res = await this.$u.post(`jflow/p/cs/task/backlog/list`, {
					page: 1,
					pageSize: 10,
					searchType: '0,1',
					"userId": this.userInfo.id,
					excuStatus: 0
				})
				this.num2 = res.data.records.length
			},
			async logout () {
				let that = this
				let res = await that.$u.delete('auth/logout')
				console.log(res)
				if (res.code == 200) {
					uni.removeStorageSync('authToken')
					uni.navigateTo({
						url: '/pages/tabbar/login/index'
					})
				}
			},
			addCollection() {
				uni.navigateTo({
					url: '/pages/centerView/collection/index'
				})
			},
			addSchedule() {
				uni.navigateTo({
					url: '/pages/centerView/schedule/index'
				})
			},
			addToExamine() {
				uni.navigateTo({
					url: '/pages/centerView/toExamine/index'
				})
			},
			addFiled() {
				uni.navigateTo({
					url: '/pages/centerView/filed/index'
				})
			},
			jumpPwd() {
				uni.navigateTo({
					url: '/pages/centerView/changPwd/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.center {
		// background: url(../../../static/img/pic_mine_tbbg.png) no-repeat;
		// background-size: 100% 416rpx;
		height: 100%;

		.pic_hp_tbbg {
			width: 100%;
			height: 460rpx;
		}
		.center_box {
			position: absolute;
			top: 0;
			width: 100%;
		}
		.userInfo {
			display: flex;
			padding: 50rpx 40rpx 70rpx 40rpx;
			position: relative;
			align-items: center;
			.changePassword {
				transform: translateY(-50%);
				color: #fff;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				right: 34rpx;
				image {
					width: 14rpx;
					height: 26rpx;
					margin-left: 18rpx;
				}
			}
			.img {
				width: 128rpx;
				height: 128rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 36rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.info {
				.info-one {
					display: flex;
					align-items: center;
					flex: 1;
					.name {
						font-size: 35rpx;
						font-weight: bold;
						color: #FFFFFF;
					}

					.position {
						// width: 112rpx;
						padding: 0 20rpx;
						height: 36rpx;
						background: #116CB9;
						border-radius: 18rpx;
						text-align: center;
						font-size: 20rpx;
						color: #FFFFFF;
						white-space: nowrap;
						margin-left: 18rpx;
						line-height: 36rpx;
					}
				}

				.info-two {
					font-size: 22rpx;
					color: #DFF0FF;
					margin-top: 18rpx;

				}

				.info-three {
					font-size: 26rpx;
					color: #DFF0FF;
					margin-top: 20rpx;
					padding-left: 30rpx;
				}
			}
		}

		.ul {
			.li {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 35rpx;
				margin: 0 auto;
				width: 683rpx;
				height: 125rpx;
				background: #FFFFFF;
				box-shadow: 0px 0px 19rpx 3rpx rgba(216, 215, 215, 0.72);
				border-radius: 7rpx;
				margin-top: 28rpx;

				&:first-child {
					margin-top: 0;
				}

				.icon {
					min-width: 48rpx;
					height: 48rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.middle {
					flex: 1;
					margin-left: 33rpx;
					font-size: 31rpx;
					font-weight: 500;
					color: #343434;
					position: relative;

					.tips {
						// width: 32rpx;
						height: 32rpx;
						background: #FF3131;
						padding: 0 10rpx;
						text-align: center;
						line-height: 32rpx;
						color: #fff;
						position: absolute;
						top: -4rpx;
						left: 70rpx;
						font-size: 20rpx;
						font-weight: 500;
						color: #FFFFFF;
						border-radius: 16rpx;
						// view {
						// 	transform: scale(0.7);
						// }
					}
				}

				.jump {
					min-width: 15rpx;
					height: 27rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>
