<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">
				<Card v-for="(item, index) in info" :key="index" :info="item" :i="index" @handleAdd="handleAdd"
					@handleDel="handleDel" />
			</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: {
			handleAdd() {
				this.info.push({
					...this.info[0],
					allocateQuantity: "",
					allocateWarehouse: "",
					allocateLocation: ""
				});
			},
			handleDel(index) {
				this.info.splice(index, 1);
			},
			handleSubmit() {
				const num = this.info.reduce((pre, cur) => {
					return pre + Number(cur.allocateQuantity);
				}, 0);
				if (num > this.info[0].ml005) {
					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;
			}
		}

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

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