<template>
	<view class="componentWrap">
		<uni-nav-bar
			@clickLeft="goBack()"
			class="nav-bar" leftText="人员选择"
			height="110rpx" leftWidth="200rpx"
			leftIcon="left" backgroundColor="#2cade8" color="#fff"
			border fixed statusBar shadow
		></uni-nav-bar>
		
		<view class="list-wrap">
			<button @click="backPreLevel"> 返回上一级 </button>
			<view>
				<view v-for="(dept,index) in showDepts" :key="dept.id" class="listItem" @click="deptClick(dept,index)">
					<image class="deptImage" src="../../../static/common/wenjianjia.png"></image>
					<view class="itemName"> {{dept.name}}</view>
				</view>
				<radio-group @change="(e) => radioChange(e)">
					<label class="listItem"v-for="(user,index1) in userLists" :key="user.id">
						<view>
							<radio :value="user.id" :id="user.id" :name=user.name :checked="user.checked" />
						</view>
						<image class="userImage" src="../../../static/login/userRegister.png"></image>
						<view>{{user.name}}</view>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="bottomBlock">
			<text v-if="selectedUser.length>0" class="checkUserShow">已选人员：{{selectedUser[0].name}}</text>
			<button size="mini" type="primary" class="submitBtn" @click="submitClick">确定</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			type:'',
			typeName:'',
			level:'dept',
			showDepts:[],
			deptLists:[],
			userLists:[],
			rpartyLists:[],
			selectedUser:[],
			currentDept:'',
			currentIndex:'',
			currentParent:'',
			currentId:''
		};
	},
	onLoad(params) {
		this.currentId = this.type = params.type;
		
		this.typeName = params.typeName;
	},
	onShow() {
		this.getDept();
		this.getRparty();
	},
	methods: {
		getDept(){
			let that = this;
			that.$u.api.deptList({
				page: 0,
				type__in: 'dept',
				query: '{id, name, parent, type}'
			}).then(res => {
				console.log(res);
				that.showDepts = res;
				that.deptLists = res;
			})
		},
		getRparty(){
			let that = this;
			that.$u.api.deptList({
				page: 0,
				type__in: 'rparty',
				query: '{id, name, parent, type}'
			}).then(res => {
				console.log(res);
				that.rpartyLists = res;
			})
		},
		//点击部门
		deptClick(dept,index){
			let that = this;
			let showDepts = [];
			let params = {
				page: 0,
				depts: dept.id,
				is_active: true,
				query: '{id, name, belong_dept}'
			};
			if(that.level == 'dept'){
				that.level = 'rparty';
				that.currentIndex = index;
				//获取该部门下的相关方
				showDepts = that.rpartyLists.filter(item=>{
					return item.parent==dept.id;
				})
				//获取该部门下的人员
				if(that.deptLists[index].childreUser){
					that.userLists =that.deptLists[index].childreUser;
					that.userLists
					for(let i = 0;i<that.userLists.length;i++){
						if(that.userLists[i].id==that.currentId){
							that.userLists[i].checked = true
						}
					}
				}else{
					that.$u.api.userList(params).then(res=>{
						let arr = [];
						res.forEach(userItem=>{
							let obj = {};
							obj = userItem;
							obj.checked = false;
							arr.push(obj)
						})
						that.deptLists[index].childreUser = arr;
						that.userLists =arr;
					})
				}
			}else if(that.level == 'rparty'){
				that.level = 'user';
				showDepts = [];
				//获取该相关方下的人员
				that.$u.api.userList(params).then(res=>{
					let arr = [];
					res.forEach(userItem=>{
						let obj = {};
						obj = userItem;
						if(that.currentId!==''&&that.currentId==userItem.id){
							obj.checked = true;
						}else{
							obj.checked = false;
						}
						arr.push(obj)
					})
					that.userLists =arr;
				})
			}
			that.currentDept = dept.id;
			that.currentParent = dept.parent;
			that.showDepts = showDepts;
		},
		//返回上一级
		backPreLevel(){
			let that = this;
			if(that.level == 'user'){//相关方人员选择时
				//获取
				that.level = 'rparty';
				that.showDepts = that.deptList;
				that.currentDept = that.currentParent;
				//获取该部门下的相关方
				that.showDepts = that.rpartyLists.filter(item=>{
					return item.parent==that.currentDept;
				})
				that.userLists = that.deptLists[that.currentIndex].childreUser;
			}else if(that.level == 'rparty'){
				that.level = 'dept';
				that.showDepts = that.deptLists;
				//获取该部门下的人员
				that.userLists = [];
			}
		},
		radioChange(e,item){
			let that = this;
			let value = e.detail.value;
			that.currentId = value;
			that.selectedUser = that.userLists.filter(item=>{
				return item.id == value;
			})
		},
		submitClick(){
			debugger;
			let pages = getCurrentPages();             //获取所有页面栈实例列表
			let nowPage = pages[ pages.length - 1];    //当前页页面实例
			let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
			prevPage.$vm.formData[this.type] = this.selectedUser[0].id;        
			prevPage.$vm[this.typeName] = this.selectedUser[0].name;                
			// uni.navigateBack({                         
			// 	delta: 1
			// });
			// let obj={};
			// obj.type=this.type;
			// obj.id=this.selectedUser[0].id;
			// obj.name=this.selectedUser[0].name;
			// uni.$emit('Selection',obj) 
			uni.navigateBack({
				delta: 1
			});
		},
		goBack() {
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>

<style scoped>
>>> .uni-navbar__header,
>>> .uni-status-bar {
	background-image: linear-gradient(254deg, #0ca7ee 0%, #005aff 100%, #2a8cff 100%, #54bdff 100%),
		linear-gradient(#e60012, #e60012);
}
>>> uni-image {
	height: 200upx;
	width: 200upx;
}
.componentWrap {
	background-color: #f3fbff;
	padding-bottom: 227rpx;
}
.list-wrap {
	width: 720rpx;
	margin: 0 auto;
	background-color: #FFFFFF;
	border-radius: 10rpx;
	padding: 25rpx 32rpx;
	box-sizing: border-box;
	margin-top: 24rpx;
}
.listItem{
	display: flex;
	width: 100%;
	padding: 28upx;
	align-items: center;
	border-bottom: 1upx solid #dddddd;
}
.deptImage{
	width: 37upx;
	height: 33upx;
	margin-right: 28upx;
}
.userImage{
	width: 50upx;
	height: 50upx;
	margin-right: 28upx;
}
.itemName{
	line-height: 100%;
}
.bottomBlock{
	width: 100%;
	height: 150upx;
	position: fixed;
	bottom: 0;
	background-color: #015efe;
	color: #ffffff;
	z-index: 100;
}
.checkUserShow{
	padding-left:20upx;
	line-height: 150upx;
}
.submitBtn{
	position: absolute;
	bottom: 40upx;
	right: 30upx;
	background-color: #ff7000;
}
</style>
