<template>
	<view class="reserve content_box">
		<view class="emptyImg flex_col" v-if="subscribeList.length === 0">
			<image mode="aspectFit" src="../../static/img/empty/reserveEmpty.png" />
			<text class="empty-text">暂时没有预约单</text>
		</view>
		<view class="reserve_content" v-else>
			<reserveChoiceCard v-for="(reserve, index) in subscribeList" :key="reserve.id" :reserveInfo="reserve" @cardCilck="cardCilck" :isChoice="reserve.id === choiceId">
			</reserveChoiceCard>
		</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 class="detailFoot">
			<button @click="cancelOrder">返回</button>
			<button :style="choiceId?'':'opacity: .3; pointer-events: none;'" @click="onConfirm">确定</button>
		</view>		
	</view>
</template>

<script>
	import {
		QuerySubscribeList,
		userMobileOperation,
		getOptionEnum,
		ExecuteNewAccess
	} from '../../api/apiList.js'
	export default {
		data() {
			return {
				subscribeList: [],
				pageNum: 1,
				userInfo: {},
				showPop: false,
				choiceSubscribeType: [],
				filterLabelArr: [],
				dateArea: [],
				isFliter: false,
				oldOrderInfo: {},
				choiceId: ''
			}
		},
		onLoad(option) {
			const {
				orderInfo
			} = option
			this.pageNum = 1
			this.getUserInfo()
			this.getOptionEnumInit()
			this.isFliter = false
			this.oldOrderInfo = JSON.parse(orderInfo)
			
		},
		methods: {
			cancelOrder(){
				uni.navigateBack()
			},
			confirmFliter() {
				this.showPop = false
				this.isFliter = this.choiceSubscribeType.length > 0 || this.dateArea.length > 0
				this.pageNum = 1
				this.subscribeList = []
				this.getUserInfo()

			},
			onConfirm(){
				ExecuteNewAccess({
					"args": {
						"selectedIds": [this.oldOrderInfo.id],
						"additionalIds": {
							"": {
								"bizName": "tm.TruckQueueAccess",
								"selectedIds": [this.choiceId]
							}
						}
					}
				}).then(res=>{
					uni.navigateBack()
				})
			},
			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
			},
			cardCilck(id){
				this.choiceId = id
			},
			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()

				})
			},
			querySubscribeList() {

				let that = this
				let restrictions = [{
					"field": "bookingTime",
					"type": "SAMEDAY",
					"value": this.oldOrderInfo.bookingTime
				}, {
					"field": "entryDoor.name",
					"type": "EQ",
					"value": this.oldOrderInfo['entryDoor.name']
				}, {
					"field": "status",
					"type": "EQ",
					"value": '120.UnSign'
				},{
					"field": "driverName",
					"type": "EQ",
					"value": this.oldOrderInfo.driverName
				}]
				QuerySubscribeList({
					"args": {
						"pageNum": this.pageNum,
						"pageSize": 20,
						restrictions
					},
				}).then(res => {
					uni.stopPullDownRefresh()
					console.log(res)
					if (this.pageNum === 1) {
						this.subscribeList = []
					}
					this.subscribeList = this.subscribeList.concat(res.data.data.datas)
					
				}).catch(res => {
					console.log(res)
				})
				
			},


		},
		onReachBottom() {
			this.pageNum++
			this.querySubscribeList()
			this.queryDeliveryTruckList()
		},
		onPullDownRefresh() {
			this.pageNum = 1
			this.resetFliter()
			this.isFliter = false
			this.deliveryList = []
			this.querySubscribeList()
			this.queryDeliveryTruckList()
		}
	}
</script>

<style lang="scss">
	.reserve {
		padding: 0 24rpx;
		background-color: #FAFAFA;
		min-height: 100vh;

		.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;
		}
		.detailFoot {
			position: fixed;
			display: flex;
			padding-bottom: 10rpx;
			justify-content: space-between;
			width: 100%;
			bottom: 0;
			left: 0;
			background-color: #FFFFFF;
			button {
				width: 339rpx;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 44rpx;
				color: #2E75E6;
				padding: 0 24rpx;
				border: 3rpx solid transparent;
				position: relative;
				background-clip: padding-box, border-box;
				background-origin: padding-box, border-box;
				background-image: linear-gradient(90deg, #FAFAFA, #FAFAFA), linear-gradient(90deg, #2E75E6, #5E58EE);
		
				&:after {
					content: "";
				}
		
				&:last-child {
					background-image: linear-gradient(90deg, #2E75E6, #5E58EE), linear-gradient(90deg, #2E75E6, #5E58EE);
					color: #FFFFFF;
				}
			}
		
		}
	}
</style>
