<template>
	<view class="ass-content">
		<view class="flex-align-start">
			<view class="ass-label">
				<text>A角选择</text>
			</view>
			<view class="assign-view">
				<view class="cu-bar search">
					<view class="search-form round">
						<input type="text" v-model="aSearch" placeholder="请输入" confirm-type="search"></input>
						<text class="cuIcon-search"></text>
					</view>
				</view>
				<mix-tree @checkedRund = "getCheckedA" :fliter="aSearch" :list="data" @treeItemClick="handleCheck"></mix-tree>
			</view>
		</view>
		
		<view class="flex-align-start mat15">
			<view class="ass-label">
				<text>B角选择</text>
			</view>
			<view class="assign-view">
				<view class="cu-bar search">
					<view class="search-form round">
						<input  type="text" v-model="bSearch" placeholder="请输入" confirm-type="search"></input>
						<text class="cuIcon-search"></text>
					</view>
				</view>
				<mix-tree @checkedRund = "getCheckedB" :fliter="bSearch" :list="data" @treeItemClick="handleCheck"></mix-tree>
			</view>
		</view>
		
		<view class="flex-align-start mat15">
			<view class="ass-label">
				<text>已选员工</text>
			</view>
			<view class="AB-input">
				<view class="flex">
					<input disabled type="text" :value="'A角: '+A" placeholder="请选择A角"/>
					<!-- <text class="cuIcon-roundclosefill" @click="A = ''"></text> -->
				</view>
				<view class="flex mat15">
					<input disabled type="text" :value="'B角: '+B" placeholder="请选择B角"/>
					<!-- <text class="cuIcon-roundclosefill" @click="B = ''"></text> -->
				</view>
			</view>
		</view>
		
		<view class="mat40 flex-justify-center ass-foot-btn">
			<button class="cu-btn block def-btn margin-tb-sm lg round mar15" @click="geDesignateAB">确定</button>
			<button class="cu-btn block cancel-btn margin-tb-sm lg round mal15" @click="back()">取消</button>
		</view>
	</view>
</template>

<script>
	import LyTree from '@/components/ly-tree/ly-tree.vue'
	// import mix-tree from '@/components/mix-tree/mix-tree.vue'
	export default {
		components: {
			LyTree
		},
		data() {
			return {
				filterText: '',
				A: '',
				B: '',
				data: [],
				defaultProps: {
					children: 'children',
					label: 'name'
				},
				bSearch:'',
				aSearch:'',
				getItem:{},// 取得传递的item
				arrDatas:[],//扁平化
				aID:'',
				bID:'',
				
			};
		},
		created() {
			if(uni.getStorageSync('decideIndex')){
				let data = JSON.parse(uni.getStorageSync('decideIndex'))
				this.getItem.businessId = data.businessId
				this.getItem.companyId = data.companyId
				this.getItem.id = data.detailId
				uni.removeStorageSync('decideIndex')
			}else{
				this.getItem = JSON.parse(uni.getStorageSync('applyMsg'))
			}
		},
		onHide() {
			uni.removeStorageSync('applyMsg')
		},
		onShow() {
			this.trees()// 每次展示调用树数据
		},
		onLoad() {
			// 如果初始化树时设置节点选择需要做适当延时，可以在下一个事件轮询中执行
			// this.$nextTick(() => {
			// 	this.$refs.tree.setCheckedKeys([6])
			// })
		},
		watch: {
			filterText(val) {
				this.$refs.tree.filter(val);
			},
			bSearch(val){
			}
		},
		// 如果不需要不用到这些方法，需要删除相应代码，打印大量日志会造成性能损耗
		methods: {
			// 只有在"点击"修改的指定节点会触发(也就是说这个方法只会触发一次)，obj中包含当前选中
			handleCheck(obj) {
			},
			// 获取树结构数据
			trees(){	
				this.$http.get('/api-hrms//hrms/dept/empTrees').then(res=>{
					this.data = res.data 
					this.disposeData(this.data)// 处理数据
				})
			},
			// 处理树结构数据
			disposeData(data){// children和员工分开，整合到一个children里
				let len = data.length
				for(let i = 0;i<len;i++){
					if(data[i].children){ // children有值则---进入整合，实际上可能没有children，也需要整合
						if(data[i].userDept){//有员工就整合
							if(data[i].userDept.length!==0){//多个员工处理
								let len = data[i].userDept.length
								for(let a=0;a<len;a++){
									data[i].userDept[a].name=data[i].userDept[a].account
								}
							}
							data[i].children = [...data[i].children,...data[i].userDept] 
							data[i].children = [...new Set(data[i].children)]
						}
						if(data[i].children.length!==0){//有子级则进入子级，继续循环
							this.disposeData(data[i].children)
						}
					}else if(!data[i].children&&data[i].userDept&&data[i].userDept.length!==0){//没有子级，而有员工时，创建新的children
						data[i].children = []
						let len = data[i].userDept.length
						for(let a=0;a<len;a++){
							data[i].userDept[a].name=data[i].userDept[a].account
						}
						data[i].children = [...data[i].children,...data[i].userDept] 
						data[i].children =[...new Set(data[i].children)]
					}
				}
			},
			// 获取点击事件，可设置单选多选等
			getCheckedA(nameList,idsList){
				if(idsList.length!==0){
					this.aID = idsList[0]
				}else{
					this.aID = ''
				}
				if(nameList&&nameList.length!==0){
					this.A = nameList[0]
				}else{
					this.A = ''
				}
				
				if(this.aID&&this.aID===this.bID){
					this.aID = ''
					return uni.showToast({title: '请勿选择相同的A/B角！',icon:'none'})
				}
				
			},
			// 获取点击事件b
			getCheckedB(nameList,idsList){
				this.B = nameList[0]
				this.bID = idsList[0]
				if(this.aID===this.bID){
					this.bID = ''
					return uni.showToast({title: '请勿选择相同的A/B角！',icon:'none'})
				}
			},
			// 扁平化树结构数据
			renderTreeList(list=[], rank=0, parentId=[]){
				list.forEach(item=>{
					this.arrDatas.push({
						id: item.id,
						name: item.name,
						parentId,  // 父级id数组
						rank,  // 层级
						showChild: false,  //子级是否显示
						show: rank === 0  ,// 自身是否显示
						// 自定义
						account: item.account?item.account:false,// 设置展示员工的勾选
					})
					if(Array.isArray(item.children) && item.children.length > 0){
						let parents = [...parentId];
						parents.push(item.id);
						this.renderTreeList(item.children, rank+1, parents);
					}else{
						this.arrDatas[this.arrDatas.length-1].lastRank = true;
					}
				})
			},
			// // 把值过滤传递--扁平化后的处理
			// async filterNode(value,data,str) {
			// 	if(!value){
			// 		this.trees()
			// 		return
			// 	}
			// 	let arr = JSON.parse(JSON.stringify(data)) 
			// 	this.renderTreeList(data)// 扁平化处理
			// 	this.data = []
			// 	this.arrDatas.forEach(e=>{// 处理传值
			// 		if (e.name.includes(value)){
			// 			this.data.push(e)
			// 		}
			// 	})
			// 	this.data = [...new Set(this.data)]
			// },
			
			// 指派ab
			geDesignateAB(){
				let obj = {
					businessId:this.getItem.businessId,
					companyId:this.getItem.companyId,
					id:this.getItem.id,
				}
				
				obj.empAId = this.aID
				obj.empBId = this.bID
				if(!obj.empAId||!obj.empBId){
					return uni.showToast({title: '请选择角色后再确定！',icon:'none'})
				}
				this.$http.post('/api-guarantee/dg-guarantee-assign-user/assignCorners',obj).then(res=>{
					uni.showToast({
						title: "操作成功！"
					})
					this.back()
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.ass-content{
		padding: 40rpx 40rpx;
		.ass-foot-btn .cu-btn.lg{
			padding: 0 100rpx;
		}
	}
	.ass-label{
		color: #00B9FF;
		font-size: 28rpx;
		margin-right: 40rpx;
	}
	.assign-view{
		border-radius: 20rpx;
		background-color: #fff;
		box-shadow: 0 0 16rpx #ccc;
		height: 600rpx;
		overflow-x: hidden;
		overflow-y: scroll;
	}
	.cu-bar .search-form{
		border-radius: 20rpx;
		background-color: #f5f5f5;
		height: 72rpx;
		line-height: 72rpx;
		input{
			height: 72rpx;
			line-height: 72rpx;
			padding: 0 40rpx;
		}
		.cuIcon-search{
			margin: 0 20rpx;
		}
	}
	.AB-input{
		view{
			background-color: #f5f5f5;
			color: #666;
			padding: 20rpx 40rpx;
			border-radius: 20rpx;
			text{
				color: #B2B2B2;
			}
		}
	}
</style>