<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>
			<uni-section title="部门/单位" type="line">
			<view style="display:flex; justify-content:flex-end;margin-bottom: 12rpx;">
			<button @click="choseDept('dept')" type="default" size="mini" >本部</button>
			<button @click="choseDept('rparty')" type="default" size="mini" >相关方</button>
			<button @click="backPreLevel" type="primary" size="mini" >返回上级</button>
			</view>
			<scroll-view scroll-y="true" style="height: 380rpx;" scroll-top=0 :show-scrollbar="true">
				<uni-list v-if="showDepts.length>0">
					<uni-list-item v-if="item.type!='company'" clickable @click="deptClick(item)" v-for="(item, index) in showDepts" :key="item.id" :title="item.name" thumb="../../../static/common/wenjianjia.png" thumbSize="sm"></uni-list-item>
				</uni-list>
				<view v-if="showDepts.length>0" style="margin-top: 12rpx; text-align: center;">{{showDepts.length}}</view>
				<view v-else style="margin-top: 12rpx; text-align: center;">暂无下级单位</view>
			</scroll-view>
			<view style="height:12rpx"></view>
			</uni-section>
			<view style="height:12rpx"></view>
			<uni-section title="人员" type="line">
				<template v-slot:right>
					{{currentDept.name}}
				</template>
				<uni-search-bar @confirm="searchUser" v-model="search" @clear="clearSearch" placeholder="姓名/手机号">
							</uni-search-bar>
				<uni-list v-if="userLists.length>0">
					<uni-list-item :rightText="item.belong_dept_name" @switchChange="userChecks(item, $event.value)" :clickable="choseType=='single'" @click="userCheck(item)" :showSwitch="choseType=='multi'" :switchChecked="item.checked" v-for="(item, index) in userLists" :key="item.id" :title="item.name" thumb="../../../static/login/userRegister.png" thumbSize="sm"></uni-list-item>
				</uni-list>
				<view v-else style="margin-top: 12rpx; text-align: center;">本级无人员</view>
				<view style="height:12rpx"></view>
			</uni-section>
		<view class="bottomBlock" v-if="choseType=='multi'">
			<view class="checkUserShow">已选：
			<button v-for="(item, index) in selectedUser" :key="item.id" @click="delUser(item, index)" type="default" size="mini" style="margin-left:6rpx">{{item.name}}</button>
			</view>
			<button size="mini" type="primary" class="submitBtn" @click="submitClick">确定</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			type:'',
			search: '',
			choseType: 'single',
			typeName:'',
			level:'dept',
			showDepts:[],
			deptLists:[],
			userLists:[],
			rpartyLists:[],
			selectedUser:[],
			currentDept:{},
			currentIndex:'',
			currentParent:'',
			currentId:'',
			deptTypeOptions: [{text: '本部', value: 'dept'}, {text: "相关方", value: "rparty"}]
		};
	},
	onLoad(params) {
		this.currentId = this.type = params.type;
		
		this.typeName = params.typeName;
		this.choseType = params.choseType?params.choseType:'single';
		this.getDept();
	},
	onShow() {
		
	},
	methods: {
		searchUser(){
			let that = this;
			if(this.search.length>0){
				that.getUserList({}, this.search, false);
			}
		},
		clearSearch(){
			let that = this;
			that.search = '';
			if (that.currentDept.id){
				that.getUserList(that.currentDept, '', true);
			}
		},
		getDept(){
			let that = this;
			that.$u.api.deptList({
				page: 0,
				type__in: 'dept, rparty, company',
				query: '{id, name, parent, type}'
			}).then(res => {
				that.showDepts = res;
				that.deptLists = res;
				if(res.length>1){
					that.getUserList(res[1])
				}
			})
		},
		choseDept(typestr) {
			let that = this;
			that.showDepts = that.deptLists.filter(item=>{
				return item.type==typestr;
			})
		},
		getUserList(dept, search='', changeDept=true) {
			let that = this;
			let params = {
				page: 0,
				search: search,
				is_active: true,
				query: '{id, name, belong_dept, belong_dept_name}'
			};
			if(dept.id){
				params.depts = dept.id;
			}
			that.$u.api.userList(params).then(res=>{
				that.userLists = res;
				that.sameChose()
				if (changeDept) {
					that.currentDept = dept;
				}
			})
		},
		//点击部门
		deptClick(dept){
			let that = this;
			if(dept.type != 'company'){
				that.getUserList(dept)
			}
			
			that.showDepts = that.deptLists.filter(item=>{
				return item.parent==dept.id;
			})
		},
		//返回上一级
		backPreLevel(){
			let that = this;
			if (that.currentDept.parent) {
				let dept = that.deptLists.find(item => item.id === that.currentDept.parent)
				that.deptClick(dept)
			}
		},
		radioChange(e,item){
			let that = this;
			let value = e.detail.value;
			that.currentId = value;
			that.selectedUser = that.userLists.filter(item=>{
				return item.id == value;
			})
		},
		userCheck(item) {
			if(this.choseType == 'single') {
				this.selectedUser = [item]
				this.submitClick()
			}
			
		},
		userChecks(item, checked) {
				for (var i=0; i<this.selectedUser.length; i++){
					if(this.selectedUser[i].id==item.id){
						if(checked){return;}
						else{
							this.selectedUser.splice(i, 1);
							return;
						}
					}
				}
				if(checked){
					this.selectedUser.push(item)
				}
		},
		delUser(item, index) {
			let that = this;
			that.selectedUser.splice(index, 1);
			for(var x=0; x< that.userLists.length; x++){
				if(that.userLists[x].id == item.id){
					item.checked = false;
					this.$set(this.userLists, x, item); 
				}
			}
		},
		sameChose() {
			// 同步显示
			let that = this;
			for(var i=0; i< that.userLists.length; i++){
				// debugger;
				that.userLists[i].checked = false
				for(var x=0; x< that.selectedUser.length; x++){
					if(that.selectedUser[x].id == that.userLists[i].id){
						that.userLists[i].checked = true
					}
				}
			}
		},
		submitClick(){
			if (this.selectedUser.length === 0){
				uni.showToast({
					title: '未选择任何人员',
					icon: "none"
				})
				return
			}
			let pages = getCurrentPages();             //获取所有页面栈实例列表
			let nowPage = pages[ pages.length - 1];    //当前页页面实例
			let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
			if(this.choseType == 'single'){
				prevPage.$vm.formData[this.type] = this.selectedUser[0].id;
				prevPage.$vm[this.typeName] = this.selectedUser[0].name; 
				if(this.type=='worker'){
					prevPage.$vm.workerGet = true; 
				}else{}
				
			}
			               
			// 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;
	width: 80%;
}
.submitBtn{
	position: absolute;
	bottom: 40upx;
	right: 30upx;
	background-color: #ff7000;
	width: 20%;
}
</style>
