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

		<!-- 多个包裹切换（如果有多个） -->
		<view class="parcel-tabs" v-if="logisticsList.length > 1">
			<view class="tab-item" 
				v-for="(item, index) in logisticsList" 
				:key="index"
				:class="{ 'active': activeParcelIndex === index }"
				@tap="switchParcel(index)">
				{{ item.logisticsCompanyName }} - {{ item.expressCode }}
			</view>
		</view>

		<!-- 物流时间轴 -->
		<view class="logistics-timeline" v-if="currentLogistics.processDetailList && currentLogistics.processDetailList.length > 0">
			<view class="timeline-item" v-for="(item, index) in currentLogistics.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 < currentLogistics.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 {
				// 物流数据列表（支持多个包裹）
				logisticsList: [],
				// 当前激活的包裹索引
				activeParcelIndex: 0,
				// 加载状态
				loading: true
			}
		},
		computed: {
			// 当前显示的物流信息
			currentLogistics() {
				return this.logisticsList[this.activeParcelIndex] || {
					logisticsCompanyName: '',
					logisticsCompanyCode: '',
					expressCode: '',
					statusDesc: '',
					parcelStatusDesc: '',
					lastUpdateTime: '',
					processDetailList: []
				};
			}
		},
		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.ok && res.data) {
						// 支持多个物流包裹的情况
						if (Array.isArray(res.data)) {
							// 确保每个包裹的数据结构完整
							this.logisticsList = res.data.map(item => ({
								logisticsCompanyName: item.logisticsCompanyName || '',
								logisticsCompanyCode: item.logisticsCompanyCode || '',
								expressCode: item.expressCode || '',
								statusDesc: item.statusDesc || '',
								parcelStatusDesc: item.parcelStatusDesc || '',
								lastUpdateTime: item.lastUpdateTime || '',
								processDetailList: item.processDetailList || []
							}));
						} else {
							// 单个包裹的情况，转为数组格式
							this.logisticsList = [{
								logisticsCompanyName: res.data.logisticsCompanyName || '',
								logisticsCompanyCode: res.data.logisticsCompanyCode || '',
								expressCode: res.data.expressCode || '',
								statusDesc: res.data.statusDesc || '',
								parcelStatusDesc: res.data.parcelStatusDesc || '',
								lastUpdateTime: res.data.lastUpdateTime || '',
								processDetailList: res.data.processDetailList || []
							}];
						}
					} else {
						console.error('物流数据获取失败');
						this.logisticsList = [];
					}
				} catch (error) {
					console.error('获取物流信息异常:', error);
					this.logisticsList = [];
				} finally {
					this.loading = false;
				}
			},
			// 格式化时间
			formatTime(timeStr) {
				if (!timeStr) return '';
				
				// 支持时间戳格式
				const date = typeof timeStr === 'number' ? new Date(timeStr) : 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}`;
			},
			// 切换包裹
			switchParcel(index) {
				if (index >= 0 && index < this.logisticsList.length) {
					this.activeParcelIndex = index;
				}
			}
		}
	}
</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;
		}

		/* 包裹切换标签样式 */
		.parcel-tabs {
			background-color: #ffffff;
			margin-top: 20rpx;
			padding: 20rpx 30rpx;
			display: flex;
			overflow-x: auto;
			white-space: nowrap;
			border-bottom: 1rpx solid #e5e5e5;
		}

		.parcel-tabs::-webkit-scrollbar {
			display: none;
		}

		.tab-item {
			padding: 10rpx 20rpx;
			margin-right: 20rpx;
			border-radius: 16rpx;
			background-color: #f5f5f5;
			font-size: 26rpx;
			color: #666666;
			flex-shrink: 0;
		}

		.tab-item.active {
			background-color: #fff0e6;
			color: #ff6600;
			font-weight: 500;
		}

		/* 物流时间轴样式 */
		.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>
