<template>
	<view class="stock-transfer-select-page">
		<NavBar :title="$t('库存调拨选择')"></NavBar>
		<view class="container">
			<view class="title">
				{{info[0].ml001}}|{{info[0].materialName}}
			</view>
			<view class="detail">
				<!-- 按批次分组显示 -->
				<view class="batch-group" v-for="(batchGroup, batchIndex) in getBatchGroups()" :key="batchIndex">
					<view class="batch-header">
						<view class="batch-title">{{$t('批次号')}}：{{batchGroup.batchNo || $t('无批次号')}}</view>
						<view class="batch-actions">
							<u-icon name="plus" size="36" @click="handleAddToBatch(batchGroup.batchNo)"></u-icon>
						</view>
					</view>
					<view class="batch-content">
						<Card v-for="(item, index) in batchGroup.items" :key="index" :info="item" :i="getItemIndex(item)" :batchIndex="batchIndex" :itemIndex="index" @handleAdd="handleAdd" @handleDel="handleDel" />
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<button class="sumbit-btn" @click="handleSubmit">{{$t('确认')}}</button>
		</view>
	</view>
</template>

<script>
	import i18n from '@/lang/index';
	import Card from "./components/card.vue";
	export default {
		components: {
			Card,
		},
		data() {
			return {
				info: []
			}
		},
		onLoad(option) {
			if (option.info) {
				this.info = JSON.parse(decodeURIComponent(option.info));
			}
		},
		methods: {
			// 按批次分组数据
			getBatchGroups() {
				const batchMap = {};
				this.info.forEach(ele => {
					const batchNo = ele.ml004 || 'no-batch';
					if (!batchMap[batchNo]) {
						batchMap[batchNo] = {
							batchNo: ele.ml004,
							items: []
						};
					}
					batchMap[batchNo].items.push(ele);
				});
				return Object.values(batchMap);
			},
			// 获取项目在原始数组中的索引
			getItemIndex(item) {
				return this.info.findIndex(info => info === item);
			},
			// 向指定批次添加新项目
			handleAddToBatch(batchNo) {
				const baseItem = this.info.find(item => (item.ml004 || 'no-batch') === batchNo);
				if (baseItem) {
					this.info.push({
						...baseItem,
						allocateQuantity: "",
						allocateWarehouse: "",
						allocateLocation: ""
					});
				}
			},
			handleAdd() {
				// 保持原有逻辑，向第一个批次添加
				const firstBatch = this.getBatchGroups()[0];
				if (firstBatch) {
					this.handleAddToBatch(firstBatch.batchNo);
				}
			},
			handleDel(index) {
				this.info.splice(index, 1);
			},
			handleSubmit() {
				// 按批次分组验证调拨总数
				const batchGroups = this.getBatchGroups();
				for (let batchGroup of batchGroups) {
					const batchTotal = batchGroup.items.reduce((total, item) => {
						return total + (Number(item.allocateQuantity) || 0);
					}, 0);
					
					// 计算该批次的库存总数
					const batchStockTotal = batchGroup.items.reduce((total, item) => {
						return total + (Number(item.ml005) || 0);
					}, 0);
					
					if (batchTotal > batchStockTotal) {
						return this.$u.toast(i18n.t('调拨总数不能大于库存数'));
					}
				}
				let pages = getCurrentPages();
				// 2. 上一页面实例
				// 注意是length长度，所以要想得到上一页面的实例需要 -2
				// 若要返回上上页面的实例就 -3，以此类推
				let prevPage = pages[pages.length - 2];
				// 3. 给上一页面实例绑定getValue()方法和参数（注意是$vm）
				prevPage.$vm.getValue(this.info);
				// 4. 返回上一页面
				uni.navigateBack({
					delta: 1 // 返回的页面数
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.stock-transfer-select-page {
		.container {
			.title {
				font-size: 32rpx;
				padding: 32rpx 36rpx 12rpx;
				font-weight: bold;
			}

			.detail {
				width: calc(100% - 40rpx);
				margin: 20rpx;
				padding: 20rpx;
				padding-bottom: 120rpx;
				background-color: #f1f1f3;
				border: 1px solid #d8dadf;
				border-radius: 12rpx;

				.batch-group {
					margin-bottom: 32rpx;
					
					&:last-child {
						margin-bottom: 0;
					}

					.batch-header {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 16rpx 12rpx;
						background-color: #ffffff;
						border-radius: 8rpx;
						margin-bottom: 16rpx;
						border: 1px solid #d8dadf;

						.batch-title {
							font-size: 28rpx;
							font-weight: bold;
							color: #333;
						}

						.batch-actions {
							display: flex;
							align-items: center;
						}
					}

					.batch-content {
						background-color: #ffffff;
						border-radius: 8rpx;
						padding: 12rpx;
						border: 1px solid #d8dadf;
					}
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 150rpx;
			padding: 24rpx;
			background-color: #ffffff;

			.sumbit-btn {
				width: 300rpx;
			}
		}
	}
</style>