<template>
<div>
  <header class="mui-bar mui-bar-nav">
  		<h1 class="mui-title">选择人员</h1>
  		<a class=" mui-icon mui-icon-left-nav mui-pull-left" @click="back"></a>
  		<a class="mui-btn mui-pull-right mui-btn-blue" @click="ok">确认</a>
  	</header>
		<div class="mui-content vongi-fpbm-xsy">
			<div class="vongi-bread">
				<template v-for="(item,index) in navList">
					<a :class="navCanClick(item,index)?'color4fc5f7':''" @click="reloadItem(item,index)" v-text="item.name"></a>
					<span v-if="index!=navList.length-1" class="mui-icon mui-icon-forward"></span>
				</template>
			</div>
			<ul class="mui-table-view">
				<li v-for="(item,index) in arrangeShiftCompanyList"  v-if="item.type==1" class="mui-table-view-cell flew-sp flew-items">
					<div class="mui-ellipsis">
						{{item.name}}
					</div>
					 
					<a href=""  class="color4fc5f7 iconfont icon-xiaji"   @click="reloadNext(item)" >下级</a>
					<!--灰色状态-->
					<!--<a href="" class="color999 iconfont icon-xiaji">下级</a>-->
				</li> 
			</ul>
			<!--人员列表-->
			<div class="vongi-fplist" :style="'margin-bottom:'+(clientHeight+100)+'px'">
				<div class="mui-content-padded" v-show="arrangeShiftPersonList"  >
					<h5><i class="iconfont icon-ze-friends blue"></i>人员列表</h5>
				</div>
				<form class="mui-input-group">
					
					<div class="mui-input-row "  v-for="(item,index) in arrangeShiftCompanyList" @click="checkboxBtn(item),selectId.push(item.id)"   v-if="item.type==2">
						<label>{{item.name}}</label>
						<!-- mui-checkbox
						<input name="checkbox1" :value="item.id" v-model="selectId" type="checkbox"> -->
					</div> 
				</form>
				<div class="fyy-footer vongi-footer box-show" id="fyy-footer"  > 
					<h5 class="margin10">已选择人员：<span style="  float: right; color: #3385FF; " @click="selectAll">全选</span></h5>
					<div class="vongi-yjbtn flew" id="spanLast" :style="'height:'+clientHeight+'px'">
						<span style="height: 24px;"  v-for="item,i in selectPerson"    >{{item.name}}<a class="iconfont icon-guanbi1" @click="checkboxBtn(item,true,i)"></a></span>
						
					</div>
				</div>
			</div>
		</div>
		<loading :visible="isLoading"></loading>
</div>
</template>


<script>
 
	import * as API from '@/apis-xsy/applyclass'
 
	import Loading from '$project/components/Loading.vue'
	 

	export default {
		name: '',
		components: {
 
			Loading,
	 
		},
		data() {
			return {
				clientHeight:37,
				companyId:'',
				  isLoading: false,
				  arrangeShiftCompanyList:[],
				  arrangeShiftPersonList:false,
				  nowLevel: 0,
				  navList: [{
				  	name: '首页',
				  	id: ''
				  }],
				  selectId:[],
				  selectPerson:[],
				  selectIdOld:[],
				  selectPersonOld:[],
			}
		},
		created() {
			

		},
		props:{
			setids:{
				default:"",
				required:false
			},
			setnames:{
				default:"",
				required:false
			},
		},
		methods: {
			checkboxBtn(obj,bl,i){
				if(this.selectId.includes(obj.id)){
					var sz=[];
					for(var j  in this.selectPerson){
						if(this.selectPerson[j].id==obj.id){
							
						}else{
							sz.push(this.selectPerson[j])
						}
					}
					this.selectPerson=sz;
					if(bl){
						this.selectId.splice(i, 1); 
					}
				}else{
					//this.selectId.push(obj.id);
					this.selectPerson.push(obj);
				}
			
				this.setHeight()
			
				
			},
			selectAll(){
				for(var j in this.arrangeShiftCompanyList){
					var obj=this.arrangeShiftCompanyList[j]
					
					if(obj.type!='2'){
						
						continue;
					}
					var bl=true;
					for(var i  in this.selectPerson){
						
						if(this.selectPerson[i].id==obj.id){
							bl=false;
							break
						}
					}
					if(bl){
						this.selectId.push(obj.id);
						this.selectPerson.push(obj)
					}
					
				}
				this.setHeight()
				
			},
			setHeight(){
				//spanLast
				this.$nextTick(()=>{
					var top=document.getElementById("spanLast").scrollHeight;
					if(top<100){
						this.clientHeight=top;
					}else{
						this.clientHeight=100;
					}
					console.log(top)
				})
			},
			reloadItem(item, index) {
				if (index == this.nowLevel) {
					return false;
				}
				this.navList = this.navList.slice(0, index + 1);
				this.nowLevel = index;
				this.companyId = item.id;
				this.getArrangeShiftCompanyList();
			},
			//加载下级
			reloadNext(item) {
				this.navList.push(item)
				this.nowLevel++;
				this.companyId = item.id;
				this.getArrangeShiftCompanyList();
			},
			//判断面包屑是否可点击
			navCanClick(item, index) {
				if (index == this.nowLevel) {
					return false;
				} else {
					return true;
				}
			},
			back(){
				this.selectId=this.selectIdOld;
				this.selectPerson=this.selectPersonOld;
				this.$emit("confirm",{status:0})
			},
			ok(){
				if(this.selectPerson.length){
					this.selectIdOld=this.selectId;
					this.selectPersonOld=this.selectPerson;
					this.$emit("confirm",{status:1,selectId:this.selectId,selectPerson:this.selectPerson})
				}
			},
		 getArrangeShiftPersonList(){
		 		this.isLoading = true;
		 	
		 	API.arrangeShiftPersonList(this.companyId).then(response => {
		 		   this.arrangeShiftPersonList=false;
		 		  this.arrangeShiftCompanyList= this.arrangeShiftCompanyList.concat(response.list);
				   for(var i in this.arrangeShiftCompanyList){
					   if(this.arrangeShiftCompanyList[i].type=='2'){
						    this.arrangeShiftPersonList=true;
							break
					   }
				   }
		 		this.isLoading = false;
		 	}).catch(error => {
		 		this.isLoading = false;
		 		mui.toast(error);
		 	})
		 },	
			getArrangeShiftCompanyList(){
					this.isLoading = true;
				
				API.arrangeShiftCompanyList(this.companyId).then(response => {
					  this.arrangeShiftCompanyList=response.list;;
					 this.getArrangeShiftPersonList();
					this.isLoading = false;
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},	//下拉事件
		 
			asynCallBack() {

			},
		
		},
		mounted() {
			if(this.setids){
				this.selectId=this.setids.split(",");
				this.selectPerson=this.setnames.split(",").map((item,i)=>{
					//console.log(i)
					return {
						id:this.selectId[i],
						name:item
					}
				});
			}
			this.getArrangeShiftCompanyList();
			//console.log("mounted")
			//var _this = this;
			//	window.addEventListener('scroll', _this.handleScrool);
			
		},
		destroyed() {
			//销毁监听事件
			//	var _this = this;
			//	window.removeEventListener('scroll', _this.handleScrool);
			
		},
	
	}
</script>

<style src="$project/assets/css/iconfont.css"></style>
<style src="$project/assets/css/xsy.css"></style>
<style scoped src="$project/assets/css/xpwyfyy.css"></style>

<style>
</style>
