<template>
	<view class="container">
		<view class="header">
			<button class="back" @click="back"><i class="icon icon-arrow_back"
					style="color:#05DCEF;font-size:36rpx"></i></button>
			<text class="title">空载具入库</text>
		</view>

		<view class="content">
			<view class="tip">
				<view class="tip-icon"><i class="icon icon-info" style="color:#05DCEF"></i></view>
				<text class="tip-text">请扫描或输入载具号进行空载具入库操作</text>
			</view>

			<view class="field">
				<text class="label">载具号 <text class="required">*</text></text>
				<view class="input-wrap">
					<i class="left-icon icon icon-qr_code_2" style="font-size:36rpx"></i>
					<input class="input" placeholder="请扫描或输入载具号" v-model="vehicleNo" />
				</view>
			</view>

			<button class="submit" :disabled="loading || !vehicleNo.trim()" @click="submit">
				<i class="icon icon-save" style="margin-right:12rpx"></i> 确认入库
			</button>
		</view>
	</view>
</template>

<script>
	import {
		WmsApiClient
	} from '@/common/wmsApi.js';
	import {
		DialogUtils
	} from '@/utils/dialog.js';
	export default {
		data() {
			return {
				vehicleNo: '',
				loading: false
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			async submit() {
				const plate = (this.vehicleNo || '').trim();
				if (!plate) {
					return
				}
				this.loading = true
				try {
					const res = await WmsApiClient.emptyVehicleIn(plate)
					if (res.code === 200) {
						DialogUtils.showSuccessMessage('成功', '空载具入库成功')
						this.vehicleNo = ''
					} else {
						DialogUtils.showWarningMessage('提示', res.message || '提交失败')
					}
				} catch (e) {
					DialogUtils.showErrorMessage('错误', typeof e === 'string' ? e : (e.message || '网络错误'))
				} finally {
					this.loading = false
				}
			}
		}
	}
</script>
<style scoped>
	.header {
		position: relative;
		height: 120rpx;
		padding: 0;
		background: linear-gradient(90deg, var(--grad-primary-start), var(--grad-primary-mid));
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.container {
		min-height: 100vh;
		background: #F5F5F5;
	}


	.title {
		color: #fff;
		font-size: 32rpx;
		font-weight: 600;
	}

	.content {
		padding: 24rpx;
	}

	.tip {
		flex-direction: row;
		display: flex;
		align-items: center;
		background: #f2fdff;
		border-radius: 12rpx;
		padding: 24rpx;
		color: #333;
		margin-bottom: 28rpx;
	}

	.tip-icon {
		width: 40rpx;
		height: 40rpx;
		border-radius: 20rpx;
		background: #e6f7ff;
		text-align: center;
		line-height: 40rpx;
		margin-right: 12rpx;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tip-text {
		color: #333;
		font-size: 26rpx;
	}

	.field {
		margin-bottom: 20rpx;
	}

	.label {
		color: #333;
		font-size: 30rpx;
		margin-bottom: 12rpx;
		display: block;
	}

	.required {
		color: #ff4d4f
	}

	.input-wrap {
		height: 96rpx;
		border-radius: 12rpx;
		border: 1px solid #e6e6e6;
		background: #fff;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
	}

	.left-icon {
		color: #05DCEF;
		font-size: 36rpx;
		margin-right: 12rpx;
	}

	.input {
		flex: 1;
		height: 100%;
		font-size: 30rpx;
	}

	.submit {
		width: 100%;
		height: 92rpx;
		border: none;
		color: #fff;
		border-radius: 46rpx;
		background: linear-gradient(90deg, var(--grad-primary-start), var(--grad-primary-mid));
		font-size: 32rpx;
		box-shadow: 0 8rpx 22rpx rgba(5, 220, 239, .25);
		text-align: center;
		margin-top: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.submit[disabled] {
		opacity: .6
	}

	.back {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 80rpx;
		height: 64rpx;
		line-height: 64rpx;
		border: none;
		color: #05DCEF;
		background: #fff;
		border-radius: 12rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>