<template>
	<view class="subscribeOrderDetail content_box">
		<view class="cargoDetail-item">
			<view class="detail-title flex_center" style="border: none;">
				<view class="flex_center flex_cen">
					预约单号: {{isEmpty(orderInfo.accessNo)}}

					<image src="../../static/img/icon/copy.png" @click="copyAccessNo"></image>

				</view>
				<view v-if="orderInfo.statusLabel"
					:class="['detail-title-label', isEmpty(orderInfo.statusLabel) === '已关闭'?'closed':'']">
					{{isEmpty(orderInfo.statusLabel)}}
				</view>
			</view>
			<!-- 订单明细" -->
			<view class="detail-title">
				<bs-customCell label="司机姓名" :value="orderInfo.driverName" labelCol="3" wrapCol="9" />
				<bs-customCell label="司机手机" :value="orderInfo.driverPhone" labelCol="3" wrapCol="9" />
				<bs-customCell label="预约地点" :value="addressName" labelCol="3" wrapCol="9" />
				<bs-customCell label="预约时间" :value="orderTime" labelCol="3" wrapCol="9" />
				<bs-customCell label="业务类型" :value="orderInfo.bizTypeLabel" labelCol="3" wrapCol="9" />
			</view>
			<view class="flex_sb">
				<button @click="showQrc" v-if="isEmpty(orderInfo.statusLabel) !== '已关闭'">
					<image src="../../static/img/icon/qrc.png" mode=""></image>
					<view class="">
						出示二维码
					</view>
				</button>
				<button @click="excuNewSubscribe" v-if="isEmpty(orderInfo.statusLabel) === '作业完成'">
					<view class="">
						执行新预约
					</view>
				</button>
			</view>

		</view>
		<view style="font-size: 28rpx;font-weight: bolder;margin-left: 24rpx;margin-bottom: 24rpx;">
			<bs-customCell label="物料详情" :labelCustomStyle="`color:#434343`" labelCol="12" wrapCol="0" />
		</view>

		<view class="material">

			<!-- 货物明细 -->
			<view class="detail-row-title">
				<u-row customStyle="margin-top:24rpx">
					<u-col textAlign="left" span="2">顺序</u-col>
					<u-col textAlign="left" span="3">名称</u-col>
					<u-col textAlign="left" span="7">对应月台</u-col>
				</u-row>
			</view>
			<uni-collapse v-model="activeNames" :key="index">
				<view class="outer-frame">
					<uni-collapse-item :show-arrow="false" title-border="none" :name="item.id"
						v-for="(item, index) in materialList" :key="index">
						<!-- 自定义标题栏 -->
						<template v-slot:title>
							<view class="foldPanel-title">
								<u-row customStyle="height:100%">
									<u-col span="2">{{index+1}}</u-col>
									<u-col span="3">{{isEmpty(item["product.name"])}}</u-col>
									<u-col span="5">{{isEmpty(item["dock.name"])}}</u-col>
									<u-col span="2">
										<view
											:class="['foldPanel-right-icon', 't-icon',  activeNames.includes(item.id) ? 't-icon-unfold' :'t-icon-fold']" />
									</u-col>
								</u-row>
								<!-- 自定义标题栏右侧图标 -->
							</view>
						</template>
						<!-- 货物详情 -->
						<view class="cargo-detail-table">
							<u-row>
								<u-col span="7" customStyle="padding-left: 24rpx">
									<bs-customCell :customStyle="`color:#8C8C8C;font-size:28rpx`" label="计划货量"
										:value="`${item.qty}件/${item.weight}Kg/${item.volume}方`" labelCol="4"
										wrapCol="8" />
									<bs-customCell :customStyle="`color:#8C8C8C;font-size:28rpx`" label="实际货量"
										:value="`${item.actualQty}件/${item.actualWeight}Kg`" labelCol="4" wrapCol="8" />
								</u-col>
							</u-row>
						</view>
					</uni-collapse-item>
				</view>
			</uni-collapse>
		</view>

		<view style="font-size: 28rpx;font-weight: bolder;margin-left: 24rpx;margin-bottom: 24rpx;">
			<bs-customCell label="操作详情" :labelCustomStyle="`color:#434343`" labelCol="12" wrapCol="0" />
		</view>

		<view style="display: flex;" class="passDetail">
			<u-steps :current="current" direction="column" inactiveColor="#BFBFBF" activeColor="#2979ff">
				<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" v-else>

						</view>

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


				</u-steps-item>
			</u-steps>
		</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"
						:class="['detail-title-label', isEmpty(orderInfo.statusLabel) === '已关闭'?'closed':'']">
						{{orderInfo.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="orderInfo.truckNo" size="400"></tki-qrcode>
				<view style="margin-top: 20rpx;text-align: center">
					{{
					orderInfo.truckNo
				}}
				</view>
			</view>

		</u-popup>

	</view>
</template>

<script>
	import {
		GetOrderDetail,
		CancelOrderTime,
		ChangeCargoSort,
		GetOrderHistoryEvent
	} from '../../api/apiList'

	import {
		formatGMT
	} from '../../utils/util.js'

	export default {
		data() {
			return {
				isDrag: false,
				currentDockId: "",
				addressName: "",
				orderId: "",
				orderInfo: {},
				materialList: [],
				activeNames: [],
				orderTime: "",
				dragMaterialList: [],
				changeSortIndex: [],
				cancelModal: false,
				cancelInfo: '',
				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: [],
				time: {},
				qrcShow: false,
				locationTime: ''
			}
		},
		methods: {
			showQrc() {
				this.timing()
				this.qrcShow = true
			},
			closeQrc() {
				if (this.time) {
					clearInterval(this.time)
				}
				this.qrcShow = false
			},
			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
				);
			},
			changeMaterialList(newMaterialList) {
				this.changeSortIndex = []
				this.dragMaterialList = newMaterialList
				let that = this
				newMaterialList.map((val, ind) => {
					that.changeSortIndex.push({
						id: val.id,
						sortNum: that.materialList[ind]["sortNum"]
					})
				})
			},
			isEmpty(value) {
				if (value) return value
				return ''
			},
			btnClick() {
				if (this.isDrag) {
					this.changeCargoSort()
					this.materialList = this.dragMaterialList
				} else {
					this.isDrag = true

				}
			},
			changeDock(materialInfo) {
				console.log(materialInfo)
				uni.navigateTo({
					url: `/subpkg/changeDock/changeDock?materialInfo=${JSON.stringify(materialInfo)}`
				})
			},
			toOrderPage() {
				uni.navigateTo({
					url: `/subpkg/orderTime/orderTime?orderDetailInfo=${JSON.stringify({"orderInfo":this.orderInfo,"materialList": this.materialList})}`
				})
			},
			excuNewSubscribe() {
				uni.navigateTo({
					url: `/subpkg/excuNewSubscribe/excuNewSubscribe?orderInfo=${JSON.stringify(this.orderInfo)}`
				})
			},
			getOrderHistoryEvent() {
				let that = this
				GetOrderHistoryEvent({
					"args": {
						"pageNum": 1,
						"pageSize": 100,
						"restrictions": [{
							"field": 'access.id',
							"type": "EQ",
							"value": this.orderId
						}]
					}
				}).then(res => {
					let eventTrace = res.data.data.datas
					let processInfo = JSON.parse(JSON.stringify(that.processInfo))
					console.log(processInfo)
					that.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))

					that.processInfoAct = processInfo
					let processInfoAct = JSON.parse(JSON.stringify(that.processInfoAct))
					processInfoAct.reverse()
					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
									}
								}
							}
						}
						that.processInfoAct = processInfoArr

					}
				})
			},

			getOrderDetail() {

				let that = this
				GetOrderDetail({
					"args": {

					},
					"aux": {
						"id": this.orderId
					}
				}).then(res => {
					that.materialList = []
					that.dragMaterialList = []
					that.orderInfo = res.data.data.header
					that.addressName = res.data.data.header["address.name"]
					res.data.data.accessItems.rows.map(val => {
						that.materialList.push(val)
						that.dragMaterialList.push(val)
					})
					that.materialList.sort((v1, v2) => {
						return v1.sortNum - v2.sortNum
					})
					that.dragMaterialList.sort((v1, v2) => {
						return v1.sortNum - v2.sortNum
					})
				}).catch(res => {
					console.log(res)
				})
			},
			changeCargoSort() {
				let that = this
				ChangeCargoSort({

					// "args":{
					// 	items :
					// 	   that.changeSortIndex
					// },
					"aux": {
						items: that.changeSortIndex
					}
				}).then(res => {
					that.isDrag = false
					that.getOrderDetail()
				})
			},
			confirmCancel() {
				const {
					orderId,
				} = this
				const reqData = {
					"args": {
						"selectedIds": [orderId],
						"remark": this.cancelInfo
					}
				}
				CancelOrderTime(reqData).then(res => {
					if (res.data.messageType === 'success') {
						uni.showToast({
							title: '撤消预约成功',
							duration: 3000
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}
				})
			},
			getTimeLabel(time, type) {
				if (time) {
					return formatGMT(time, type)

				}
				return ''
			},
			clearOrderTime() {
				this.orderTime = ""
			},
			setOrderTime(currentTime) {
				const nowDate = new Date(currentTime.allStartTime)
				const year = nowDate.getFullYear();
				const month = nowDate.getMonth() + 1
				const date = nowDate.getDate();
				this.orderTime = year + "-" + month + "-" + date + " " + currentTime.timeLabel
			},
			copyAccessNo() {
				uni.setClipboardData({
					data: this.isEmpty(this.orderInfo.accessNo)
				});
			}
		},
		onLoad(atts) {
			this.orderId = atts.id
			this.orderTime = atts.orderTime
			this.getOrderDetail()
		},
		mounted() {},
		computed: {
			current() {
				let num = this.processInfoAct.length
				for (let i = this.processInfoAct.length - 1; i >= 0; i--) {
					if (this.processInfoAct[i].time) {
						return i
					}

				}
				return num

			}
		},
		onShow() {
			this.orderInfo = {},
				this.materialList = []
			this.dragMaterialList = []
			this.getOrderDetail(),
				this.getOrderHistoryEvent()
		}
	}
</script>

<style lang="scss">
	.subscribeOrderDetail {
		background-color: #F9F9F9;

		.cargoDetail-item {
			padding: 0 24rpx;
			margin-bottom: 24rpx;
			background: #FFFFFF;
			position: relative;
			opacity: 0.8;
			color: #434343;

			.custom-cell-label {
				color: #8C8C8C;
			}

			button {
				background-color: #EAF1FC;
				height: 80rpx;
				border-radius: 40rpx;
				color: #2E75E6;
				font-size: 32rpx;
				font-weight: bolder;
				display: flex;
				justify-content: center;
				align-items: center;
				min-width: 340rpx;

				&::after {
					border: none;
				}

				image {
					width: 46rpx;
					height: 46rpx;
					margin-right: 24rpx;
				}

				img {
					width: 46rpx;
					height: 46rpx;
					margin-right: 24rpx;
				}
			}


		}

		.material {
			padding: 0 24rpx;
			margin-bottom: 32rpx;
			background: #FFFFFF;

			.detail-row-title {
				color: #8C8C8C;
				height: 64rpx;
				line-height: 64rpx;
				padding-left: 20rpx;
			}

			/deep/.custom-cell-row {
				margin-top: 16rpx;

			}

			.outer-frame {
				overflow: hidden;

				.foldPanel-title {
					color: #434343;
					font-size: 28rpx;
					padding-left: 20rpx;
					font-weight: bolder;
					height: 88rpx;
					background-color: #F0F0F0;
					border-radius: 10rpx;

					.foldPanel-right-icon {
						margin-right: 20rpx;
					}
				}

				/deep/.uni-collapse-item {
					margin-top: 24rpx;

				}

				/deep/.cargo-detail-table {
					background: #FFFFFF;
					padding-bottom: 10rpx;


					.detail-col-item {
						margin: 32rpx 20rpx;

						.cargo-title {
							font-size: 28rpx;
							padding-left: 20rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}

					.change_btn {
						height: 64rpx;
						width: 171rpx;
						border: 2rpx solid #8C8C8C;
						border-radius: 32rpx;
						color: #8C8C8C;
						font-size: 28rpx;
						line-height: 64rpx;
						margin-right: 24rpx;
					}
				}

			}
		}

		.detail-title {
			font-size: 28rpx;
			color: #BCBCBC;
			margin-top: 31rpx;
			justify-content: space-between;
			padding-bottom: 24rpx;

			.t-icon-order {
				width: 50rpx;
				height: 50rpx;
				margin-right: 20rpx;
			}


			.detail-title-label {
				background-color: rgba(247, 166, 74, .1);
				color: #F7A64A;
				height: 48rpx;
				text-align: center;
				line-height: 48rpx;
				border-radius: 8rpx;
				padding: 0 24rpx
			}

			.closed {
				background-color: #bfbfc1;
				color: #fefeff;
			}

			image {
				width: 28rpx;
				height: 28rpx;
				margin-left: 12rpx;
			}

			img {
				width: 28rpx;
				height: 28rpx;
				margin-left: 12rpx;
			}
		}

		.edit_btn {
			margin: 32rpx 0;
			height: 80rpx;
			border-radius: 44rpx;
			background-color: #EAF1FC;
			color: #2E75E6;
			font-size: 32rpx;
			line-height: 80rpx;
		}


		.snapshoot image {
			margin: 20rpx 15rpx;
			width: 140rpx;
			height: 140rpx;
		}

		.detailFoot {
			position: sticky;
			display: flex;
			justify-content: space-between;
			bottom: 28rpx;
			width: 100%;

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

		}

		.detailDisableFoot {
			position: sticky;
			display: flex;
			justify-content: space-between;
			bottom: 28rpx;
			width: 100%;
			pointer-events: none;

			button {
				width: 339rpx;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 44rpx;
				color: #8C8C8C;
				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, #8C8C8C, #8C8C8C);

				&:after {
					content: "";
				}

				&:last-child {
					background-image: linear-gradient(90deg, #8C8C8C, #8C8C8C), linear-gradient(90deg, #8C8C8C, #8C8C8C);
					color: #FFFFFF;
				}
			}

		}



		.orderDetailFoot {
			button {
				width: 262rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 40rpx;
				margin: 0;
			}
		}

		/deep/.u-modal {
			.u-modal__title {
				color: #434343 !important;
				font-weight: unset !important;
				padding: 38rpx auto !important;
			}

			.u-textarea {
				background-color: #FAFAFA;
			}
		}

		.passDetail {
			margin: 0 24rpx;

			/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__wrapper {
					background-color: #FAFAFA;
				}

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

		}

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

			.detail-title-label {
				color: #F7A64A;
			}

			.closed {
				color: #bfbfc1;
			}
		}

	}
</style>
