<template>
	<view class="dialog_out" >
		<view class="dialog_container">
			<uni-icons type="closeempty" size="40" class="close_icon" @click="choose(1)"></uni-icons>
			<view class="dialog_title">选择人员</view>
			<view class="search_container">
				<view class="search_text">
					<input type="search" placeholder="请输入名字" v-model="search_data.userName"/>
				</view>
				
				<view class="searchSelectBox" style=" width: 50%;">
					<view class="text" @click="showSinglePicker">{{ deptResult.name }}</view>
				</view>
				<button @click="search(1)" type="primary">查询</button>
			</view>
			<view class="table_container">
				<wyb-table @change="changeSelect" ref="table" :enableCheck="enableCheck" :headers="headers" :contents="tableList" />
				<view v-if="show_nodata" class="nodata" style="text-align: center;font-size: 18px;color: #999;line-height: 40px;">暂无数据</view>
				<uni-pagination show-icon="true" :pageSize="search_data.pagesize" :total="total_pages" :current="search_data.pageno" class="pagination" @change="changePages"></uni-pagination>
			</view>
			<view class='multi_bottom_btn'>
				<button @click="choose()" type="primary" >确定</button>
				<button @click="choose(1)" type="primary" >取消</button>
			</view>
		</view>
		<lb-picker ref="picker" mode="multiSelector" :level="level" :pickerValueDefault="[0,0]"
		  @confirm="pickerConfirm" :props="pickerProps" :list="deptArray"></lb-picker>
	</view>
</template>

<script>
import 'static/css/chooseDialog.css'
import LbPicker from '@/components/lb-picker'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import wybTable from '@/components/wyb-table/wyb-table.vue'
	import uniPagination from '@/components/uni-pagination/uni-pagination.vue';
	export default {
		components: {
			LbPicker,
			wybTable,
			uniIcons,
			uniPagination
		},
		props: {
			deptId:'',
		},
		data() {
			return {
				search_data:{
					userName:"",
					pageno:1,//当前页数
					pagesize:4,//1页几条数据
					status:1
				},
				tableList: [],
				total_pages: 0, //总页数
				show_nodata: false,
				selectVal:[],
				deptResult: {
					value: '',
					name: '部门'
				},
				deptArray: [],                                                                                                                                                                                                 
				level:4,
				pickerProps: {
				      label: 'text',
				      value: 'id',
				      children: 'children'
				    },
				enableCheck:'multiple',
				headers: [{
				                label: '姓名',
				                key: 'NAME'
				            }, {
				                label: '部门',
				                key: 'deptName'
				            }, {
				                label: '手机',
				                key: 'mobile'
				            }],
				}
		},
		mounted(){
		//部门
		this.$http.request({
		  url: '/apis/dept/tree',
		  // params:{
			 // deptId:deptId 
		  // },
		  method:'GET',
		}).then(res=>{
			if(res.statusCode == '200'){	
				this.deptArray =res.data.data.children
				var myVal2=
					{
						'id': '',
						'text': '-',
						'children':[
					
						]
					}
				this.deptArray[0].children.forEach(item => {
					item.children.push(myVal2)
				})
				var myVal=
					{
						'id': '-',
						'text': '-',
						'children':[
	
						]
					}
				this.deptArray[0].children.push(myVal)
				var myVal1=
					{
						'id': '',
						'text': '全部',
						'children':[
							{
								'id':'-',
								'text': '',
								'children':[]
							}
						]
					}
					this.deptArray.push(myVal1)
			}
		}).catch(err=>{
			console.log(err);
		});
		this.search()	
		},
		methods: {
			showSinglePicker() {
				this.$refs.picker.show()
			},
			pickerConfirm(e){
				this.search_data.deptId = this.deptId;
				var value = e.value;	
				console.log(value)
				var name = ''
				if(value[1] == '-') {
					name = e.item[0].text
					this.search_data.deptId = ''
				} else {
					this.search_data.deptId = value[2]?value[2]:value[1];
					if(value[2]){
						// name = name.substring(0,name.length-2);
						name = e.item[0].text+'/'+e.item[1].text+'/'+e.item[2].text
					} else {
						name = e.item[0].text+'/'+e.item[1].text
					}
				}
				this.deptResult.name = name;
				this.listCards=[];
				this.page=1;
				this.loading_status="more";
				// this.set_request();
			},
			changeSelect(e){
				console.log(e)
				let arr=[];
				e.detail.data.forEach(item=>{
					// arr.push(this.tableList[item])
					// (this.tableList[item-((this.search_data.pageno-1)*this.search_data.pagesize)])
					arr.push(item.lineData)  
				})
				this.selectVal=arr
			},
			search(n) {
				if(n==1){
					this.search_data.pageno=1;
				}
			this.$http.request({
					url: '/apis/user/list',
					method: 'get',
					params: this.search_data,
				}).then(res => {
					if (res) {
						if (res.data.code == 0) {
							this.tableList = res.data.data ? res.data.data.datas : []
							if (this.tableList.length == 0) {
								this.show_nodata = true
							} else {
								this.show_nodata = false
							}
							// this.tableList.forEach(p=>{
							// 	this.$set(p,'checkvalue',false)
							// })
							let idArr = []
							this.selectVal.forEach(item => {
								idArr.push(item.userId)
							})
							this.tableList.forEach(item => {
								if (idArr.includes(item.userId)) {
									this.$set(item,'checked',true)
								}
							})
							this.total_pages = res.data.data ? res.data.data.totalPages * this.search_data.pagesize : 0
						}
					}
				});		
			},
			changePages(e) {
				this.search_data.pageno = e.current;
				this.search();
			},
			//点击选择
			choose(n){
				if(n==1) {
					this.$emit("change", []);
				} else {
					this.$emit("change", this.selectVal);					
				}

			}
		},
		
		
	}
</script>

<style scoped>
	.dialog_out .search_container {
	    position: relative;
	    width: 100%;
	    box-sizing: border-box;
	    margin-top: 16px;
	    padding: 0px 60px !important;
	    overflow: auto;
	}
	.searchSelectBox {
		float: left;
	}
	.searchSelectBox .text {
		margin: 0px 3%;
		background: #f6f6f6;
		border-radius: 40px;
		width: 80%;
		left: 1%;
		line-height: 30px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 14px;
		text-align: center;
		color: #333;
	}
	>>>.picker-item .lb-picker-column .lb-picker-column-label {
		    -webkit-transition: all 0.3s;
		    transition: all 0.3s;
		    /* line-height: 3.8 !important; */
			font-size: 26px;
		}
		>>>.lb-picker .lb-picker-container .lb-picker-header .lb-picker-action {
		    font-size: 24px;
		    padding: 0 28px;
		    display: -webkit-box;
		    display: -webkit-flex;
		    display: flex;
		    -webkit-box-align: center;
		    -webkit-align-items: center;
		    align-items: center;
		}
</style>
