<template>
	<view class="logistics-container">
		<!-- 顶部信息 -->
		<view class="logistics-header">
			<view class="logistics-info">
				<view class="company-info">
					<text class="company-name">{{ logisticsData.logisticsCompanyName || '快递公司' }}</text>
					<text class="express-code">{{ logisticsData.expressCode || '暂无运单号' }}</text>
				</view>
				<view class="status-info" v-if="logisticsData.statusDesc">
					<text class="status-desc">{{ logisticsData.statusDesc }}</text>
				</view>
			</view>
		</view>

		<!-- 物流时间轴 -->
		<view class="logistics-timeline" v-if="logisticsData.processDetailList && logisticsData.processDetailList.length > 0">
			<view class="timeline-item" v-for="(item, index) in logisticsData.processDetailList" :key="index">
				<!-- 时间轴点和线 -->
				<view class="timeline-line">
					<view class="timeline-dot" :class="{ 'active': index === 0 }">
						<view class="dot-inner" v-if="index === 0"></view>
					</view>
					<view class="timeline-line-vertical" v-if="index < logisticsData.processDetailList.length - 1"></view>
				</view>
				
				<!-- 物流信息内容 -->
				<view class="timeline-content">
					<view class="timeline-text" :class="{ 'active': index === 0 }">
						<!-- 处理时间 -->
						<text class="timeline-time">{{ formatTime(item.processDate) }}</text>
						<!-- 物流信息 -->
						<text class="timeline-info">{{ item.text || '暂无信息' }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 暂无数据提示 -->
		<view class="empty-logistics" v-else>
			<text>暂无物流信息</text>
		</view>

		<!-- 底部间距 -->
		<view class="bottom-space"></view>
	</view>
</template>

<script>
	import { getOrderLogistics } from '@/api/address';
	export default {
		data() {
			return {
				// 物流数据
				logisticsData: {
					logisticsCompanyName: '',
					logisticsCompanyCode: '',
					expressCode: '',
					statusDesc: '',
					parcelStatusDesc: '',
					lastUpdateTime: '',
					processDetailList: []
				},
				// 加载状态
				loading: true
			}
		},
		onLoad(options) {
			// 从页面参数获取订单ID或物流单号
			this.orderId = options.orderId || '';
			this.getLogisticsInfo();
		},
		methods: {
			// 获取物流信息
			async getLogisticsInfo() {
				try {
					this.loading = true;
					// 调用物流查询接口
					const res = await getOrderLogistics({
						order_no: this.orderId
					});
					
					if (res && res.data) {
						// 假设接口返回的数据结构为 { ok, data: { processDetailList, ... } }
						// 调整为页面需要的数据结构
						this.logisticsData = {
							logisticsCompanyName: res.data.logisticsCompanyName || '',
							logisticsCompanyCode: res.data.logisticsCompanyCode || '',
							expressCode: res.data.expressCode || '',
							statusDesc: res.data.statusDesc || res.data.parcelStatusDesc || '',
							parcelStatusDesc: res.data.parcelStatusDesc || '',
							lastUpdateTime: res.data.lastUpdateTime || '',
							processDetailList: res.data.processDetailList || []
						};
					} else {
						console.error('物流数据获取失败');
					}
				} catch (error) {
					console.error('获取物流信息异常:', error);
				} finally {
					this.loading = false;
				}
			},
			// 格式化时间
			formatTime(timeStr) {
				if (!timeStr) return '';
				
				// 假设时间格式为 yyyy-MM-dd HH:mm:ss
				// 需要转换为 MM.dd HH:mm 格式
				const date = new Date(timeStr);
				if (isNaN(date.getTime())) return timeStr;
				
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				const hours = date.getHours().toString().padStart(2, '0');
				const minutes = date.getMinutes().toString().padStart(2, '0');
				
				return `${month}.${day} ${hours}:${minutes}`;
			}
		}
	}
</script>

<style scoped>
	.logistics-container {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 顶部信息样式 */
	.logistics-header {
		background-color: #ffffff;
		padding: 30rpx 30rpx 20rpx;
		border-bottom: 1rpx solid #e5e5e5;
	}

	.logistics-info {
		padding-bottom: 10rpx;
	}

	.company-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.company-name {
		font-size: 28rpx;
		color: #333333;
		font-weight: 500;
	}

	.express-code {
		font-size: 26rpx;
		color: #999999;
	}

	.status-info {
		padding-bottom: 10rpx;
	}

	.status-desc {
		font-size: 28rpx;
		color: #666666;
	}

	/* 物流时间轴样式 */
	.logistics-timeline {
		margin-top: 20rpx;
		background-color: #ffffff;
		padding: 30rpx 0;
	}

	.timeline-item {
		display: flex;
		padding: 0 30rpx;
		position: relative;
		padding-bottom: 40rpx;
	}

	/* 时间轴点和线 */
	.timeline-line {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 30rpx;
		min-width: 20rpx;
	}

	.timeline-dot {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: #e5e5e5;
		position: relative;
		z-index: 2;
	}

	.timeline-dot.active {
		background-color: #ffffff;
		border: 2rpx solid #ff6600;
		width: 18rpx;
		height: 18rpx;
	}

	.dot-inner {
		position: absolute;
		width: 10rpx;
		height: 10rpx;
		background-color: #ff6600;
		border-radius: 50%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.timeline-line-vertical {
		width: 2rpx;
		background-color: #e5e5e5;
		flex: 1;
		margin-top: -1rpx;
		position: relative;
		z-index: 1;
	}

	/* 物流内容样式 */
	.timeline-content {
		flex: 1;
		padding-bottom: 40rpx;
	}

	.timeline-text {
		font-size: 26rpx;
		color: #999999;
		line-height: 40rpx;
		word-break: break-all;
	}

	.timeline-text.active {
		color: #333333;
	}

	.timeline-time {
		display: block;
		margin-bottom: 10rpx;
		font-size: 24rpx;
	}

	.timeline-info {
		font-size: 26rpx;
	}

	/* 暂无数据样式 */
	.empty-logistics {
		padding: 100rpx 0;
		text-align: center;
		color: #999999;
		font-size: 28rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
	}

	/* 底部间距 */
	.bottom-space {
		height: 40rpx;
	}
</style>
