<template>
	<view>
		<u-popup :show="showFilter" mode="bottom" closeable @close="handleClose" @open="handleOpen">
			<scroll-view scroll-y :style="{ height: mapHeight }" @touchmove.stop="() => {}">
				<view class="filterQuery" :style="{ height : mapHeight }">
						<view class="query_wrap">
							<view class="title">
								收单日期
							</view>
							<view class="dept_wrap form_input_pointer_events" @click="handleShowJtimePickerPopup">
								<u--input v-model="createTimeTxt" disabled style='pointer-events: none !important'
									disabledColor="#ffffff" placeholder="点击选择" border="none">
								</u--input>
								<u-icon slot="right" name="arrow-right"></u-icon>
							</view>

							<view class="title">
								物品
							</view>
							<view class="search_input">
								<u--input clearable prefixIcon="search" v-model="value.item"
									placeholder="请输入物品名字"></u--input>
							</view>
				
							<view class="title">
								电话
							</view>
							<view class="search_input">
								<u--input clearable prefixIcon="search" v-model="value.phone"
									placeholder="请输入电话"></u--input>
							</view>

							<view class="title">
								收单人
							</view>
							<view class="person_wrap">
								<view class="person_item" v-for="(item,index) in receiptUserInfos" :key="item.userId">
									<view class="person_top">
										<u-avatar :src="$avatar(item.avatar)" size="40px"></u-avatar>
									</view>
									<view class="person_bottom">
										{{item.nickName}}
									</view>
								</view>
								<view class="person_item more_item" @click="handleShowReceiptUser">
									<view class="person_top">
										<image src="/static/case/icon-more.png" mode="" class="more"></image>
									</view>
									<view class="person_bottom">
										更多
									</view>
								</view>
							</view>
				
						</view>
						<u-tabbar :fixed="true" inactiveColor="#ffffff" class="case_tabbar" :placeholder="true"
							:safeAreaInsetBottom="true">
							<u-tabbar-item text="重置" :customStyle="{backgroundColor : '#fff'}" class="uTabbarItem close_btn"
								@click="handleReset"></u-tabbar-item>
							<u-tabbar-item text="确定" :customStyle="{backgroundColor : '#4c8afe'}" class="uTabbarItem"
								@click="handleEnter"></u-tabbar-item>
						</u-tabbar>
				
						<ba-tree-picker :selectParent="false" v-if="receiptUserListData.length > 0" ref="receiptUser" :multiple="false"
							border title="收单人" :localdata="receiptUserListData" valueKey="id" textKey="label" childrenKey="children"
							:selectedValues="value.receiptUserId" @select-change="receiptUserSeletchang" />
				
						<jtimePickerPopup :isShowShortTimeList="true" shortTimeTitle="快捷时间" :shortTimeList="shortTimeList"
							:isShowSeletTimeTitle="true" seletTimeTitle="时间选择" cancelText="取消" confirmText="确认"
							:endSelectMonth="-1" :endSelectDay="-1" beginTimePlaceHolder='开始时间' endTimePlaceHolder="结束时间"
							:isDateTypeRange="true" :isShowSelectedTimeEcho="true" @confirm="getSelectTime"
							ref="jtimePickerPopup" :default-select="1">
						</jtimePickerPopup>
				
					</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	import {
		filterCustomerManager
	} from '@/utils/util';
	import jtimePickerPopup from '@/uni_modules/jtime-picker-popup/components/JTimePicker/JTimePicker.vue';
	export default {
		components: {
			jtimePickerPopup
		},
		props: {
			value: {
				type: Object,
			},
			mapHeight: {
				type: String,
			},
		},
		emits: ["getList"],
		data() {
			return {
				showFilter: false,
				receiptUserListData: [], // 收单人列表 
				shortTimeList: [{
						unit: 'day',
						key: '全部',
						value: 0
					},
					{
						unit: 'day',
						key: '今天',
						value: 1
					},
					{
						unit: 'day',
						key: '昨天',
						value: -1
					},
					{
						unit: 'day',
						key: '近3天',
						value: 3
					},
					{
						unit: 'day',
						key: '近7天',
						value: 7
					},
					{
						unit: 'day',
						key: '近15天',
						value: 15
					},
					{
						unit: 'month',
						key: '本月',
						value: 1
					},
					{
						unit: 'month',
						key: '上月',
						value: -1
					},
				],
				createTimeTxt: null,
				receiptUserInfos: [], // 收单人用户信息
			}
		},
		mounted() {
			this.handleInitReceiptUser();
		},
		methods: {
			handleOpen(){
				if(this.createTimeTxt === null){
					this.$refs.jtimePickerPopup.handleInit();
				}
			},
			getSelectTime(timeValue) {
				this.value.receiptDateStart = timeValue.beginTime;
				this.value.receiptDateEnd = timeValue.endTime;
				if (this.value.receiptDateStart && this.value.receiptDateEnd) {
					this.createTimeTxt = this.value.receiptDateStart + "至" + this.value.receiptDateEnd;
				} else {
					this.createTimeTxt = "";
				}
			},
			handleShowJtimePickerPopup() {
				this.$refs.jtimePickerPopup.pickerShow();
			},
			receiptUserSeletchang(ids, names) {
				this.value.receiptUserId = ids[0];
				if (ids.length > 0) {
					uni.$u.api.getUserByUserIds({
						userIds: ids.join(",")
					}).then(res => {
						const {
							data
						} = res;
						this.receiptUserInfos = data;
					})
				} else {
					this.receiptUserInfos = [];
				}
			},
			handleShowReceiptUser() {
				this.$refs.receiptUser._show();
			},
			handleInitReceiptUser() {
				// 获取收单人数据
				uni.$u.api.listDetpUser().then(res => {
					this.receiptUserListData = filterCustomerManager(res.data);
				});
			},
			handleClose() {
				this.showFilter = false;
			},
			handleReset() {
				this.value.receiptDateStart = undefined;
				this.value.receiptDateEnd = undefined;
				this.value.item = '';
				this.value.phone = '';
				this.value.receiptUserId = undefined;
				this.createTimeTxt = null;
				this.receiptUserInfos = [];
			},
			handleEnter() {
				this.$emit("getList");
				this.showFilter = false;
			},
			show() {
				this.showFilter = true;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.filterQuery {
		padding: 20px;
		box-sizing: border-box;
		overflow: scroll;
		padding-top: 40px;

		.dept_wrap {
			border: 2px solid #ddd;
			display: flex;
			padding: 10rpx 20rpx;
			border-radius: 6rpx;
			margin-bottom: 20rpx;
		}

		.person_wrap {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			margin-bottom: 15px;

			.person_item {
				width: 10%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 10px;

				.person_top {
					width: 40px;
					height: 40px;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.person_bottom {
					margin-top: 5px;
					font-size: 12px;
					color: #202020;
				}
			}

			.more_item {
				.more {
					width: 28px;
					height: 28px;
				}

				.person_bottom {
					color: #4c8afe;
					font-size: 12px;
					margin-top: 0px;
				}
			}
		}

		.search_input {
			border: 1px solid #ddd;
			border-radius: 4px;
			overflow: hidden;
			margin-bottom: 15px;
		}

		.query_wrap {
			.title {
				font-size: 18px;
				color: #202020;
				margin-bottom: 10px;
			}
		}
	}

	.case_tabbar {
		.uTabbarItem {
			::v-deep .u-tabbar-item__text {
				font-size: 18px;
			}
		}

		.close_btn {
			::v-deep .u-tabbar-item__text {
				font-size: 18px;
				color: #606060 !important;
			}
		}
	}
</style>