<!-- 物流追踪页 -->
<template>
	<view class="logistics-page">
		<view class="edgeInsetTop"></view>

		<!-- 快递公司信息 -->
		<view class="margin-bj bg-white radius-bock logistics-card" v-if="isLoad">
			<view class="flex align-center margin-bj" @tap="phoneCall(data.kuaidi.tel)">
				<view class="cu-avatar lg radius-bock bg-white" :style="{ backgroundImage: 'url(' + data.kuaidi.logo + ')' }"></view>
				<view class="margin-left-bj">
					<view>{{ data.kuaidi.name }}</view>
					<view class="text-min">{{ $t('orderLogistics.officialTel') }} <text class="margin-lr-xs">{{ data.kuaidi.tel }}</text></view>
				</view>
			</view>
			<!-- 快递单号（点击复制） -->
			<view class="courier-number" @tap="onCopy(data.express_no)">
				{{ data.kuaidi.name }} <text class="margin-lr-xs">{{ data.express_no }}</text> <text class="wlIcon-lianjie"></text>
			</view>
		</view>

		<!-- 物流轨迹时间轴 -->
		<view class="margin-bj bg-white radius-bock logistics-card" v-if="isLoad">
			<view class="padding-left-bj padding-top-bj text-sm">{{ $t('orderLogistics.waybillDetail') }}</view>
			<view class="order-tracking">
				<view class="time-axis wanl-gray">
					<view class="timeaxis-item" v-for="(item, index) in data.express" :key="item.id">
						<!-- 最新一条高亮显示 -->
						<block v-if="index == 0">
							<view class="wanl-black">
								<view>{{ item.status }}</view>
								<view class="text-min">{{ item.context }}</view>
								<view class="text-min margin-top-xs">{{ item.time }}</view>
							</view>
							<view class="timeaxis-node">
								<view class="cu-tag round wanl-bg-orange"><text class="wlIcon-dot"></text></view>
							</view>
						</block>
						<!-- 历史轨迹 -->
						<block v-else>
							<view>
								<view v-if="item.status != '在途'">{{ item.status }}</view>
								<view class="text-min">{{ item.context }}</view>
								<view class="text-min margin-top-xs">{{ item.time }}</view>
							</view>
							<view class="timeaxis-node"><text class="wlIcon-dot"></text></view>
						</block>
					</view>
					<!-- 底部：包裹等待揽收 -->
					<view class="timeaxis-item">
						<view class="text-min">{{ $t('orderLogistics.waitPickup') }}</view>
						<view class="timeaxis-node"><text class="wlIcon-dot"></text></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { pullOrderLogistics } from '@/features/mall/mall-gateway'

export default {
	data() {
		return {
			data: { order_no: '', goods: [] },
			isLoad: false
		}
	},
	created() {
		this.data.order_no = this.$t('order.loading')
	},
	onLoad(option) {
		this.loadData({ id: option.id })
	},
	methods: {
		/** 加载物流信息 */
		async loadData(data) {
			try {
				const res = await pullOrderLogistics(data)
				this.data = res
				this.isLoad = true
			} catch (e) {
				console.error('[logistics] loadData', e)
			}
		},

		/** 拨打快递公司电话 */
		phoneCall(number) {
			uni.makePhoneCall({ phoneNumber: number })
		},

		/** 复制快递单号 */
		onCopy(text) {
			uni.setClipboardData({ data: text })
		}
	}
}
</script>

<style scoped>
.logistics-page { min-height: 100vh; background: #f3f5f7; }
.edgeInsetTop { height: var(--status-bar-height); }

/* 卡片 */
.logistics-card { border-radius: 18rpx !important; box-shadow: 0 8rpx 28rpx rgba(17, 24, 39, 0.06); overflow: hidden; }

/* 快递单号 */
.courier-number { font-size: 22rpx; padding: 20rpx 25rpx; background-color: #fbfbfb; }

/* 物流时间轴 */
.order-tracking { box-sizing: border-box; padding: 25rpx 25rpx 25rpx 50rpx; }
.order-tracking .cu-tag { font-size: 22rpx; padding: 0 10rpx; height: 40rpx; display: flex; align-items: center; justify-content: center; }
.order-tracking .time-axis { padding-left: 20px; box-sizing: border-box; position: relative; }
.order-tracking .time-axis::before { content: ' '; position: absolute; left: 0; top: 0; width: 1px; bottom: 0; border-left: 1px solid #ddd; transform: scaleX(0.5); }
.order-tracking .time-axis .timeaxis-item { position: relative; width: 100%; display: flex; flex-direction: column; margin-bottom: 25px; }
.order-tracking .time-axis .timeaxis-item .timeaxis-node { position: absolute; top: 0; left: -20px; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; z-index: 99; }

/* 颜色 */
.wanl-bg-orange { background: linear-gradient(135deg, #ff6b35, #ff3d2e) !important; color: #fff !important; }
</style>
