<template>
	<view class="express-form-container">
		<!-- 页头：订单摘要（商务风卡片） -->
		<view class="card order-summary" v-if="orderInfo.orderNo">
			<view class="summary-row">
				<view class="label">订单号</view>
				<view class="value">{{ orderInfo.orderNo }}</view>
			</view>
			<view class="summary-row" v-if="orderInfo.deviceNo">
				<view class="label">设备号</view>
				<view class="value">{{ orderInfo.deviceNo }}</view>
			</view>
			<view class="summary-row" v-if="orderInfo.startTime">
				<view class="label">开始时间</view>
				<view class="value">{{ orderInfo.startTime }}</view>
			</view>
		</view>

		<!-- 表单卡片 -->
		<view class="card form-card">
			<view class="form-title">填写快递归还信息</view>
			<view class="form-item">
				<view class="item-label">联系电话</view>
				<input class="item-input" type="number" v-model="phone" placeholder="请输入联系电话" maxlength="20" />
			</view>
			<view class="form-item">
				<view class="item-label">快递单号</view>
				<input class="item-input" type="text" v-model="trackingNumber" placeholder="请输入快递单号" maxlength="40" />
			</view>
			<view class="tips" v-if="tipsText">{{ tipsText }}</view>
		</view>

		<!-- 提交操作条 -->
		<view class="bottom-bar">
			<view class="action-item primary" @click="handleSubmit">提交信息</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		queryById
	} from '@/config/user.js'

	const orderId = ref('')
	const orderInfo = reactive({
		orderNo: '',
		deviceNo: '',
		startTime: ''
	})

	const phone = ref('')
	const trackingNumber = ref('')
	const tipsText = ref('')

	onLoad(async (options) => {
		orderId.value = options?.orderId || ''
		if (!orderId.value) {
			uni.showToast({
				title: '缺少订单号',
				icon: 'none'
			})
			setTimeout(() => {
				uni.navigateBack()
			}, 1200)
			return
		}
		await loadOrder()
	})

	const loadOrder = async () => {
		try {
			uni.showLoading({
				title: '加载中'
			})
			const res = await queryById(orderId.value)
			if (res?.code === 200 && res.data) {
				orderInfo.orderNo = res.data.orderNo || res.data.orderId || ''
				orderInfo.deviceNo = res.data.deviceNo || ''
				orderInfo.startTime = res.data.startTime || res.data.createTime || ''
				// 默认联系电话可回填订单上的手机号（若有）
				if (res.data.phone && !phone.value) phone.value = res.data.phone
			} else {
				throw new Error(res?.msg || '获取订单失败')
			}
		} catch (e) {
			uni.showToast({
				title: e.message || '加载失败',
				icon: 'none'
			})
		} finally {
			uni.hideLoading()
		}
	}

	const validate = () => {
		// 简单手机检查（兼容座机/国际号，放宽到至少 5 位数字）
		const digits = (phone.value || '').replace(/\D/g, '')
		if (!digits || digits.length < 5) {
			uni.showToast({
				title: '请填写有效联系电话',
				icon: 'none'
			})
			return false
		}
		if (!trackingNumber.value) {
			uni.showToast({
				title: '请填写快递单号',
				icon: 'none'
			})
			return false
		}
		return true
	}

	const handleSubmit = async () => {
		if (!validate()) return
		// 这里保留与后端联调位置（未给出具体提交接口，先本地成功提示）
		try {
			uni.showLoading({
				title: '提交中'
			})

			// 示例：
			// await uni.request({
			//   url: `${URL}/app/express-return/submit`,
			//   method: 'POST',
			//   header: { 'Authorization': `Bearer ${uni.getStorageSync('token')}` },
			//   data: { orderId: orderId.value, phone: phone.value, trackingNumber: trackingNumber.value }
			// })
			await new Promise(r => setTimeout(r, 500))
			uni.showToast({
				title: '提交成功',
				icon: 'success'
			})
			setTimeout(() => {
				uni.navigateBack()
			}, 800)
		} catch (e) {
			uni.showToast({
				title: e.message || '提交失败',
				icon: 'none'
			})
		} finally {
			uni.hideLoading()
		}
	}
</script>

<style lang="scss" scoped>
	.express-form-container {
		min-height: 100vh;
		background: #f7f8fa;
		padding: 30rpx 30rpx 200rpx;
	}

	.card {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
	}

	.order-summary {
		.summary-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 14rpx 0;
			border-bottom: 1rpx solid #f0f2f5;

			&:last-child {
				border-bottom: 0;
			}

			.label {
				font-size: 26rpx;
				color: #6b7280;
			}

			.value {
				font-size: 28rpx;
				color: #111827;
			}
		}
	}

	.form-card {
		.form-title {
			font-size: 30rpx;
			font-weight: 600;
			color: #111827;
			margin-bottom: 16rpx;
		}

		.form-item {
			padding: 22rpx 0;
			border-bottom: 1rpx solid #f0f2f5;

			&:last-child {
				border-bottom: 0;
			}

			.item-label {
				font-size: 28rpx;
				color: #374151;
				margin-bottom: 10rpx;
			}

			.item-input {
				display: block;
				width: 100%;
				height: 50rpx;
				box-sizing: border-box;
				background: #ffffff;
				border: 1rpx solid #e5e7eb;
				border-radius: 12rpx;
				padding: 0rpx 14rpx;
				font-size: 28rpx;
				color: #111827;
				line-height: 1.2;
			}
		}

		.tips {
			margin-top: 12rpx;
			font-size: 24rpx;
			color: #6b7280;
		}
	}

	.bottom-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 24rpx 30rpx;
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
		background: #ffffff;
		box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.06);
		display: block;

		.action-item {
			width: 100%;
			height: 92rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 44rpx;
			font-size: 30rpx;
			font-weight: 600;

			&.primary {
				background: #1f2937;
				color: #fff;
			}
		}
	}
</style>