<template>
	<view class="dialog_out" >
		<view class="dialog_container">
			<uni-icons type="closeempty" size="40" class="close_icon" @click="choose()"></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">
				<t-table border=0>
					<t-tr font-size="18">
						<t-th>姓名</t-th>
						<t-th>部门</t-th>
						<t-th>手机</t-th>
						<t-th>操作</t-th>
					</t-tr>
					<span @click="choose(items)" v-for="items in tableList" :key="items.userId" class="t-tr-span">
					<t-tr font-size="17" >
						<t-td>{{items.NAME}}</t-td>
						<t-td>{{items.deptName}}</t-td>
						<t-td>{{items.mobile}}</t-td>
						<t-td style="color: #007AFF;" ><button @click="choose(items)" type="primary" plain="true">选择</button></t-td>
					</t-tr>
					</span>
					<view v-if="show_nodata" class="nodata" style="text-align: center;font-size: 18px;color: #999;line-height: 40px;">暂无数据</view>

				</t-table>
				<uni-pagination show-icon="true" :pageSize="search_data.pagesize" :total="total_pages" :current="search_data.pageno" class="pagination" @change="changePages"></uni-pagination>
			</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 mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue'; //选择部门组件
	import tTable from '@/components/t-table/t-table.vue';
	import tTh from '@/components/t-table/t-th.vue';
	import tTr from '@/components/t-table/t-tr.vue';
	import tTd from '@/components/t-table/t-td.vue';
	import uniPagination from '@/components/uni-pagination/uni-pagination.vue';
	export default {
		components: {
			tTable,
			tTh,
			tTr,
			tTd,
			uniIcons,
			mpvuePicker,
			LbPicker,
			uniPagination
		},
		  props: {
		   
		  },
		data() {
			return {
				search_data:{
					deptId: "",
					userName:"",
					pageno:1,//当前页数
					pagesize:4,//1页几条数据
					status:1
				},
				deptResult: {
					value: '',
					name: '部门'
				},
				deptArray: [],
				level:4,
				pickerProps: {
				      label: 'text',
				      value: 'id',
				      children: 'children'
				    },
				tableList: [],
				total_pages: 0, //总页数
				show_nodata: false,
				}
		},
		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 myVal=
						{
							'id': '-',
							'text': '-',
							'children':[
								{
									'label':'-',
									'value': '',
									'children':[]
								}
							]
						}
					this.deptArray[0].children.push(myVal)
					var myVal1=
						{
							'id': '',
							'text': '全部',
							'children':[
								{
									'id':'-',
									'text': '',
									'children':[]
								}
							]
						}
						this.deptArray.push(myVal1)
				}
			}).catch(err=>{
				console.log(err);
			});
			// var _this = this;
			// //使用部门
			// this.$http
			// 	.request({
			// 		url: '/apis/dept/tree',
			// 		method: 'GET'
			// 	})
			// 	.then(res => {
			// 		if (res.statusCode == '200') {
			// 			var useType = res.data.data.children;
			// 			let j = {
			// 				label: '全部',
			// 				value: '',
			// 				children: [
			// 					{
			// 						label: '-',
			// 						value: ''
			// 					}
			// 				]
			// 			};
			// 			_this.deptArray.push(j);
			// 			for (let i = 0; i < useType.length; i++) {
			// 				var myVal = {
			// 					label: useType[i].text,
			// 					value: useType[i].id,
			// 					children: [
			// 						{
			// 							label: '-',
			// 							value: ''
			// 						}
			// 					]
			// 				};
			// 				if (useType[i].children && useType[i].children.length > 0) {
			// 					for (let j = 0; j < useType[i].children.length; j++) {
			// 						var json = {
			// 							label: useType[i].children[j].text,
			// 							value: useType[i].children[j].id
			// 						};
			// 						myVal.children.push(json);
			// 					}
			// 				}
			
			// 				_this.deptArray.push(myVal);
			// 			}
			// 		}
			// 	})
			// 	.catch(err => {});
		this.search()	
		},
		methods: {
			showSinglePicker() {
				this.$refs.picker.show()
			},
			pickerConfirm(e){
				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();
			},
			// showSinglePicker() {
			// 	this.$refs.mpvuePicker.show();
			// },
			// pickerConfirm(e) {
			// 	var value = e.value;
			// 	console.log(e)
			// 	this.deptResult.value = value[1] ? value[1] : value[0];
			// 	var name = e.label;
			// 	if (!value[1]) {
			// 		name = name.substring(0, name.length - 2);
			// 	}
			// 	this.deptResult.name = name;
			// 	var thisId = value [value .length-1]
			// 	this.search_data.deptId = thisId
			// },
			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
							}
							this.total_pages = res.data.data ? res.data.data.totalPages * this.search_data.pagesize : 0
						}
					}
				});		
			},
			changePages(e) {
				console.log(e)
				this.search_data.pageno = e.current;
				this.search();

			},
			//点击选择
			choose(val){
				this.$emit("change", val);
			}
		},
		
		
	}
</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>
