<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="dept_wrap form_input_pointer_events" @click="handleShowDept">
								<u--input v-model="value.deptName" 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">
								<ld-select :list="dicts.crmFormStatusDict" label-key="dictLabel" value-key="dictValue"
									placeholder="请选择" v-model="value.status" :border="false" clearable></ld-select>
								<u-icon slot="right" name="arrow-right"></u-icon>
							</view>
				
							<view class="title">
								阶段
							</view>
							<view class="dept_wrap form_input_pointer_events">
								<ld-select :list="dicts.crmFormStateDict" label-key="dictLabel" value-key="dictValue"
									placeholder="请选择" v-model="value.state" :border="false" clearable></ld-select>
								<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 identificationUserInfos" :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="handleShowIdentificationUser">
									<view class="person_top">
										<image src="/static/case/icon-more.png" mode="" class="more"></image>
									</view>
									<view class="person_bottom">
										更多
									</view>
								</view>
							</view>

							<view class="title">
								发单人
							</view>
							<view class="person_wrap">
								<view class="person_item" v-for="(item,index) in createByUserInfos" :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="handleShowCreateByUser">
									<view class="person_top">
										<image src="/static/case/icon-more.png" mode="" class="more"></image>
									</view>
									<view class="person_bottom">
										更多
									</view>
								</view>
							</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.brand" 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="option_list">
								<ld-select :list="clueTagGroupVoList" label-key="name" value-key="id" placeholder="请选择标签"
									v-model="value.allTagList" multiple clearable></ld-select>
							</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="identificationUserListData.length > 0" ref="identificationUser" :multiple="false"
							border title="接单人" :localdata="identificationUserListData" valueKey="id" textKey="label" childrenKey="children"
							:selectedValues="value.identification" @select-change="identificationUserSeletchang" />
				
						<ba-tree-picker :selectParent="false" v-if="createByUserListData.length > 0" ref="createByUser" :multiple="false"
							border title="发单人" :localdata="createByUserListData" valueKey="id" textKey="label" childrenKey="children"
							:selectedValues="value.createBy" @select-change="createByUserSeletchang" />
				
						<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.deptId"
							:personNames="value.deptName" />
				
						<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">
						</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,
			},
			mapHeight: {
				type: String,
			},
			dicts: {
				type: Object
			},
		},
		emits: ["getList"],
		data() {
			return {

				statusDict: [{
						dictLabel: '待处理',
						dictValue: '1'
					},
					{
						dictLabel: '进行中',
						dictValue: '2'
					},
					{
						dictLabel: '已完成',
						dictValue: '3'
					},
					{
						dictLabel: '已取消',
						dictValue: '4'
					},
				],
				
				stateDict: [{
						dictLabel: '初始阶段',
						dictValue: '1'
					},
					{
						dictLabel: '处理阶段',
						dictValue: '2'
					},
					{
						dictLabel: '完成阶段',
						dictValue: '3'
					},
				],


				showFilter: false,

				dictCascadeData: [],

				identificationUserListData: [], // 接单人列表 
				createByUserListData: [], // 发单人列表 

				deptList: [],

				dateRange: [], // 日期范围

				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,

				identificationUserInfos: [], // 接单人用户信息
				createByUserInfos: [], // 发单人用户信息

				clueTagGroupVoList: [],

				defaultRegion: ['广东省', '广州市', '番禺区'],

				sortParams: [{
					value: 1,
					text: '企业名称'
				}, {
					value: 2,
					text: '项目名称'
				}, {
					value: 3,
					text: '项目状态'
				}, {
					value: 4,
					text: '项目等级'
				}, {
					value: 5,
					text: '省市区'
				}, {
					value: 6,
					text: '委托日期'
				}, {
					value: 7,
					text: '创建日期'
				}, {
					value: 8,
					text: '跟进时间'
				}]
			}
		},
		mounted() {
			this.handleInitTag();
		},
		methods: {
			handleOpen(){
				if(this.createTimeTxt === null){
					this.$refs.jtimePickerPopup.handleInit();
				}
			},

			getSelectTime(timeValue) {
				this.value.sendDateStart = timeValue.beginTime;
				this.value.sendDateEnd = timeValue.endTime;
				if (this.value.sendDateStart && this.value.sendDateEnd) {
					this.createTimeTxt = this.value.sendDateStart + "至" + this.value.sendDateEnd;
				} else {
					this.createTimeTxt = "";
				}
			},
			deptSeletchang(ids, names) {
				this.value.deptId = ids[0];
				this.value.deptName = names[0];
			},
			handleShowJtimePickerPopup() {
				this.$refs.jtimePickerPopup.pickerShow();
			},
			handleShowDept() {
				this.$refs.dept._show();
			},


			identificationUserSeletchang(ids, names) {
				this.value.identification = ids[0];
				if (ids.length > 0) {
					// 暂时只做单向
					uni.$u.api.getUserByUserIds({
						userIds: ids.join(",")
					}).then(res => {
						const {
							data
						} = res;
						this.identificationUserInfos = data;
					})
				} else {
					this.identificationUserInfos = [];
				}
			},
			createByUserSeletchang(ids, names) {
				this.value.createBy = ids[0];
				if (ids.length > 0) {
					// 暂时只做单向
					uni.$u.api.getUserByUserIds({
						userIds: ids.join(",")
					}).then(res => {
						const {
							data
						} = res;
						this.createByUserInfos = data;
					})
				} else {
					this.createByUserInfos = [];
				}
			},
			handleShowIdentificationUser() {
				this.$refs.identificationUser._show();
			},
			handleShowCreateByUser() {
				this.$refs.createByUser._show();
			},
			handleInitTag() {
				uni.$u.api.selectAllDeptList({
					isDept: 2
				}).then(({
					data
				}) => {
					this.deptList = handleTree(data, 'deptId');
				});

				// 获取接单人
				uni.$u.api.listDetpUser().then(res => {
					this.identificationUserListData = filterCustomerManager(res.data);
				});
				
				// 获取发单人
				uni.$u.api.listDetpUser().then(res => {
					this.createByUserListData = filterCustomerManager(res.data);
				});

				// 获取所有标签
				uni.$u.api.getClueTagGroupVoList({ tagGroupApplication : '2' }).then(({
					data
				}) => {
					this.clueTagGroupVoList = data.reduce((acc, cur) => {
						return acc.concat(cur.clueTagDataList);
					}, []);
				});
			},
			handleClose() {
				this.showFilter = false;
			},
			handleClickTag(item, attr) {
				if (item.isCheck) {
					const index = this.value[attr].findIndex(v => v == item.dictValue);
					this.value[attr].splice(index, 1);
				} else {
					this.value[attr].push(item.dictValue);
				}
			},
			handleReset() {
				this.value.sendDateStart = undefined;
				this.value.sendDateEnd = undefined;
				this.value.deptId = undefined;
				this.value.deptName = undefined;
				this.value.status = '';
				this.value.state = '';
				this.value.identification = undefined;
				this.value.createBy = undefined;
				this.value.item = '';
				this.value.phone = '';
				this.value.allTagList = [];
				this.createTimeTxt = null;
				this.identificationUserInfos = [];
				this.createByUserInfos = [];
			},
			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;
		padding-top: 40px;

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