<template>
	<div class="search">
		<div class='waiceng' style="margin-top: -5px;">
			<div class="nei1">
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">订单号：{{orderData.numberCode}}</div>
				<div style="flex:1;padding-left:10px;">配送单生成时间：{{orderData.deliveryInfo.createTime | formatDateTime}}
				</div>
			</div>
			
		</div>
		<div class="title">商家信息</div>
		<div class='waiceng'>
			<div class="nei1">
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">名称：{{orderData.shopName}}</div>
				<div style="flex:1;padding-left:10px;">联系方式：{{orderData.shopPhone}}</div>
			</div>
			<div class="nei1">
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">地址：{{orderData.shopAddress}}</div>
				<div style="flex:1;padding-left:10px;">出餐时间：{{orderData.shopMakeTime | formatDateTime}}</div>
			</div>
		</div>
		<div class="title">用户信息</div>
		<div class='waiceng'>
			<div class="nei1">
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">{{orderData.receiverName}}</div>
				<div style="flex:1;padding-left:10px;">联系方式：{{orderData.receiverPhone}}</div>
			</div>
			<div class="nei1">
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">地址：{{orderData.receiverAddress}}
				</div>
				<div style="flex:1;padding-left:10px;">预计送达时间：{{orderData.deliveryInfo.mustFinishTime | formatDateTime}}
				</div>
			</div>
		</div>
		<div class="title">商品信息</div>
		<div class='waiceng' style="text-align: center;">
			<div class="goods-table-row">
				<div class="goods-table-cell">商品名称</div>
				<div class="goods-table-cell">规格</div>
				<div class="goods-table-cell">数量</div>
				<div class="goods-table-cell last">总价</div>
			</div>
			<div class="goods-table-row" v-for="(item,index) in orderData.goodsList" :key="index">
				<div class="goods-table-cell">{{item.productName}}</div>
				<div class="goods-table-cell specs-cell">{{item.specs}}</div>
				<div class="goods-table-cell">{{item.quantity}}</div>
				<div class="goods-table-cell last">¥{{item.price}}</div>
			</div>
			<div class="goods-table-row">
				<div class="goods-summary-label">餐盒费</div>
				<div class="goods-summary-price">¥{{orderData.packageFee}}</div>
			</div>
			<div class="goods-table-row">
				<div class="goods-summary-label">配送费</div>
				<div class="goods-summary-price">¥{{orderData.deliveryFee}}</div>
			</div>
			<div class="goods-table-row">
				<div class="goods-summary-label">实付金额</div>
				<div class="goods-summary-price">¥{{orderData.totalAmount}}</div>
			</div>
			<div class="goods-table-row">
				<div class="goods-summary-label">抵用券金额</div>
				<div class="goods-summary-price">
					¥{{orderData.couponDiscountFee== null?0.00:orderData.couponDiscountFee}}</div>
			</div>
			<div class="goods-table-row">
				<div class="goods-summary-label">锦鲤免单金额</div>
				<div class="goods-summary-price">¥{{orderData.freeAmount > 0? orderData.freeAmount : 0}}</div>
			</div>
			<div class="goods-table-row">
				<div class="goods-summary-label">实付金额</div>
				<div class="goods-summary-price">¥{{orderData.totalAmount}}</div>
			</div>
		</div>
		<div class="title">配送流程</div>
		<div class='waiceng' style="text-align: center;">
			<div class="nei1">
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">状态</div>
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">时间</div>
				<div style="flex:1;padding-left:10px;">角色</div>
			</div>
			<div class="nei1">
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">用户下单</div>
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">
					{{orderData.createTime | formatDateTime}}</div>
				<div style="flex:1;padding-left:10px;"></div>
			</div>
			<div class="nei1">
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">配送员接单</div>
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">
					{{orderData.deliveryInfo.acceptTime | formatDateTime}}</div>
				<div style="flex:1;padding-left:10px;">{{orderData.deliveryInfo.workerName}}</div>
			</div>
			<div class="nei1">
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">商家出餐</div>
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">
					{{orderData.shopMakeTime | formatDateTime}}</div>
				<div style="flex:1;padding-left:10px;">{{orderData.shopName}}</div>
			</div>
			<div class="nei1" v-if="isTransferOrder">
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">商家送达中转点</div>
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">
					{{orderData.deliveryInfo.transferArriveTime | formatDateTime}}</div>
				<div style="flex:1;padding-left:10px;">{{orderData.shopName}}</div>
			</div>
			<div class="nei1">
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">{{isTransferOrder ? '配送员到达中转点' : '已到店'}}</div>
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">
					{{orderData.deliveryInfo.arriveTime | formatDateTime}}</div>
				<div style="flex:1;padding-left:10px;">{{orderData.deliveryInfo.workerName}}</div>
			</div>
			<div class="nei1">
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">配送员已取货</div>
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">
					{{orderData.deliveryInfo.getTime | formatDateTime}}</div>
				<div style="flex:1;padding-left:10px;">{{orderData.deliveryInfo.workerName}}</div>
			</div>
			<div class="nei1">
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">配送员已送达</div>
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">
					{{orderData.deliveryInfo.finishTime | formatDateTime}}</div>
				<div style="flex:1;padding-left:10px;">{{orderData.deliveryInfo.workerName}}</div>
			</div>
			<div class="nei1">
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">送单时长</div>
				<div style="width: 33%;padding-left:10px;">{{getMinutesDiff(orderData.deliveryInfo.acceptTime !=null?orderData.deliveryInfo.acceptTime:1,orderData.deliveryInfo.finishTime != null?orderData.deliveryInfo.finishTime:1)}}分钟</div>
			</div>
			<div class="nei1">
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">订单总计时</div>
				<div style="width: 33%;padding-left:10px;">{{getMinutesDiff(orderData.createTime,orderData.deliveryInfo.finishTime != null?orderData.deliveryInfo.finishTime:1)}}分钟</div>
			</div>
			<div class="nei1">
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">超时</div>
				<div style="width: 33%;padding-left:10px;">{{getMinutesDiff(orderData.deliveryInfo.mustFinishTime,orderData.deliveryInfo.finishTime != null?orderData.deliveryInfo.finishTime:1)}}分钟</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getOrderDetail,
	} from "@/api/index";
	export default {
		name: "logisticsAddress",
		data() {
			return {
				orderData: {},

			};
		},
		computed: {
			isTransferOrder() {
				const deliveryInfo = this.orderData.deliveryInfo || {};
				return this.orderData.transferDelivery == 1 || deliveryInfo.transferDelivery == 1;
			}
		},
		filters: {
			formatDateTime(isoString) {
				if (!isoString) return ''
				const date = new Date(isoString)
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				const hours = String(date.getHours()).padStart(2, '0')
				const minutes = String(date.getMinutes()).padStart(2, '0')
				const seconds = String(date.getSeconds()).padStart(2, '0')
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
			}
		},
		methods: {
			initRecharge(data) {
				this.orderDetail(data.orderId)
			},
			getMinutesDiff(time1, time2) {
				// 将参数转换为 Date 对象，参数为 1 时取当前时间
				const date1 = time1 === 1 ? new Date() : new Date(time1);
				const date2 = time2 === 1 ? new Date() : new Date(time2);

				// 计算毫秒差，取绝对值，转换为分钟，向上取整
				const diffMs = Math.abs(date2 - date1);
				const diffMinutes = Math.ceil(diffMs / (1000 * 60));

				return diffMinutes;
			},
			orderDetail(id) {
				getOrderDetail(id).then((res) => {
					this.loading = false;
					if (res.success) {
						this.orderData = res.result
					}
				});

			}
		}
	};
</script>
<style lang="less">
	//@import "@/styles/table-common.less";
	.nei1 {
		display: flex;
		padding-top: 10rpx;
		border: 1px solid #eee;
		height: 30px;
		line-height: 30px;
	}

	.goods-table-row {
		display: flex;
		min-height: 30px;
		border: 1px solid #eee;
		line-height: 20px;
	}

	.goods-table-cell {
		flex: 1;
		padding: 5px 10px;
		border-right: 1px solid #eee;
		word-break: break-all;
	}

	.goods-table-cell.last {
		border-right: 0;
	}

	.specs-cell {
		white-space: normal;
	}

	.goods-summary-label {
		flex: 1;
		padding: 5px 10px;
		border-right: 1px solid #eee;
	}

	.goods-summary-price {
		width: 25%;
		padding: 5px 10px;
	}

	.title {
		height: 40px;
		line-height: 40px;
		font-size: 14px;
		font-weight: 700;
	}
</style>