<template>
	<view class="search-list-container" v-show="showsearch">
		<view class="search-list-out">
			<view class="search-container">
				<view class="back_btn" @click="toBack"><uni-icons type="arrowleft" size="30" color="#999"></uni-icons></view>
				<view class="search-title">人员列表</view>
				<view class="search_btn1" @click="to_sure">确定</view>
				<view class="search_btn" @click="to_search">搜索</view>
			</view>
			<view class="search-container2" style="height: 40px;">
				<view class="search-container2-flex">
					<view class="search-input" style="width: 50%;">
						<uni-icons color="#bbb" size="20" type="search" class="my-uni-icon-search"></uni-icons>
						<input style="text" class="input-" placeholder="请输入姓名或手机号" v-model="inputText" />
						<uni-icons color="#bbb" size="20" type="close" class="my-uni-icon-close" v-if="inputText.length > 0" @click="clearInput"></uni-icons>
					</view>
					<view class="searchSelectBox" style=" width: 50%;">
						<view class="text" @click="showSinglePicker">{{ deptResult.name }}</view>
					</view>
				</view>
			</view>

			<view class="search-list" style="top: 90px;">
				<view class="panel flex-column">
					<view class="flex-row" v-for="(item1, index1) in dataList" @click="chooseItem(item1, index1)" :key="index1" @touchmove="hiddenkeyboard">
						<view class="flex-cell ">
							<span>姓名：</span>
							{{ item1.NAME }}
						</view>
						<view class="flex-cell">
							<span>部门：</span>
							{{ item1.deptName }}
						</view>
						<view class="flex-cell-single">
							<span>手机号：</span>
							{{ item1.mobile }}
						</view>
						<uni-icons type="checkbox-filled" size="20" :color="item1.checked ? '#3699FF' : '#CECECE'" class="checkbox-filled"></uni-icons>
					</view>
				</view>
				<view class="toloadmore" v-show="show_toloadmore && !show_search_none && !loadingmore" @click.stop="mysearchlist_">查看更多</view>
				<view class="loading-container" v-if="loadingmore">加载中...</view>
				<view class="search_none" v-show="show_search_none">搜索结果为空</view>
			</view>
		</view>
		<lb-picker ref="picker" mode="multiSelector" :level="level" :pickerValueDefault="[0,0]"
		  @confirm="pickerConfirm" :props="myProps" :list="deptArray"></lb-picker>
	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker'
import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue'; //选择部门组件
import uniIcons from '@/components/uni-icons/uni-icons.vue';
var searchListHeight, panelHeight, query;
var timeout = '';
export default {
	mounted() {},
	components: {
		LbPicker,
		uniIcons,
		mpvuePicker
	},
	data() {
		return {
			url_: '/apis/user/list',
			list_: [],
			list2_: [],
			loadingmore: false,
			lastpage: false, //是否加载完最后一页数据了
			show_search_none: false,
			show_toloadmore: false,
			inputText: '',
			lastIndex: 0, //加载列表翻页数据时，上一页的最后一个index
			pagesize: 10, //每页显示多少条
			pageno: 1, //第几页
			dataList: [], //显示在页面的列表数据
			deptArray: [],
			deptId:'',
			level:4,
			myProps: {
			      label: 'text',
			      value: 'id',
			      children: 'children'
			    },
			deptResult: {
				value: '',
				name: '部门'
			},
			defaultFacility: '',
			spartType: '',
			
		};
	},
	props: {
		showsearch: {
			type: Boolean
		},
		itemInfo_: {},
		singleRow: {
			type: Array,
			default: function() {
				return [];
			}
		},
	},
	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
			}
		}).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 => {});
		var _this = this;
		uni.getStorage({
			key: 'userInfo',
			success: function (res) {
				_this.deptResult.value = res.data.deptId
				_this.to_search();
			}
		});
	},
	watch: {
		showsearch(newv) {
			if (newv) {
				this.to_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.deptResult.value = ''
			} else {
				this.deptResult.value = 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
				}
			}
			console.log(this.deptResult.value)
			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;
		// 	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;
		// },
		hiddenkeyboard() {
			uni.hideKeyboard();
		},
		chooseItem(item, index) {
			if (item.checked == undefined) {
				this.$set(this.dataList[index], 'checked', true);
			} else {
				this.$set(this.dataList[index], 'checked', !this.dataList[index].checked);
			}
		},
		clearAll() {
			this.list_ = [];
			this.show_search_none = false;
			this.loadingmore = false;
			this.show_toloadmore = false;
			this.inputText = '';
			this.lastIndex = 0;
			this.dataList = [];
			this.$emit('update:showsearch', false);
		},
		mysearchlist_() {
			if (!this.lastpage) {
				this.mysearchinput_();
			}
		},
		clearInput() {
			this.inputText = '';
		},
		toBack() {
			this.clearAll();
			uni.hideKeyboard();
		},
		to_search() {
			this.loadingmore = true;
			this.show_toloadmore = false;
			this.show_search_none = false;
			var v = this;
			this.pageno = 1;
			this.dataList = [];
			v.set_request(v.inputText);
		},
		//筛选条件
		getFilter(filterRes) {
			this.defaultFacility = filterRes.fac_type;
			this.spartType = filterRes.sparepart_type;
		},
		set_request(d) {
			let filterRes = {
				pagesize: this.pagesize,
				pageno: this.pageno,
				query: this.inputText,
				deptId: this.deptResult.value,
				status: 1
			};
			this.loadingmore = true;
			this.$http
				.request({
					url: '/apis/user/list',
					params: filterRes,
					method: 'GET'
				})
				.then(res => {
					this.loadingmore = false;
					if (res.data.code !== 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
						return false;
					}
					if (res.data.data == undefined) {
						if (this.pageno == 1) {
							//搜索结果为空
							this.show_search_none = true;
						}
						//最后一页搜索结果为空
						this.show_toloadmore = false;
						return false;
					}

					if (res.data.code == 0 && res.data.data) {
						this.pageno = this.pageno + 1;
						this.dataList = this.dataList.concat(res.data.data.datas);
						if (this.pagesize == res.data.data.datas.length) {
							this.show_toloadmore = true;
						} else if (this.pagesize > res.data.data.datas.length) {
							//已经加载到最后一页了
							this.show_toloadmore = false;
						}
					}
					this.$nextTick(function() {
						//首次加载高度没有撑满页面，继续加载下一页
						query = uni.createSelectorQuery().in(this);
						query
							.select('.search-list')
							.boundingClientRect(data => {
								searchListHeight = data.height;
							})
							.exec();
						query
							.select('.panel')
							.boundingClientRect(data => {
								panelHeight = data.height;
								if (panelHeight <= searchListHeight && res.data.data != undefined) {
									this.mysearchinput_();
								}
							})
							.exec();
					});
				})
				.catch(err => {
					this.loadingmore = false;
					if (res.errMsg == 'request:fail timeout') {
						uni.showToast({
							title: '请求超时',
							icon: 'none',
							duration: 2000
						});
					} else {
						uni.showToast({
							title: '请求失败',
							icon: 'none',
							duration: 2000
						});
					}
				});
		},
		mysearchinput_() {
			this.set_request(this.inputText);
		},
		to_sure() {
			let list = [];
			for (var i = 0; i < this.dataList.length; i++) {
				if (this.dataList[i].checked) {
					list.push(this.dataList[i]);
				}
			}
			this.$emit('update:itemInfo_', list);
			this.clearAll();
			uni.hideKeyboard();
		}
	}
};
</script>

<style scoped>
.search-container,
.search-container2 {
	position: fixed;
	z-index: 10;
	width: 100%;
	background-color: #fff;
	left: 0;
}
.search-container {
	border-bottom: 1px solid #d9d9d9;
	box-sizing: border-box;
	height: 50px;
	box-sizing: border-box;
}
.search-container2 {
	top: 50px;
	height: auto;
}
.search-container2-flex {
	position: relative;
	align-items: center;
	height: 100%;
	padding: 0 5px;
	display: flex;
	box-sizing: border-box;
	justify-content: space-around;
	flex-wrap: wrap;
}
.search-input {
	position: relative;
	height: 30px;
	border: 1px solid #e6e6e6;
	border-radius: 15px;
	box-sizing: border-box;
}
.search-title {
	position: absolute;
	left: 60px;
	right: 60px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-size: 18px;
	color: #000;
}
.searchSelectBox {
	float: left;
}
.searchSelectBox .text {
	margin: 0px 3%;
	background: #f6f6f6;
	border-radius: 40px;
	width: 94%;
	line-height: 30px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
	text-align: center;
	color: #333;
}
.my-uni-icon-search {
	line-height: 30px;
	margin-left: 5px;
}

.input- {
	position: absolute;
	height: 100%;
	left: 30px;
	top: 0;
	right: 0px;
	border: none;
	outline: medium;
	color: #666;
	font-size: 14px;
	padding: 0 30px 0 0 !important;
	box-sizing: border-box;
}

.my-uni-icon-close {
	position: absolute;
	height: 30px;
	width: 30px;
	right: 0px;
	line-height: 30px;
	top: 0;
	text-align: center;
}

.search_btn,
.search_btn1,
.back_btn {
	position: absolute;
	width: 50px;
	height: 30px;
	right: 5px;
	top: 10px;
	font-size: 16px;
	line-height: 30px;
	text-align: center;
	color: #007aff;
}
.search_btn1 {
	right: 55px;
}
.back_btn {
	left: 5px;
	right: auto;
	color: #999;
}

.search-list-container {
	position: fixed;
	z-index: 10000;
	width: 100%;
	left: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
}

.search-list-out {
	position: absolute;
	width: 100%;
	left: 0;
	top: 0px;
	bottom: 0;
	background-color: #fff;
	z-index: 1;
}

.search-list {
	position: absolute;
	overflow: scroll;
	bottom: 0;
	width: 100%;
	left: 0;
}

.panel view {
	line-height: 20px;
	padding: 8px 10px 8px 10px;
	box-sizing: border-box;
}

.panel .flex-row:nth-of-type(even) {
	//奇数
	background-color: #efefef;
}

.panel .flex-row:nth-of-type(odd) {
	//偶数
	background-color: #f9f9fb;
}

.flex-row {
	position: relative;
	width: 100%;
	padding-right: 45px !important;
	/* display: flex; */
	/* flex-direction: row; */
}

.flex-column {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
}

.flex-cell {
	width: 50%;
	float: left;
	text-align: left;
	/* display: flex;
		font-size: 15px;
		flex: 1;
		justify-content: center;
		align-items: center; */
}
.flex-cell-single {
	width: 100%;
	float: left;
}
.flex-cell-single span,
.flex-cell span {
	color: #999;
}
.search_none,
.toloadmore {
	position: relative;
	font-size: 16px;
	width: 100%;
	height: 50px;
	line-height: 50px;
	text-align: center;
	background-color: #fff;
	left: 0;
}

.toloadmore {
	color: #666;
}

.loading-container {
	position: relative;
	font-size: 16px;
	width: 100%;
	height: 50px;
	line-height: 50px;
	text-align: center;
	background-color: #fff;
	left: 0;
}
.checkbox-filled {
	right: 10px;
}
>>>.picker-item .lb-picker-column .lb-picker-column-label {
	    -webkit-transition: all 0.3s;
	    transition: all 0.3s;
	    line-height: 3.8 !important;
	}
</style>
