<template>
	<view class="container">
		<view class="header">
			<text class="back-link" @click="goBack">⬅ 返回</text>
			<text class="title">商家订单详情</text>
		</view>

		<!-- 状态卡片 -->
		<view class="status-card">
			<text class="status-title">{{ getStatusText(order.status) }}</text>
			<text v-if="order.tracking_no" class="status-desc">{{ order.carrier }}: {{ order.tracking_no }}</text>
			<text v-else class="status-desc">待商家发货</text>
		</view>

		<!-- 收货人信息 -->
		<view class="section-card">
			<view class="section-header">收货信息</view>
			<view class="info-row">
				<text class="label">收货人</text>
				<text class="value">{{ order.receiver_name }}</text>
			</view>
			<view class="info-row">
				<text class="label">手机号</text>
				<text class="value">{{ order.receiver_masked_phone }}</text>
			</view>
			<view class="info-row">
				<text class="label">地址</text>
				<text class="value">{{ order.address }}</text>
			</view>
		</view>

		<!-- 物流追踪 -->
		<view v-if="order.tracking_no" class="section-card">
			<view class="section-header">物流追踪</view>
			<view class="timeline">
				<view v-for="(event, index) in statusHistory" :key="index" class="timeline-item">
					<view class="timeline-line" v-if="index !== statusHistory.length - 1"></view>
					<view class="timeline-dot" :class="{active: index === 0}"></view>
					
					<view class="timeline-content">
						<view class="event-title-row">
							<text v-for="(seg, i) in getProcessedText(event.event_text, event.status_code)" :key="i" class="event-text" :class="{active: index === 0}">{{ seg }}</text>
						</view>
						<text class="event-time">{{ event.event_time }}</text>
						
						<!-- 证据/签收图片 -->
						<view v-if="event.evidence_urls.length > 0" class="evidence-grid">
							<image v-for="(img, idx) in event.evidence_urls" :key="idx" :src="img" class="evidence-img" mode="aspectFill" @click="previewImage(img, event.evidence_urls)" />
						</view>
					</view>
				</view>
				
				<view v-if="statusHistory.length === 0" class="empty-timeline">
					<text>暂无物流动态</text>
				</view>
			</view>
			<view class="timeline-footer">
				<text class="sync-time">最后更新: {{ order.last_synced_at || '尚未同步' }}</text>
				<text class="refresh-link" @click="refreshLogistics">手动刷新</text>
			</view>
		</view>

		<!-- 订单明细 -->
		<view class="section-card">
			<view class="section-header">订单详情</view>
			<view class="info-row">
				<text class="label">订单号</text>
				<text class="value">{{ order.order_no }}</text>
			</view>
			<view class="info-row">
				<text class="label">下单时间</text>
				<text class="value">{{ order.created_at }}</text>
			</view>
			<view class="info-row">
				<text class="label">支付金额</text>
				<text class="value">¥{{ order.amount }}</text>
			</view>
		</view>
	</view>
</template>

<script uts>
	import { mockService, MockOrder, MockTrackingEvent } from './mock-service.uts'

	export default {
		data() {
			return {
				orderNo: '',
				order: {
					order_no: '',
					status: 'SHIPPED',
					carrier: 'YUNDA',
					tracking_no: 'YD987654321',
					receiver_name: '张三',
					receiver_masked_phone: '138****8000',
					address: '北京市朝阳区某某街道100号',
					amount: '299.00',
					created_at: '2026-02-05 10:00',
					last_synced_at: '2026-02-05 14:35'
				} as MockOrder,
				statusHistory: [] as MockTrackingEvent[]
			}
		},
		onLoad(options: any) {
			this.orderNo = (options['order_no'] != null) ? options['order_no'] as string : ''
			this.loadData()
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			async loadData() {
				// 获取匹配的订单基本信息
				const allOrders = await mockService.getMockOrders()
				const found = allOrders.find((o : MockOrder) : boolean => o.order_no === this.orderNo)
				if (found != null) {
					this.order = found
				}
				
				// 获取轨迹
				this.statusHistory = await mockService.getMockTracking(this.orderNo)
			},
			getStatusText(status: string) : string {
				return mockService.getStatusText(status)
			},
			async refreshLogistics() {
				if (this.order.status === 'DELIVERED') {
					uni.showToast({ title: '订单已完成', icon: 'none' })
					return
				}
				uni.showLoading({ title: '查询中...' })
				const success = await mockService.syncFromCloud(this.orderNo)
				uni.hideLoading()
				if (success) {
					this.loadData()
					uni.showToast({ title: '已获取最新轨迹' })
				} else {
					uni.showToast({ title: '数据已是最新', icon: 'none' })
				}
			},
			previewImage(url: string, urls: string[]) {
				uni.previewImage({
					current: url,
					urls: urls
				})
			},
			getProcessedText(text: string, status: string): string[] {
				const displayMsg = mockService.getDisplayMessage(text, status)
				return this.filterPhone(displayMsg)
			},
			filterPhone(text: string): string[] {
				// 依照需求文档 1. 敏感信息展示差异：商家端不展示手机号
				// 直接移除所有手机号
				return [text.replace(/(1[3-9]\d{9})/g, '')]
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 20rpx;
		background-color: #f8f8f8;
		min-height: 100vh;
	}
	.header {
		padding: 20rpx 10rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 20rpx;
	}
	.back-link {
		font-size: 28rpx;
		color: #007AFF;
		cursor: pointer;
	}
	.status-card {
		background: linear-gradient(to right, #007AFF, #00C6FF);
		padding: 40rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		color: #fff;
	}
	.status-title {
		font-size: 40rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 10rpx;
	}
	.status-desc {
		font-size: 26rpx;
		opacity: 0.9;
	}
	.section-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}
	.section-header {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 24rpx;
		border-left: 8rpx solid #007AFF;
		padding-left: 20rpx;
	}
	.info-row {
		display: flex;
		margin-bottom: 16rpx;
	}
	.label {
		width: 160rpx;
		font-size: 26rpx;
		color: #999;
	}
	.value {
		flex: 1;
		font-size: 26rpx;
		color: #333;
	}
	.timeline {
		margin-top: 10rpx;
	}
	.timeline-item {
		position: relative;
		padding-left: 40rpx;
		padding-bottom: 40rpx;
	}
	.timeline-line {
		position: absolute;
		left: 6rpx;
		top: 10rpx;
		bottom: -10rpx;
		width: 2rpx;
		background-color: #eee;
	}
	.timeline-dot {
		position: absolute;
		left: 0;
		top: 10rpx;
		width: 14rpx;
		height: 14rpx;
		border-radius: 50%;
		background-color: #ccc;
		z-index: 1;
	}
	.timeline-dot.active {
		background-color: #007AFF;
		box-shadow: 0 0 10rpx rgba(0,122,255,0.5);
	}
	.event-text {
		font-size: 28rpx;
		color: #666;
		display: block;
		margin-bottom: 8rpx;
	}
	.event-text.active {
		color: #333;
		font-weight: bold;
	}
	.event-time {
		font-size: 24rpx;
		color: #999;
	}
	.evidence-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 10rpx;
		margin-top: 10rpx;
	}
	.evidence-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
	}
	.timeline-footer {
		display: flex;
		justify-content: space-between;
		padding-top: 20rpx;
		border-top: 1rpx solid #eee;
		margin-top: 10rpx;
	}
	.sync-time {
		font-size: 22rpx;
		color: #999;
	}
	.refresh-link {
		font-size: 22rpx;
		color: #007AFF;
	}
</style>
