<template>
	<view class=" reserveCard" >
		<view class="shipment-header flex_sb" @click="toOrderDetail">
			<view class="shipment_code flex_center">
				<text selectable> 访问单号：{{reserveInfo.accessNo}}</text>
			</view>
			<view :class="reserveInfo.status ==='500.Closed' ? 'shipment-state' : 'shipment-state shipmenting'">
				{{reserveInfo.statusLabel}}
			</view>
		</view>
		<u-line customStyle="position: absolute; left: 0" margin="22rpx 0"></u-line>

		<!-- 主要运单信息 -->
		<view style="padding-top: 18rpx; margin-bottom: 32rpx;" @click="toOrderDetail">
			<bs-customCell label="预约地址" :value="reserveInfo['address.name']" labelCol="3" wrapCol="9" />
			<bs-customCell label="预约日期" :value="orderTime" labelCol="3" wrapCol="9" />
			<bs-customCell label="业务类型" :value="reserveInfo.bizTypeLabel" labelCol="3" wrapCol="9" />
			<bs-customCell label="车牌号" :value="reserveInfo.truckNo" labelCol="3" wrapCol="9" />
			<bs-customCell label="货量" labelCol="3" wrapCol="9"
				:value="reserveInfo.qty+ '件/' + reserveInfo.weight+'千克/'+ reserveInfo.volume+'方'">
			</bs-customCell>
			<bs-customCell label="入场大门" :value="doorName" labelCol="3" wrapCol="9" />
		</view>

		<view class="reserveCardButton">
			<button @click="subscribe" v-if="reserveInfo.status === '115.Appointing'">预约</button>
			<button @click="signIn" :disabled="!examPass" :style="examPass?'':'opacity: .5'" v-else-if="reserveInfo.status === '120.UnSign'">签到</button>			
			<view class="detailFoot" v-else-if="reserveInfo.status !== '500.Closed'">
				<button @click="showProcess">进度查询</button>
				<button @click="showQrc">二维码</button>
			</view>
		</view>
		<u-popup :show="qrcShow" mode="center" @close="closeQrc" @touchmove.stop>
			<view class="qrc" v-if="locationTime.year">
				<view class="flex_sb flex_center" style="width: 100%; padding-bottom: 24rpx;">
					<view style="font-weight: bolder">
						{{reserveInfo.statusLabel}}
					</view>
					<view>
						<span>
							{{locationTime.year+'-'+ locationTime.mouth+ '-' +locationTime.date+ ' '+ locationTime.hour+':'+locationTime.minute+':'}}
						</span>
						<span style="font-weight: bolder">{{locationTime.second}}</span>
					</view>
				</view>
				<tki-qrcode v-if="qrcShow" :val="reserveInfo.accessNo" size="400"></tki-qrcode>
				<view style="margin-top: 20rpx;text-align: center">
					{{
						reserveInfo.truckNo
					}}
				</view>
			</view>

		</u-popup>
		<!-- </u-modal>> -->

		<u-popup :show="processShow" mode="center" @close="closeProcess">
			<view class="process">
				<view style="color: #434343;font-size: 32rpx;font-weight: bolder;">
					{{reserveInfo.statusLabel}}
				</view>
				<view style="color: #434343;font-size: 32rpx;margin: 12rpx 0;">
					{{reserveInfo["address.name"]}}
				</view>
				<view style="color: #8C8C8C;font-size: 28rpx;margin-bottom: 24rpx;">
					访问单号：{{reserveInfo.accessNo}}
				</view>
				<view style="display: flex; max-height: 644rpx; overflow-y: auto;">
					<u-steps :current="current" direction="column" inactiveColor="#2979ff" activeColor="#BFBFBF">
						<u-steps-item :title="`${title.label} ${getTimeLabel(title.time, 'H')}`"
							v-for="(title, index) in processInfoAct" :key="index">
							<view slot="icon">
								<view class="passIcon" style="height: 32rpx; width: 32rpx; " v-if="index>current">

								</view>
								<view
									style="height: 32rpx; width: 32rpx; border-radius: 16rpx;background-color: #2979ff;"
									v-else-if="index==current">

								</view>

								<view
									style="height: 32rpx; width: 32rpx; border-radius: 16rpx;background-color: #BFBFBF;"
									v-else>
								</view>
							</view>


						</u-steps-item>
					</u-steps>
				</view>
			</view>
		</u-popup>
		<view v-if="!examPass && ['120.UnSign'].includes(reserveInfo.status)" style="color: #EB2F48FF; font-size: 24rpx; margin-top: 18rpx;">
			考试未通过，请前往考试
		</view>
	</view>
</template>

<script>
	import {
		GetOrderHistoryEvent,
		userMobileOperation,
		GetReserveExamResult
	} from '../../api/apiList.js'
	import {
		formatGMT
	} from '../../utils/util.js'
	export default {
		name: "reserveCard",
		options: {
			styleIsolation: 'shared'
		},
		props: ['reserveInfo','examPass'],
		data() {
			return {
				qrcShow: false,
				locationTime: {},
				processShow: false,
				time: null,
				currentInfo: {},
				processInfo: [{
						"name": "appoint",
						"label": "预约时间",
						"time": ''
					},
					{
						"name": "sign",
						"label": "到厂签到",
						"time": ''
					},
					{
						"name": "call",
						"label": "通知叫号",
						"time": ''
					},

					{
						"name": "entry",
						"label": "入厂放行",
						"time": ''
					},

					{
						"name": "parkingWaiting",
						"label": "停车场等候",
						"time": ''
					},

					{
						"name": "drivingToBerth",
						"label": "待驶入泊位",
						"time": ''
					},

					{
						"name": "start",
						"label": "作业开始",
						"time": ''
					},
					{
						"name": "end",
						"label": "作业完成",
						"time": ''
					},
					{
						"name": "exit",
						"label": "离厂放行",
						"time": ''
					}
				],
				processInfoAct: [],
				userInfo: {},
				// examPass:false
			};
		},
		onLoad() {			
			// this.getReserveExamResult()
		},
		mounted() {
			// this.getReserveExamResult()
		},
		methods: {
			getReserveExamResult() {
				GetReserveExamResult({
					"aux": {
						"accessId": this.reserveInfo.id,
					}
				}).then(res => this.examPass = res.data.data)
			},
			parseTime(oldDate) {
				let date = new Date(oldDate);
				return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
			},
			subscribe() {
				const data = {
					subscribeInfo: this.reserveInfo
				}
				uni.navigateTo({
					url: `/subpkg/orderTime/orderTime?data=${JSON.stringify(data)}`,
				})
			},
			signIn() {
				const data = {
					formNumber: this.reserveInfo["accessNo"],
					deliveryId: this.reserveInfo["id"],
					type: "access",
					appFenceRadius: this.reserveInfo["address.appFenceRadius"],
					latitude:this.reserveInfo["address.latitude"],
					longitude:this.reserveInfo["address.longitude"]
				}
				uni.navigateTo({
					url: `/subpkg/signIn/signIn?data=${JSON.stringify(data)}`,
				})
			},
			timing() {
				this.locationTime = {
					year: new Date().getFullYear(), // 获取当前年份(2位)
					mouth: new Date().getMonth() + 1,
					date: new Date().getDate(),
					hour: new Date().getHours(),
					minute: new Date().getMinutes(),
					second: new Date().getSeconds()<10?"0"+new Date().getSeconds():new Date().getSeconds()
					
				}
				this.time = setInterval(

					() => {
						let locationTime = {
							year: new Date().getFullYear(), // 获取当前年份(2位)
							mouth: new Date().getMonth() + 1,
							date: new Date().getDate(),
							hour: new Date().getHours(),
							minute: new Date().getMinutes(),
							second: new Date().getSeconds()<10?"0"+new Date().getSeconds():new Date().getSeconds()
							
						}
						this.locationTime = locationTime

					},
					1000
				);
			},
			showQrc() {
				this.timing()
				this.qrcShow = true
			},
			showProcess() {
				this.processShow = true
				this.getOrderHistoryEvent()
			},
			closeQrc() {
				if (this.time) {
					clearInterval(this.time)
				}
				this.qrcShow = false
			},
			closeProcess() {
				this.processShow = false

			},
			getOrderHistoryEvent() {
				GetOrderHistoryEvent({
					"args": {
						"pageNum": 1,
						"pageSize": 100,
						"restrictions": [{
							"field": 'access.id',
							"type": "EQ",
							"value": this.reserveInfo["id"]
						}]
					}
				}).then(res => {
					let eventTrace = res.data.data.datas
					let processInfo = JSON.parse(JSON.stringify(this.processInfo))
					console.log(processInfo)
					this.processInfoAct = []
					for (let pro of processInfo) {
						for (let i = 0; i < eventTrace.length; i++) {
							if (eventTrace[i].eventType.toLowerCase() === pro.name.toLowerCase() || ((eventTrace[i]
										.eventType.toLowerCase() === 'NoticeToBerth'.toLowerCase() || eventTrace[i]
										.eventType.toLowerCase() === 'NoticeToParking'.toLowerCase()) && pro.name
									.toLowerCase() === 'call')) {
								pro['time'] = eventTrace[i].eventTime
								eventTrace.splice(i, 1)
								break
							}

						}
					}
					console.log(processInfo)
					let processInfoArr = JSON.parse(JSON.stringify(processInfo))

					this.processInfoAct = processInfo.reverse()
					let processInfoAct = JSON.parse(JSON.stringify(this.processInfoAct))
					if (eventTrace.length > 0) {
						for (let i = 0; i < processInfoAct.length; i++) {
							let count = 0
							for (let j = eventTrace.length - 1; j >= 0; j--) {
								if (eventTrace[j].eventType === 'ExecuteNewAccess' && processInfoAct[i].name ===
									'end') {
									processInfoArr.splice(processInfoAct.length - i, 0, {
										"name": eventTrace[j].eventType,
										"label": eventTrace[j].eventTypeLabel,
										"time": eventTrace[j].eventTime
									})
									eventTrace.splice(j, 1)
								} else if (!processInfoAct[i].time) {

									break
								} else if (eventTrace[j].eventType && new Date(processInfoAct[i].time) < new Date(
										eventTrace[j].eventTime)) {
									if (['NoticeToBerth', 'NoticeToParking'].includes(eventTrace[j].eventType)) {
										processInfoArr.splice(processInfoAct.length - i, 0, {
											"name": eventTrace[j].eventType,
											"label": '通知叫号',
											"time": eventTrace[j].eventTime
										})
										count++
									} else {

										processInfoArr.splice(processInfoAct.length - i, 0, {
											"name": eventTrace[j].eventType,
											"label": eventTrace[j].eventTypeLabel,
											"time": eventTrace[j].eventTime
										})
										count++
									}
									if(j>0 && new Date(processInfoAct[i].time) < new Date(
										eventTrace[j-1].eventTime)){
											continue
										}
									else{
										eventTrace.splice(j, count)
										break
									}
								}
							}
						}
						this.processInfoAct = processInfoArr.reverse()

					}
				})
			},

			getTimeLabel(time, type) {
				if (time) {
					return formatGMT(time, type)

				}
				return ''
			},
			toOrderDetail(){
				uni.navigateTo({
					url: `/subpkg/subscribeOrderDetail/subscribeOrderDetail?id=${this.reserveInfo.id}&orderTime=${this.orderTime}`
				})
			}

		},
		computed: {
			orderTime() {
				if (this.reserveInfo.bookingTime && this.reserveInfo.bookingTimeLabel) {
					return this.parseTime(this.reserveInfo.bookingTime) + " " + this.reserveInfo.bookingTimeLabel
				} else if (this.reserveInfo.bookingTime) return this.parseTime(this.reserveInfo.bookingTime)
				return ""
			},
			doorName() {
				return this.reserveInfo['entryDoor.name'] ? this.reserveInfo['entryDoor.name'] : (this.reserveInfo
					.entryDoor ? this.reserveInfo.entryDoor.name : '')
			},
			current() {
				let num = this.processInfoAct.length
				for (let i = 0; i < num; i++) {
					if (this.processInfoAct[i].time) {
						return i
					}
				}
				return num

			}
		},
		show() {
			if (this.time) {
				clearInterval(this.time)
			}

		},
		destroyed() {
			if (this.time) {
				clearInterval(this.time)
			}
		},

	}
</script>

<style lang="scss">
	.reserveCard {
		padding: 28rpx 24rpx 32rpx 24rpx;
		border-radius: 24rpx;
		margin-top: 24rpx;
		font-size: 28rpx;
		position: relative;
		background-color: #FFFFFF;
		box-shadow: 1rpx 3rpx 12rpx rgba(0, 0, 0, 0.0400);

		.shipment_code {
			color: #8C8C8C;
			line-height: 40rpx;
			text-shadow: 1rpx 3rpx 12rpx rgba(0, 0, 0, 0.04);
		}

		.shipment-state {
			font-size: 28rpx;
			background-color: #bfbfc1;
			color: #fefeff;
			line-height: 33rpx;
			padding: 6rpx 24rpx;
			border-radius: 8rpx;
			text-shadow: 1rpx 3rpx 12rpx rgba(0, 0, 0, 0.04);
		}

		.shipmenting {
			background-color: rgba(247, 166, 74, .1);
			color: #F7A64A;
		}

		.t-icon-location {
			width: 50rpx;
			height: 50rpx;
		}

		.reserveCardButton {
			button {
				background-image: linear-gradient(90deg, #2E75E6, #5E58EE), linear-gradient(90deg, #2E75E6, #5E58EE);
				height: 88rpx;
				line-height: 88rpx;
				color: #FFFFFF;
				font-size: 32rpx;
				font-weight: bolder;
				border-radius: 44rpx;
			}
		}
		.reserveCardDisableButton{
			button{
				opacity: .5;
			}
		}

		.detailFoot {
			display: flex;
			justify-content: space-between;
			width: 100%;
			background-color: #FFFFFF;
			z-index: 100;

			button {
				width: 314rpx;
				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;
				}
			}

		}

		/deep/.u-popup__content {
			background-color: transparent;
		}

		.qrc {
			width: 600rpx;
			height: 600rpx;
			border-radius: 20rpx;
			padding: 32rpx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			background-color: #FFFFFF;
		}

		.process {
			width: 620rpx;
			height: 900rpx;
			border-radius: 24rpx;
			padding: 32rpx;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: column;

			/deep/.u-steps {
				flex: 1;

				.u-text {
					flex: none;

					.u-text__value {
						font-size: 28rpx !important;
					}
				}

				.u-steps-item {
					height: 88rpx;
					flex: none;

					&:last-child {
						height: auto;
					}
				}

				.u-steps-item__wrapper__dot {
					width: 32rpx;
					height: 32rpx;
				}

				.u-steps-item__content {
					margin-left: 32rpx !important;
				}

				.u-icon__icon {
					font-size: 32rpx !important;
				}
			}

			/deep/.u-steps-item__line {
				height: 100% !important;

				&:last-child {
					height: 0 !important;
				}
			}

			.slot-icon {
				width: 32rpx;
				height: 32rpx;
				background-color: transparent;
				border-radius: 100px;
				font-size: 12px;
				color: #2E75E6;
				line-height: 21px;
				text-align: center;
			}


			.passIcon {
				display: inline-flex;
				justify-content: center;
				align-items: center;
				width: 32rpx;
				height: 32rpx;
				background-color: transparent;
				border-radius: 50%;
				border: #2E75E6 2rpx solid;
			}

			.passIcon::after {
				content: '✓';
				color: #2E75E6;
				font-size: 24rpx;
				font-weight: bold;
			}

		}
	}
</style>
