<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{ title }}</text>
		</view> 
		 
		<!-- 扫码按钮 -->
		<button class="scan-btn" @click="startScan">点击扫码</button>
		
		<!-- 扫码结果展示区域 - 优化后 -->
		<view class="result-card" v-if="scanResult">
			<view class="result-header">
				<text class="result-title">扫码信息</text>
				<text class="result-time">{{ currentTime }}</text>
			</view>
			
			<view class="result-body">
				<view class="info-item">
					<text class="info-label">操作类型：</text>
					<text class="info-value">{{ formatIoType(scanResult.ioType) }}</text>
				</view>
				
				<view class="info-item">
					<text class="info-label">物品类型：</text>
					<text class="info-value">{{ formatItemType(scanResult.itemType) }}</text>
				</view>
				
				<view class="info-item">
					<text class="info-label">数量：</text>
					<text class="info-value">{{ scanResult.count || 0 }}</text>
				</view>
				
				<view class="info-item">
					<text class="info-label">仓库ID：</text>
					<text class="info-value">{{ scanResult.warehouseName || '无' }}</text>
				</view>
				
				<view class="info-item" v-if="scanResult.fromWarehouseId">
					<text class="info-label">来源仓库：</text>
					<text class="info-value">{{ scanResult.fromWarehouseName }}</text>
				</view>
				
				<view class="info-item">
					<text class="info-label">物品名称：</text>
					<text class="info-value">{{ scanResult.itemName }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">物品编码：</text>
					<text class="info-value">{{ scanResult.itemCode }}</text>
				</view>
				
				<view class="info-item">
					<text class="info-label">库存单ID：</text>
					<text class="info-value">{{ scanResult.stockIoId }}</text>
				</view>
			</view>
			
			<view class="result-footer">
				<button class="confirm-btn" @click="confirm">确认信息并录入系统</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { addStockIoDetail } from '@/api/wms/stockIoDetail.js';
	import { getGenerateRecord } from '@/api/wms/code.js';
	
	export default {
		data() {
			return {
				title: '科伦普扫码器',
				scanResult: null,
				currentTime: '' // 用于显示扫码时间
			}
		},
		onLoad() {
			// 初始化当前时间格式
			this.updateCurrentTime();
		},
		methods: {
			// 更新当前时间
			updateCurrentTime() {
				const date = new Date();
				this.currentTime = `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
			},
			
			// 格式化操作类型显示
			formatIoType(ioType) {
				const typeMap = {
					'in': '入库',
					'out': '出库',
					'transfer': '移库',
					'withdraw': '退库'
				};
				return typeMap[ioType] || ioType || '未知操作';
			},
			
			formatItemType(itemType) {
				const typeMap = {
					'raw_material': '原材料',
					'semi': "半成品",
					'product': "产品"
				}
				return typeMap[itemType] || itemType || '未知类型'
			},
			
			// 开始扫码
			startScan() {
				uni.scanCode({
					success: async (res) => {
						const codeId = res.result;
						uni.showLoading({ title: '正在获取二维码信息' });
						
						try {
							const { data } = await getGenerateRecord(codeId);
							const content = JSON.parse(data.content);
							this.scanResult = content;
							this.updateCurrentTime(); // 更新扫码时间
							console.log('扫码结果：', content);
						} catch (error) {
							console.error('获取扫码信息失败：', error);
							uni.showToast({
								title: '获取信息失败',
								icon: 'none',
								duration: 2000
							});
						} finally {
							uni.hideLoading();
						}
					},
					fail: (err) => {
						console.error('扫码失败：', err);
						uni.showToast({
							title: '扫码失败，请重试',
							icon: 'none'
						});
					}
				});
			},
			
			async confirm() {
				try {
					await addStockIoDetail({
						quantity: this.scanResult.count,
						ioType: this.scanResult.ioType,
						batchNo: 'auto',
						itemType: this.scanResult.itemType,
						stockIoId: this.scanResult.stockIoId,
						warehouseId: this.scanResult.warehouseId,
						fromWarehouseId: this.scanResult.fromWarehouseId,
						itemId: this.scanResult.itemId,
					});
					
					uni.showToast({
						title: '确认成功，信息已录入系统',
						icon: 'success',
						duration: 2000
					});
					
					// 3秒后清空结果，方便下次扫码
					setTimeout(() => {
						this.scanResult = null;
					}, 3000);
					
				} catch (error) {
					console.error('确认失败：', error);
					uni.showToast({
						title: '确认失败，请重试',
						icon: 'none'
					});
				}
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		padding: 20rpx;
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 100rpx;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
		margin-bottom: 80rpx;
	}

	.title {
		font-size: 36rpx;
		color: #333;
		font-weight: 500;
	}
	
	/* 扫码按钮样式 */
	.scan-btn {
		width: 600rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 36rpx;
		background-color: #007aff;
		color: white;
		border-radius: 50rpx;
		margin-bottom: 60rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 122, 255, 0.3);
	}
	
	/* 结果卡片样式 - 优化后 */
	.result-card {
		width: 680rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.05);
		overflow: hidden;
	}
	
	.result-header {
		padding: 30rpx 30rpx 20rpx;
		border-bottom: 1px solid #f0f0f0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.result-title {
		font-size: 34rpx;
		color: #333;
		font-weight: bold;
	}
	
	.result-time {
		font-size: 24rpx;
		color: #999;
	}
	
	.result-body {
		padding: 30rpx;
	}
	
	.info-item {
		display: flex;
		padding: 15rpx 0;
		border-bottom: 1px dashed #f0f0f0;
	}
	
	.info-item:last-child {
		border-bottom: none;
	}
	
	.info-label {
		font-size: 28rpx;
		color: #666;
		width: 200rpx;
		font-weight: 500;
	}
	
	.info-value {
		font-size: 28rpx;
		color: #333;
		flex: 1;
		word-break: break-all;
	}
	
	.result-footer {
		padding: 25rpx 30rpx;
		background-color: #fafafa;
	}
	
	.confirm-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		background-color: #00b42a;
		color: white;
		border-radius: 10rpx;
	}
</style>
