<template>
	<view>
		<u-popup :show="showFilter" mode="bottom" closeable @close="handleClose" @open="handleOpen">
			<scroll-view scroll-y  @touchmove.stop="() => {}">
				<view class="filterQuery">
						<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="dept_wrap form_input_pointer_events" @click="handleShowclueDept">
								<u--input v-model="value.orgName" 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="person_wrap">
								<view class="person_item" v-for="(item,index) in clueOperations.userInfos" :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="handleShowclueOperation">
									<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="listData.length > 0" ref="clueOperation" :multiple="false"
							border title="运营人" :localdata="listData" valueKey="id" textKey="label" childrenKey="children"
							:selectedValues="value.clueOperationId" @select-change="clueOperationSeletchang" />
				
						<ba-tree-picker :selectParent="true" v-if="deptList.length > 0" ref="dept" :multiple='false'
							@select-change="deptSeletchang" border title="归属机构" :localdata="deptList" valueKey="deptId"
							textKey="deptName" childrenKey="children" :selectedValues="value.orgId"
							:personNames="value.orgName" />
				
						<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" :defaultSelect="1">
						</jtimePickerPopup>
				
					</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	import {
		filterCustomerManager,
		handleTree
	} from '@/utils/util';
	import jtimePickerPopup from '@/uni_modules/jtime-picker-popup/components/JTimePicker/JTimePicker.vue';
	export default {
		components: {
			jtimePickerPopup
		},
		props: {
			value: {
				type: Object,
			},
		},
		emits: ["getList"],
		data() {
			return {
				showFilter: false,

				listData: [], // 人员列表 总结报告用

				deptList: [],

				dateRange: [], // 日期范围
				
				createTimeTxt : null,

				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
					},
				],

				clueOperations: {
					ids: [],
					names: [],
					userInfos: [],
				},
			}
		},
		mounted() {
			this.handleInitTag();
		},
		methods: {
			getSelectTime(timeValue) {
				this.value.createTimeStart = timeValue.beginTime;
				this.value.createTimeEnd = timeValue.endTime;
				if (this.value.createTimeStart && this.value.createTimeEnd) {
					this.createTimeTxt = this.value.createTimeStart + "至" + this.value.createTimeEnd;
				} else {
					this.createTimeTxt = "";
				}
			},
			deptSeletchang(ids, names) {
				this.value.orgId = ids[0];
				this.value.orgName = names[0];
			},
			handleShowJtimePickerPopup() {
				this.$refs.jtimePickerPopup.pickerShow();
			},
			handleShowclueDept() {
				this.$refs.dept._show();
			},
			clueOperationSeletchang(ids, names) {
				this.clueOperations.ids = ids;
				this.clueOperations.names = names;
				this.value.clueOperationId = ids[0];
				if (ids.length > 0) {
					// 暂时只做单向
					uni.$u.api.getUserByUserIds({
						userIds: ids.join(",")
					}).then(res => {
						const {
							data
						} = res;
						this.clueOperations.userInfos = data;
					})
				} else {
					this.clueOperations.userInfos = [];
				}
			},
			handleShowclueOperation() {
				this.$refs.clueOperation._show();
			},
			handleInitTag() {
				uni.$u.api.selectAllDeptList({
					isDept: 2
				}).then(({
					data
				}) => {
					this.deptList = handleTree(data, 'deptId');
				});
				
				
				// 获取人员
				uni.$u.api.getDeptCustomerByOrg({ deptId : 369 }).then(res => {
					this.listData = filterCustomerManager(res.data);
				});
			},
			handleOpen(){
				if(this.createTimeTxt === null){
					this.$refs.jtimePickerPopup.handleInit();
				}
			},
			handleClose() {
				this.showFilter = false;
			},
			handleReset() {
				this.value.clueOperationId = undefined;
				this.value.createTimeStart = undefined;
				this.value.createTimeEnd = undefined;
				this.value.orgId = undefined;
				this.createTimeTxt = "";
				this.value.orgName = undefined;
				this.clueOperations = {
					ids: [],
					names: [],
					userInfos: [],
				};
			},
			handleEnter() {
				this.$emit("getList");
				this.showFilter = false;
			},
			handleChangeSort(sort) {
				this.value.sort = sort;
			},
			handleChangeSortField(value) {
				this.value.sortField = value;
			},
			show() {
				this.showFilter = true;
			}
		},
	}
</script>

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

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

		.pick_regions_wrap {}

		.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;
			}

			.option_list {
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 15px;

				.option_item {
					width: calc(33.33% - 10px);
					margin-right: 10px;
					margin-bottom: 10px;

					::v-deep .u-tag__text {
						margin: auto;
						font-size: 14px;
					}

					&:nth-child(6n) {
						margin-right: 0px;
					}
				}
			}

			.follow_option_list {
				.option_item {
					::v-deep .u-tag__text {
						font-size: 12px;
					}
				}
			}
		}
	}

	.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>