<template>
	<s-layout title="交接记录" class="set-userinfo-wrap">
		<view class="transfer-page">
			<scroll-view class="body" scroll-y>
				<u-steps direction="column" :current="currentIndex" class="steps-wrap">
					<u-steps-item v-for="(item, idx) in records" :key="idx">
						<template #title>
							<text class="step-title">{{ item.title }}</text>
						</template>
						<template #desc>
							<text class="step-desc">{{ item.time }}</text>
						</template>
						<template #content>
							<view class="step-content">
								<text class="op-name">{{ item.operator }}</text>
								<text class="op-note" v-if="item.note"> · {{ item.note }}</text>
							</view>
						</template>
					</u-steps-item>
				</u-steps>
				<view v-if="records.length === 0" class="empty">暂无交接记录</view>
			</scroll-view>
		</view>
	</s-layout>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';

	const records = ref([]);
	const orderId = ref(null);

	onLoad((options = {}) => {
		orderId.value = options.id || options.orderId || null;
		fetchRecords();
	});

	async function fetchRecords() {
		try {
			if (sheep && typeof sheep.request === 'function') {
				const res = await sheep.request({
					url: '/order/transferRecords',
					method: 'GET',
					data: {
						id: orderId.value
					}
				});
				records.value = (res && res.data) ? res.data.records || res.data : res.records || res;
			} else {
				// mock 数据
				records.value = [{
						title: '已接单',
						time: '2026-01-15 10:02',
						operator: '系统',
						note: '订单自动接单'
					},
					{
						title: '到店取货',
						time: '2026-01-15 10:12',
						operator: '骑手 张三',
						note: '已取货'
					},
					{
						title: '转单给同城骑手',
						time: '2026-01-15 10:20',
						operator: '客服 小李',
						note: '因配送区域调整'
					}
				];
			}
		} catch (e) {
			console.error('fetchRecords error', e);
			sheep.$helper && sheep.$helper.toast && sheep.$helper.toast('获取交接记录失败');
			records.value = [];
		}
	}

	const currentIndex = computed(() => Math.max(0, records.value.length - 1));

	function goBack() {
		uni.navigateBack();
	}
</script>

<style scoped>
	.transfer-page {
		background: #fff;
		/* min-height: 100vh; */
	}

	.header {
		height: 88rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		border-bottom: 1rpx solid #eee;
	}

	.body {
		padding: 20rpx;
		/* background: #f7f7f7; */
		/* min-height: calc(100vh - 88rpx); */
		box-sizing: border-box;
	}

	.steps-wrap {
		width: 100%;
	}

	.step-title {
		font-weight: 700;
		font-size: 32rpx;
		color: #333;
		display: block;
	}

	.step-desc {
		font-size: 26rpx;
		color: #999;
		display: block;
		margin-top: 6rpx;
	}

	.step-content {
		margin-top: 10rpx;
		font-size: 26rpx;
		color: #666;
		display: flex;
		gap: 8rpx;
		align-items: center;
		flex-wrap: wrap;
	}

	.op-name {
		font-weight: 600;
		color: #333;
	}

	.op-note {
		color: #666;
	}

	.empty {
		text-align: center;
		color: #999;
		padding: 60rpx 0;
	}
</style>