<template>
	<view class="stock-transfer-page">
		<NavBar :title="$t('库存调拨')"></NavBar>
		<view class="container">
			<view class="search-area">
				<uni-easyinput v-model="value" prefixIcon="search" :placeholder="$t('请输入调拨产品号')" trim="all" focus />
				<button class="search-btn" :loading="loadings" @click="handleSearch">{{$t('确认')}}</button>
			</view>
			<view class="sub-title">
				{{$t('调拨明细')}}
			</view>
			<view class="detail">
				<view class="card" v-for="(item, index) in list" :key="index" @click="handleDetail(item, index)">
					<view class="top">
						<view class="product-number">
							{{`${item[0].ml001}${item[0].materialName}`|}}
						</view>
						<view class="top-r">
							<view class="total-quantity">
								{{item[0].ml005}}ps
							</view>
							<u-icon name="minus" size="32" @click.native.stop="handleDelete(item, index)"></u-icon>
						</view>
					</view>
					<view class="bottom">
						<view class="content" v-for="(ele, idx) in item" :key="idx">
							<view class="left">
								<view class="text current-storage">
									{{$t('当前储位')}}：{{`${ele.ml002}|${ele.ml003}`}}
								</view>
								<view class="text transfer-storage">
									{{$t('调入储位')}}：
									{{ele.allocateLocation ?  `${ele.allocateWarehouse}|${ele.allocateLocation}`: ''}}
								</view>
							</view>
							<view class="right">
								{{ele.allocateQuantity ? ele.allocateQuantity : 0}}ps
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<button class="sumbit-btn" :loading="loading" @click="handleSumbit">{{$t('调拨确认')}}</button>
		</view>
	</view>
</template>

<script>
	import i18n from '@/lang/index';
	export default {
		data() {
			return {
				loading: false,
				loadings: false,
				value: "",
				list: [],
				numList: [],
			}
		},
		methods: {
			getValue(data) {
				const index = this.numList.findIndex((item) => {
					return item == data[0]['ml001'].trim();
				})
				this.list.splice(index, 1, data);
			},
			handleReset() {
				this.value = "";
				this.list = [];
				this.numList = [];
			},
			handleSearch() {
				if (this.loadings) {
					return this.$u.toast(i18n.t('请勿重复提交'))
				}
				this.loadings = true;
				if (this.numList.includes(this.value)) {
					this.$u.toast(i18n.t('该调拨产品号数据已存在'));
					setTimeout(() => {
						this.value = "";
					}, 1000);
					return;
				}
				const params = {
					ml001: this.value,
					gtStock: 0
				}
				this.$u.api.getforinvmlinfoApi(params)
					.then(res => {
						this.loadings = false;
						if (res.success) {
							if (res.data.length > 0) {
								this.list.push(res.data);
								this.numList.push(this.value);
								setTimeout(() => {
									this.value = "";
								}, 1000);
							}
						} else {
							this.$u.toast(res.errorMessage);
						}
					})
			},
			handleDetail(row, index) {
				uni.navigateTo({
					url: '/pages/stockTransfer/select?info=' + encodeURIComponent(JSON.stringify(row))
				});
			},
			handleDelete(row, index) {
				this.list.splice(index, 1);
				this.numList.splice(index, 1);
			},
			handleSumbit() {
				if (this.loading) {
					return this.$u.toast(i18n.t('请勿重复提交'));
				}
				if (this.list.length == 0) {
					return this.$u.toast(i18n.t('提交数据不能为空'));
				}
				let flag = false;
				for (let i = 0; i < this.list.length; i++) {
					for (let v = 0; v < this.list[i].length; v++) {
						if (!this.list[i][v]['allocateQuantity']) {
							this.$u.toast(i18n.t('调拨数不能为空'));
							flag = true;
							break;
						}
						if (!this.list[i][v]['allocateWarehouse']) {
							this.$u.toast(i18n.t('调入库存不能为空'));
							flag = true;
							break;
						}
						if (!this.list[i][v]['allocateLocation']) {
							this.$u.toast(i18n.t('调入储位不能为空'));
							flag = true;
							break;
						}
					}
				}
				if (flag) {
					return;
				}
				const params = this.list.map((item) => {
					return item.map((ele) => {
						return {
							allocateLocation: ele.allocateLocation,
							allocateQuantity: ele.allocateQuantity,
							allocateWarehouse: ele.allocateWarehouse,
							location: ele.ml003,
							materialNo: ele.ml001,
							warehouse: ele.ml002,
							materialName: ele.materialName
						}
					})
				}).flat(Infinity);
				this.loading = true;
				this.$u.api.transferConfirmApi({
						data: params
					})
					.then(res => {
						this.loading = false;
						if (res.success) {
							this.$u.toast(i18n.t('提交成功'));
							setTimeout(() => {
								this.handleReset();
							}, 1000);
						} else {
							this.$u.toast(res.errorMessage);
						}
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.stock-transfer-page {
		width: 100%;
		height: 100%;
		background-color: #ffffff;

		.container {
			.search-area {
				display: flex;
				justify-content: space-between;
				align-content: center;
				padding: 24rpx;

				::v-deep.uni-easyinput {
					height: 60rpx;

					.uni-easyinput__content {
						height: 100%;
						border-radius: 36rpx;
					}
				}

				.search-btn {
					height: 60rpx;
					line-height: 60rpx;
					margin-left: 12rpx;
					font-size: 26rpx;
				}
			}

			.sub-title {
				font-size: 32rpx;
				font-weight: bolder;
				padding-left: 24rpx;
			}

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

				.card {
					padding: 12rpx;
					margin-bottom: 24rpx;
					box-sizing: border-box;
					background-color: #ffffff;
					border-radius: 12rpx;

					.top {
						height: 60rpx;
						padding: 0 12rpx;
						padding-bottom: 8rpx;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;
						align-items: center;
						border-bottom: 1px solid #d8dadf;

						.top-r {
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding-right: 12rpx;

							.total-quantity {
								margin-right: 12rpx;
							}
						}
					}

					.bottom {
						padding: 12rpx;
						box-sizing: border-box;

						.content {
							padding: 24rpx 12rpx;
							margin-bottom: 16rpx;
							display: flex;
							justify-content: space-between;
							font-size: 28rpx;
							background-color: #f1f1f3;
							border: 1px solid #d8dadf;
							border-radius: 12rpx;
							box-sizing: border-box;

							.left {
								.text {
									font-size: 28rpx;
								}
							}

							.right {
								padding-right: 28rpx;
							}
						}
					}
				}
			}
		}

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

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