<template>
	<view class="reserve content_box">
		<view class="queueSubscribeTitle">
			<u--input placeholder="请输入预约单号" border="surround" prefixIcon="search" shape="circle" color="#ffffff"
				placeholderStyle="color:#ffffff" @blur="change" v-model="searchText"></u--input>
		</view>
		<view style="padding: 0 24rpx;">
			<view class="flex expense_list_filter flex_cen flex_center" @click="showPop = true">
				<image src="../../static/img/fliter.png" style="margin-right: 12rpx; height: 36rpx; width: 40rpx;">
				</image>
				<view>筛选</view>
			</view>
			<view class="emptyImg flex_col" v-if="subscribeList.length === 0 && deliveryList.length === 0">
				<image mode="aspectFit" src="../../static/img/empty/reserveEmpty.png" />
				<text class="empty-text">暂时没有预约</text>
			</view>
			<view class="reserve_content" v-else>
				<deliveryCard v-for="(delivery, index) in deliveryList" :key="delivery.id" :deliveryInfo="delivery">
				</deliveryCard>
				<reserveCard v-for="(reserve, index) in subscribeList" :key="reserve.id" :reserveInfo="reserve" :examPass="examResultMap[reserve.id]">
				</reserveCard>
			</view>
			<u-popup :show="showPop" mode="right" @close="close" customStyle="width:650rpx">
				<view class="expense_list_pop_content">
					<view style="margin-bottom: 16rpx;">
						<text>预约日期</text>
					</view>
					<view class="flex_cen flex_center">
						<uni-datetime-picker v-model="dateArea" type="daterange" />
					</view>

					<view style="margin-top: 48rpx;">
						<text>预约单状态</text>
						<view class="expense_list_pop_content_type">
							<view class="expense_list_pop_content_type_label" @click="choiceType(filterLabel.value)"
								v-for=" (filterLabel, index) in filterLabelArr"
								:style=" choiceSubscribeType.includes(filterLabel.value)?'background-color:rgba(46, 117, 230, .1);color:rgba(46, 117, 230, 1);':''">
								{{filterLabel.label}}
							</view>
						</view>
					</view>

				</view>
				<view class="flex_cen flex_center expense_list_pop_foot">
					<button @click="resetFliter">重置</button>
					<button @click="confirmFliter"
						style="background-color: #2E75E6; color: #FFFFFF; border: none;">确定</button>
				</view>

			</u-popup>
		</view>

	</view>
</template>

<script>
	import {
		QuerySubscribeList,
		QueryLazySubscribeList,
		userMobileOperation,
		QueryDeliveryTruckList,
		getOptionEnum,
		GetReserveListExamResults
	} from '../../api/apiList.js'
	export default {
		data() {
			return {
				subscribeList: [],
				deliveryList: [],
				pageNum: 1,
				userInfo: {},
				showPop: false,
				choiceSubscribeType: [],
				filterLabelArr: [],
				dateArea: [],
				isFliter: false,
				searchText: '',
				isSearch: false,
				examResultMap: {}
			}
		},
		methods: {
			change(value) {
				this.searchText = value
				this.pageNum = 1
				this.deliveryList = []
				this.isFliter = false
				if (value) {
					this.isSearch = true
					this.querySubscribeList()
						()
				} else {
					this.isSearch = false
					this.getUserInfo()
				}
			},
			confirmFliter() {
				this.showPop = false
				this.isFliter = this.choiceSubscribeType.length > 0 || this.dateArea.length > 0
				this.pageNum = 1
				this.deliveryList = []
				this.subscribeList = []
				this.getUserInfo()

			},
			choiceType(val) {
				this.choiceSubscribeType.includes(val) ? this.choiceSubscribeType.splice(this.choiceSubscribeType.indexOf(
						val), 1) : this
					.choiceSubscribeType.push(val)

			},
			getOptionEnumInit() {
				getOptionEnum('TruckAccessStatus').then(res => {
					this.filterLabelArr = res.data.data.datas
				})
			},
			close() {
				this.showPop = false
			},
			resetFliter() {
				this.choiceSubscribeType = []
				this.dateArea = []
			},
			//获取用户信息
			getUserInfo() {
				userMobileOperation('getUserInfo').then(res => {
					let data = res.data.data
					data.mobile = data.userExt.mobile || '暂无'
					this.userInfo = {
						...data
					}
					this.querySubscribeList()

					this.queryDeliveryTruckList()
				})
			},
			querySubscribeList() {

				let that = this
				let restrictions = []
				if (this.isFliter) {
					if (this.dateArea.length > 0) {
						restrictions = restrictions.concat([{
							"field": "bookingTime",
							"type": "LE",
							"value": new Date(this.dateArea[1].trim()).toISOString()
						}, {
							"field": "bookingTime",
							"type": "GE",
							"value": new Date(this.dateArea[0].trim()).toISOString()
						}])
					}
					if (this.choiceSubscribeType.length > 0) {
						restrictions.push({
							"field": "status",
							"type": "IN",
							"value": this.choiceSubscribeType
						})
					}
				}
				
				if (this.isSearch) {

					restrictions.push({
						"field": "accessNo",
						"type": "LK",
						"value": this.searchText
					})

				}
				// restrictions.push({
				// 			"field": "driverPhone",
				// 			"type": "EQ",
				// 			"value": this.userInfo.userExt.mobile
				// 		 })
				QuerySubscribeList({
					"args": {
						"pageNum": this.pageNum,
						"pageSize": 20,
						// 按照当前用户过滤数据
						// "restrictions": [{
						// 	"field": "driverPhone",
						// 	"type": "EQ",
						// 	"value": this.userInfo.userExt.mobile
						// }]
						restrictions
					},
				}).then(res => {
					console.log(res)
					if (this.pageNum === 1) {
						this.subscribeList = []
					}
					let accessIds = []
					res.data.data.datas.map(data => {
						accessIds.push(data.id)
					})
					GetReserveListExamResults({
						"aux": {
							accessIds
						}
					}).then(res1 => {
						console.log(res1)

						Object.assign(that.examResultMap, res1.data.data)
						
					})
					this.subscribeList = this.subscribeList.concat(res.data.data.datas)


					QueryLazySubscribeList({
						"args": {
							"pageNum": this.pageNum,
							"pageSize": 20,
							// 按照当前用户过滤数据
							// "restrictions": [{
							// 	"field": "driverPhone",
							// 	"type": "EQ",
							// 	"value": this.userInfo.userExt.mobile
							// }]
							restrictions
						},
					}).then(res => {
						uni.stopPullDownRefresh()
						this.subscribeList = this.subscribeList.concat(res.data.data.datas)

					})
				}).catch(res => {
					console.log(res)
				})
			},
			queryDeliveryTruckList() {
				let that = this
				if (this.isFliter) return
				QueryDeliveryTruckList({
					"args": {
						"pageNum": this.pageNum,
						"pageSize": 20,
						// 按照当前用户过滤数据
						// "restrictions": [{
						// 	"field": "driver.tel",
						// 	"type": "EQ",
						// 	"value": this.userInfo.userExt.mobile
						// }]
					},
				}).then(res => {
					uni.stopPullDownRefresh()

					if (this.pageNum === 1) {
						this.deliveryList = []
					}
					this.deliveryList = this.deliveryList.concat(res.data.data.datas)
				}).catch(res => {
					console.log(res)
				})
			},

		},
		onShow() {
			this.pageNum = 1
			this.deliveryList = []
			this.subscribeList = []
			this.isSearch = false
			this.searchText = ''
			this.isFliter = false
			this.getUserInfo()
			this.getOptionEnumInit()
		},
		onReachBottom() {
			this.pageNum++
			this.querySubscribeList()
			this.queryDeliveryTruckList()
		},
		onPullDownRefresh() {
			this.pageNum = 1
			// this.resetFliter()
			// this.isFliter = false
			this.isSearch = false
			this.searchText = ''
			this.deliveryList = []
			this.querySubscribeList()
			this.queryDeliveryTruckList()
		}
	}
</script>

<style lang="scss">
	.reserve {

		background-color: #FAFAFA;
		min-height: 100vh;

		.queueSubscribeTitle {
			width: 100%;
			height: 128rpx;
			background-color: #2E75E6;
			display: flex;
			align-items: center;
			padding: 0 25rpx;

			.u-input {
				background-color: rgba(240, 240, 240, .5);
				height: 80rpx;
				border: none;
			}

			/deep/.u-icon__icon {
				font-size: 48rpx !important;
				color: #FFFFFF !important;
			}

		}

		.emptyImg {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -75%);

			image {
				width: 609rpx;
			}

			.empty-text {
				font-size: 28rpx;
				text-align: center;
				color: BFBFBF;
			}
		}

		.reserve_content {}

		.expense_list_filter {
			color: #434343;
			font-size: 28rpx;
			justify-content: flex-end;
			padding-top: 32rpx;
			padding-right: 24rpx;
			padding-bottom: 16rpx;
		}

		.expense_list_pop_content {
			margin: 24rpx;
			height: calc(100vh - 144rpx);
		}

		.expense_list_pop_foot {
			height: 144rpx;
			position: absolute;
			bottom: 0;
			width: 100%;
			border-top: 2rpx solid #F0F0F0;

			button {
				height: 88rpx;
				width: 284rpx;
				border-radius: 44rpx;
				background-color: #FFFFFF;
				border: 3rpx solid #E5E5E5;
				font-size: 32rpx;
				color: #434343;
				line-height: 88rpx;
			}
		}

		.expense_list_pop_content_type {
			display: flex;
			flex-wrap: wrap;

			.expense_list_pop_content_type_label {
				height: 64rpx;
				width: 150rpx;
				line-height: 64rpx;
				text-align: center;
				background-color: #F0F0F0;
				border-radius: 8rpx;
				font-size: 26rpx;
				margin: 24rpx;
				color: #323233;
			}
		}

		.expense_list_pop_content_connect {
			margin: 0 16rpx;
			height: 0;
			width: 39rpx;
			border: 2rpx solid #BFBFBF;
		}
	}
</style>
