<template>
	<div class="package-station-container">
		<!-- 顶部控制面板 -->
		<a-form class="control-panel">
			<!-- 左侧：箱号 -->
			<div class="control-left">
				<label class="control-label">箱号</label>
				<div class="control-input-group">
					<a-input 
						v-model:value="boxNumber" 
						placeholder="请输入箱号"
						class="control-input"
					/>
					<a-button 
						type="primary" 
						@click="applyBoxNumber"
						class="apply-btn"
					>
						申请箱号
					</a-button>
				</div>
			</div>
			
			<!-- 中间：包装规格、本箱累计 -->
			<div class="control-center">
				<div class="control-row">
					<div class="control-item">
						<label class="control-label">包装规格</label>
						<div class="control-input-group">
							<a-input 
								v-model:value="packageSpec" 
								placeholder="请输入包装规格"
								class="control-input"
								suffix="个"
							/>
							<a-button 
								type="primary" 
								@click="updateSpec"
								class="update-btn"
							>
								更新
							</a-button>
						</div>
					</div>
					<div class="control-item">
						<label class="control-label">本箱累计</label>
						<div class="total-display">{{ totalCount }}</div>
					</div>
				</div>
			</div>
			
			<!-- 右侧：打印箱签、提交装箱 -->
			<div class="control-right">
				<a-button 
					type="primary" 
					@click="printBoxLabel"
					:disabled="!boxNumber"
					class="action-btn print-btn"
				>
					<template #icon>
						<PrinterOutlined />
					</template>
					打印箱签
				</a-button>
				<a-button 
					type="primary" 
					@click="submitPackage"
					:disabled="!boxNumber || scannedItems.length === 0"
					class="action-btn submit-btn"
				>
					<template #icon>
						<BoxPlotOutlined />
					</template>
					提交装箱
				</a-button>
			</div>
		</a-form>

		<!-- 已扫描件号表格 -->
		<div class="table-section">
			<a-table 
				:columns="columns" 
				:data-source="scannedItems" 
				:pagination="pagination"
				:scroll="{ y: 500 }"
				bordered
				class="scanned-table"
			>
				<template #bodyCell="{ column, record }">
					<template v-if="column.key === 'action'">
						<a-button 
							type="link" 
							danger 
							@click="deleteItem(record.key)"
							class="delete-btn"
						>
							<DeleteOutlined />
						</a-button>
					</template>
				</template>
			</a-table>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { PrinterOutlined, BoxPlotOutlined, DeleteOutlined } from '@ant-design/icons-vue';

const router = useRouter();

// 响应式数据
const boxNumber = ref<string>('');
const packageSpec = ref<string>('175');
const scannedItems = ref<any[]>([
	{ key: '1', itemCode: 'GK-2022-0001', specification: '175', quantity: 2, operationTime: '2023-07-15 14:32:45', operator: '张工' },
	{ key: '2', itemCode: 'GK-2022-0002', specification: '175', quantity: 1, operationTime: '2023-07-15 14:35:12', operator: '张工' },
	{ key: '3', itemCode: 'GK-2022-0015', specification: '175', quantity: 3, operationTime: '2023-07-15 14:38:27', operator: '张工' },
	{ key: '4', itemCode: 'GK-2022-0023', specification: '175', quantity: 1, operationTime: '2023-07-15 14:41:53', operator: '李工' },
	{ key: '5', itemCode: 'GK-2022-0037', specification: '175', quantity: 2, operationTime: '2023-07-15 14:45:18', operator: '李工' },
	{ key: '6', itemCode: 'GK-2022-0042', specification: '175', quantity: 1, operationTime: '2023-07-15 14:48:36', operator: '王工' },
	{ key: '7', itemCode: 'GK-2022-0055', specification: '175', quantity: 2, operationTime: '2023-07-15 14:52:09', operator: '王工' },
	{ key: '8', itemCode: 'GK-2022-0078', specification: '175', quantity: 3, operationTime: '2023-07-15 14:56:24', operator: '赵工' },
]);

// 计算属性
const totalCount = computed(() => scannedItems.value.length);

// 分页配置
const pagination = {
	current: 1,
	pageSize: 10,
	total: scannedItems.value.length,
	showSizeChanger: false,
	showQuickJumper: false,
	showTotal: () => null,
};

// 表格列定义
const columns = [
	{
		title: '序号',
		dataIndex: 'key',
		key: 'key',
		width: 80,
		align: 'center' as const,
	},
	{
		title: '件号',
		dataIndex: 'itemCode',
		key: 'itemCode',
		width: 200,
		align: 'center' as const,
	},
	{
		title: '规格',
		dataIndex: 'specification',
		key: 'specification',
		width: 180,
		align: 'center' as const,
	},
	{
		title: '数量',
		dataIndex: 'quantity',
		key: 'quantity',
		width: 100,
		align: 'center' as const,
	},
	{
		title: '操作时间',
		dataIndex: 'operationTime',
		key: 'operationTime',
		width: 180,
		align: 'center' as const,
	},
	{
		title: '操作人',
		dataIndex: 'operator',
		key: 'operator',
		width: 100,
		align: 'center' as const,
	},
	{
		title: '操作',
		key: 'action',
		width: 80,
		fixed: 'right' as const,
		align: 'center' as const,
	},
];

// 方法
const applyBoxNumber = () => {
	// 生成箱号逻辑
	const timestamp = new Date().getTime();
	boxNumber.value = `BOX${timestamp}`;
};

const printBoxLabel = () => {
	console.log('打印箱签:', boxNumber.value);
	// 这里可以添加打印逻辑
};

const updateSpec = () => {
	console.log('更新包装规格:', packageSpec.value);
	// 这里可以添加更新规格的逻辑
};

const submitPackage = () => {
	console.log('提交装箱:', {
		boxNumber: boxNumber.value,
		packageSpec: packageSpec.value,
		totalCount: totalCount.value,
		items: scannedItems.value
	});
	// 这里可以添加提交逻辑
};

const deleteItem = (key: string) => {
	scannedItems.value = scannedItems.value.filter(item => item.key !== key);
};

const goBack = () => {
	router.go(-1);
};
</script>

<style scoped lang="scss">
.package-station-container {
	height: 100vh;
	background-color: #1E293B;
	color: #fff;
	padding: 20px;
	font-family: 'Microsoft YaHei', sans-serif;
	display: flex;
	flex-direction: column;
	overflow: hidden;

	.control-panel {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 40px;
		margin-bottom: 20px;
		padding: 20px 0;
		border-bottom: 2px solid #475569;

		// 左侧：箱号
		.control-left {
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 12px;

			.control-label {
				font-size: 18px;
				font-weight: bold;
				color: #fff;
				margin: 0;
			}

			.control-input-group {
				display: flex;
				align-items: center;
				gap: 12px;

				.control-input {
					flex: 1;
					max-width: 200px;

					:deep(.ant-input) {
						background-color: #fff;
						border-color: #d1d5db;
						color: #1f2937;
						font-size: 16px;
						height: 40px;
						border-radius: 6px;

						&::placeholder {
							color: #9ca3af;
						}

						&:focus {
							border-color: #3b82f6;
							box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
						}
					}
				}

				.apply-btn {
					background-color: #3b82f6;
					border-color: #3b82f6;
					font-size: 16px;
					height: 40px;
					padding: 0 20px;
					border-radius: 6px;

					&:hover {
						background-color: #2563eb;
						border-color: #2563eb;
					}

					&:disabled {
						background-color: #64748b;
						border-color: #64748b;
					}
				}
			}
		}

		// 中间：包装规格、本箱累计
		.control-center {
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 20px;

			.control-row {
				display: flex;
				gap: 30px;

				.control-item {
					flex: 1;
					display: flex;
					flex-direction: column;
					gap: 12px;

					.control-label {
						font-size: 18px;
						font-weight: bold;
						color: #fff;
						margin: 0;
					}

					.control-input-group {
						display: flex;
						align-items: center;
						gap: 12px;

						.control-input {
							flex: 1;
							max-width: 150px;

							:deep(.ant-input) {
								background-color: #fff;
								border-color: #d1d5db;
								color: #1f2937;
								font-size: 16px;
								height: 40px;
								border-radius: 6px;

								&::placeholder {
									color: #9ca3af;
								}

								&:focus {
									border-color: #3b82f6;
									box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
								}
							}
						}

						.update-btn {
							background-color: #8b5cf6;
							border-color: #8b5cf6;
							font-size: 16px;
							height: 40px;
							padding: 0 20px;
							border-radius: 6px;

							&:hover {
								background-color: #7c3aed;
								border-color: #7c3aed;
							}

							&:disabled {
								background-color: #64748b;
								border-color: #64748b;
							}
						}
					}

					.total-display {
						width: 150px;
						height: 40px;
						background-color: #475569;
						border: 2px solid #64748b;
						border-radius: 6px;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;
						font-size: 18px;
						font-weight: bold;
					}
				}
			}
		}

		// 右侧：打印箱签、提交装箱
		.control-right {
			flex: 1;
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 12px;

			.action-btn {
				flex: 1;
				height: 40px;
				padding: 0 20px;
				font-size: 16px;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 6px;
				border-radius: 6px;

				&.print-btn {
					background-color: #10b981;
					border-color: #10b981;

					&:hover {
						background-color: #059669;
						border-color: #059669;
					}

					&:disabled {
						background-color: #64748b;
						border-color: #64748b;
					}
				}

				&.submit-btn {
					background-color: #f59e0b;
					border-color: #f59e0b;

					&:hover {
						background-color: #d97706;
						border-color: #d97706;
					}

					&:disabled {
						background-color: #64748b;
						border-color: #64748b;
					}
				}
			}
		}
	}

	.table-section {
		flex: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;

		.scanned-table {
			flex: 1;
			display: flex;
			flex-direction: column;

			:deep(.ant-table) {
				background-color: transparent;
				color: #fff;
				flex: 1;
				display: flex;
				flex-direction: column;

				.ant-table-container {
					flex: 1;
					display: flex;
					flex-direction: column;
				}

				.ant-table-content {
					flex: 1;
					overflow: auto;
				}

				.ant-table-thead > tr > th {
					background-color: #475569;
					border-color: #64748b;
					color: #fff;
					font-size: 16px;
					font-weight: bold;
					padding: 16px 12px;
					position: sticky;
					top: 0;
					z-index: 1;
				}

				.ant-table-tbody > tr > td {
					background-color: #475569;
					border-color: #64748b;
					color: #e2e8f0;
					font-size: 15px;
					padding: 12px;
				}

				.ant-table-tbody > tr:nth-child(even) > td {
					background-color: #4a5568;
				}

				.ant-table-tbody > tr:hover > td {
					background-color: #64748b !important;
				}

				.ant-table-pagination {
					background-color: #475569;
					padding: 16px;
					margin: 0;
					border-top: 1px solid #64748b;
					flex-shrink: 0;

					.ant-pagination-item {
						background-color: #475569;
						border-color: #64748b;
						color: #fff;
						font-size: 14px;

						&:hover {
							background-color: #64748b;
						}

						&.ant-pagination-item-active {
							background-color: #3b82f6;
							border-color: #3b82f6;
						}
					}

					.ant-pagination-prev,
					.ant-pagination-next {
						background-color: #475569;
						border-color: #64748b;
						color: #fff;

						&:hover {
							background-color: #64748b;
						}
					}
				}
			}

			.delete-btn {
				color: #ef4444;
				font-size: 16px;
				padding: 0;
				height: auto;

				&:hover {
					color: #dc2626;
				}
			}
		}
	}
}

// 响应式设计
@media (max-width: 1200px) {
	.package-station-container {
		.control-panel {
			gap: 20px;

			.control-left,
			.control-center,
			.control-right {
				.control-label {
					font-size: 16px;
				}

				.control-input-group {
					.control-input {
						:deep(.ant-input) {
							font-size: 14px;
							height: 36px;
						}
					}

					.apply-btn,
					.update-btn {
						font-size: 14px;
						height: 36px;
						padding: 0 16px;
					}
				}

				.total-display {
					width: 130px;
					height: 36px;
					font-size: 16px;
				}
			}

			.control-center {
				.control-row {
					gap: 20px;

					.control-item {
						.control-input-group {
							.control-input {
								max-width: 120px;
							}
						}

						.total-display {
							width: 120px;
						}
					}
				}
			}

			.control-right {
				gap: 10px;

				.action-btn {
					font-size: 14px;
					height: 36px;
					padding: 0 16px;
				}
			}
		}

		.table-section {
			.scanned-table {
				:deep(.ant-table) {
					.ant-table-thead > tr > th {
						font-size: 14px;
						padding: 12px 8px;
					}

					.ant-table-tbody > tr > td {
						font-size: 13px;
						padding: 8px;
					}
				}
			}
		}
	}
}

@media (max-width: 768px) {
	.package-station-container {
		padding: 10px;

		.control-panel {
			flex-direction: column;
			gap: 15px;

			.control-left,
			.control-center,
			.control-right {
				width: 100%;
				flex-direction: column;
				gap: 10px;

				.action-btn {
					width: 100%;
				}
			}

			.control-center {
				.control-row {
					flex-direction: column;
					gap: 15px;

					.control-item {
						.control-input-group {
							.control-input {
								max-width: none;
							}
						}

						.total-display {
							width: 100%;
						}
					}
				}
			}
		}
	}
}
</style> 