﻿<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>
				<view class="input-wrap">
					<i class="left-icon icon icon-qr_code_2" style="font-size:36rpx"></i>
					<input class="input" placeholder="请扫描或输入载具号" v-model="vehicleCode" @blur="resolveVehicle" />
				</view>
			</view>

			<!-- 物料条码 -->
			<view class="field">
				<text class="label">物料条码</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="goodsCode" @blur="resolveCode" />
				</view>
			</view>

			<!-- 操作按钮组 -->
			<view class="button-row">
				<button class="btn" @click="addGoods"><i class="icon icon-add"
						style="margin-right:8rpx"></i>添加物料</button>
				<button class="btn" @click="finish"><i class="icon icon-task_alt"
						style="margin-right:8rpx"></i>码盘完成</button>
			</view>

			<!-- 列表统计 -->
			<view class="list-header"><text>已添加物料 ({{ packageData.length }})</text></view>

			<!-- 物料卡片列表：尽量还原 RN 的布局与字段 -->
			<view class="list">
				<view v-for="item in packageData" :key="item.id" class="card">
					<view class="card-header">
						<view class="card-header-left">
							<text class="card-header-text">批次：{{ item.batch }}</text>
							<text class="card-header-text">物料：{{ item.segment1 }}</text>
						</view>
						<view class="card-actions">
							<button class="card-action-button" @click="editItem(item)"><i
									class="icon icon-edit"></i></button>
							<button class="card-action-button" @click="deleteItem(item.id)"><i
									class="icon icon-delete"></i></button>
						</view>
					</view>

					<view class="card-content">
						<view class="card-row">
							<view class="card-field">
								<text class="card-label">物料编码</text>
								<text class="card-value">{{ item.segment1 }}</text>
							</view>
							<view class="card-field">
								<text class="card-label">物料ID</text>
								<text class="card-value">{{ item.itemId }}</text>
							</view>
						</view>

						<view class="card-row">
							<view class="card-field">
								<text class="card-label">数量</text>
								<view class="editable-value">
									<input class="num-input" type="number" v-model="item.quantity" />
								</view>
							</view>
							<view class="card-field">
								<text class="card-label">重量(kg)</text>
								<view class="editable-value">
									<input class="num-input" type="number" v-model="item.weight" />
								</view>
							</view>
						</view>

						<view class="card-row">
							<view class="card-field">
								<text class="card-label">产品数据</text>
								<text class="card-value">{{ item.productData }}</text>
							</view>
							<view class="card-field">
								<text class="card-label">区域/库位</text>
								<text class="card-value">{{ item.area || '-' }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { DialogUtils } from '@/utils/dialog.js';
let nextId = 1
export default {
	data() {
		return {
			vehicleCode: '',
			goodsCode: '',
			packageData: []
		}
	},
	methods: {
		back() {
			uni.navigateBack()
		},
		resolveVehicle() {
			const code = (this.vehicleCode || '').trim()
			if (!code) return
			if (code.length === 15) {
				DialogUtils.showSuccessMessage('扫描成功', `车辆码: ${code}`)
			} else {
				DialogUtils.showErrorMessage('校验失败', '无效的车辆码长度')
			}
		},
		resolveCode() {
			const code = (this.goodsCode || '').trim()
			if (!code) return
			const parts = code.split(',')
			if (![6, 7, 8].includes(parts.length)) {
				DialogUtils.showWarningMessage('提示', '物料条码格式不正确')
				return
			}
			const p = parts.slice(0, 6)
			const item = {
				id: String(nextId++),
				segment1: p[0],
				itemId: p[1],
				batch: p[2],
				quantity: p[3],
				weight: p[4],
				productData: p[5],
				area: ''
			}
			if (this.packageData.some(x => x.batch === item.batch)) {
				DialogUtils.showWarningMessage('重复', '该物料已在列表中')
			} else {
				this.packageData.push(item)
			}
			this.goodsCode = ''
		},
		addGoods() {
			this.resolveCode()
		},
		deleteItem(id) {
			this.packageData = this.packageData.filter(x => x.id !== id)
		},
		editItem(item) {
			DialogUtils.toast('可编辑数量与重量')
		},
		finish() {
			DialogUtils.toast('码盘完成')
		}
	}
}
</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;
}

.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;
}

.button-row {
	display: flex;
	gap: 24rpx;
	margin: 24rpx 0;
}

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

.list-header {
	margin-top: 8rpx;
	color: #333;
	font-size: 28rpx;
}

.card {
	background: #fff;
	border-radius: 12rpx;
	padding: 0;
	margin-top: 16rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, .06)
}

.card-header {
	flex-direction: row;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16rpx;
	border-bottom: 1px solid rgba(0, 0, 0, .08);
	background: linear-gradient(90deg, var(--grad-primary-start), var(--grad-primary-mid));
}

.card-header-left {
	flex: 1
}

.card-header-text {
	color: #fff;
	font-size: 24rpx;
	margin-right: 16rpx
}

.card-actions {
	display: flex;
	gap: 8rpx
}

.card-action-button {
	width: 64rpx;
	height: 64rpx;
	border: none;
	border-radius: 8rpx;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.card-content {
	padding: 16rpx;
	background: #fff
}

.card-row {
	display: flex;
	gap: 16rpx;
	margin-bottom: 12rpx
}

.card-field {
	flex: 1
}

.card-label {
	color: #888;
	font-size: 24rpx;
	margin-bottom: 4rpx;
	display: block
}

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

.editable-value {
	display: flex;
	align-items: center;
	gap: 8rpx
}

.num-input {
	width: 220rpx;
	height: 64rpx;
	border: 1px solid #e6e6e6;
	border-radius: 8rpx;
	padding: 0 12rpx;
	font-size: 28rpx
}

.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>