<template>
	<view class="container">
		<view class="header">
			<text class="back-link" @click="goBack">⬅ 返回</text>
			<text class="title">配送模块测试页面索引</text>
		</view>

		<view class="section">
			<text class="section-title">商家后台 (Merchant)</text>
			<view class="nav-card" @click="goto('/pages/mall/delivery/test/merchant-order-list')">
				<text class="nav-name">订单列表与发货</text>
				<text class="nav-desc">查看待发货订单、绑定运单号</text>
			</view>
			<view class="nav-card" @click="goto('/pages/mall/delivery/test/merchant-order-detail?order_no=ORD20260205001')">
				<text class="nav-name">订单详情与物流轨迹</text>
				<text class="nav-desc">物流时间线展示、签收凭证预览</text>
			</view>
		</view>

		<view class="section">
			<text class="section-title">平台后台 (Platform/Ops)</text>
			<view class="nav-card" @click="goto('/pages/mall/delivery/test/platform-tracking-query')">
				<text class="nav-name">运单/轨迹查询 (排障)</text>
				<text class="nav-desc">按运单号查询、查看 Raw Payload、Mock 控制</text>
			</view>
			<view class="nav-card" @click="goto('/pages/mall/delivery/test/platform-webhook-logs')">
				<text class="nav-name">Webhook 接收日志</text>
				<text class="nav-desc">核对回调、验签状态、入库结果</text>
			</view>
			<view class="nav-card" @click="goto('/pages/mall/delivery/test/platform-config-center')">
				<text class="nav-name">对接配置中心</text>
				<text class="nav-desc">承运商管理、Mock 服务开关、密钥配置</text>
			</view>
		</view>

		<view class="section">
			<text class="section-title">消费者端 (Consumer/APP)</text>
			<view class="nav-card" @click="goto('/pages/mall/delivery/test/consumer-order-list')">
				<text class="nav-name">我的快递 (物流列表)</text>
				<text class="nav-desc">查看多个包裹状态、实时动态摘要</text>
			</view>
			<view class="nav-card" @click="goto('/pages/mall/delivery/test/consumer-logistics-detail?order_no=ORD20260205002')">
				<text class="nav-name">用户物流详情页</text>
				<text class="nav-desc">单包裹高保真轨迹、联系派送员</text>
			</view>
		</view>

		<view class="section">
			<text class="section-title">模拟与开发工具 (Tools)</text>
			<view class="nav-card" @click="goto('/pages/mall/delivery/test/api-simulator')">
				<text class="nav-name">第三方 API 推送模拟</text>
				<text class="nav-desc">手动构造 Webhook Payload 发送给系统</text>
			</view>
		</view>

	</view>
</template>

<script uts>
	export default {
		methods: {
			goBack() {
				uni.navigateBack()
			},
			goto(url: string) {
				uni.navigateTo({ url: url })
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 30rpx;
		background-color: #f4f7f9;
		min-height: 100vh;
	}
	.header {
		margin-bottom: 50rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 20rpx;
	}
	.back-link {
		font-size: 26rpx;
		color: #007AFF;
		cursor: pointer;
	}
	.title {
		font-size: 40rpx;
		font-weight: bold;
		color: #2c3e50;
	}
	.desc {
		font-size: 24rpx;
		color: #95a5a6;
		margin-top: 10rpx;
	}
	.section {
		margin-bottom: 40rpx;
	}
	.section-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #7f8c8d;
		margin-bottom: 20rpx;
		padding-left: 10rpx;
	}
	.nav-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
	}
	.nav-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #34495e;
		display: block;
	}
	.nav-desc {
		font-size: 24rpx;
		color: #95a5a6;
		margin-top: 8rpx;
	}
	.footer {
		margin-top: 100rpx;
		text-align: center;
	}

</style>
