<template>
	<view class="page">
		<StickyNavBar>
			<NavBar title="工厂间调拨"></NavBar>
			<view class="headerTitle">
				<view class="">
					<view class="items">调拨申请单号: {{ ebeln }}</view>
				</view>
			</view>
			<view class="btn">
				<uni-easyinput prefixIcon="search" :disabled="isDisabled" v-model.trim="wxparams" :focus="isFocus"
					placeholder="请扫描产品包装条码/外箱码" @input="handleInputPlnr"></uni-easyinput>
			</view>
			<view class="total">
				<view class="left">物料明细</view>
				<view class="right">
					物料数量：
					<text class="">{{ goodsList.length }}</text>
				</view>
			</view>
		</StickyNavBar>
		<ContentLoadingMore class="cardbox" :list="goodsList">
			<view class="cardContent" v-for="(item, index) in goodsList" :key="index">
				<scanningList :item="item" :list="item.details" :itemIndex="index" @deleGonds="deleGonds" />
			</view>
		</ContentLoadingMore>
		<BottomBtn :btnArr="btnArr" @getBtnHandle="getBtnHandle"></BottomBtn>
	</view>
</template>

<script>
	import StickyNavBar from "@/components/StickyNavBar/index.vue";
	import ContentLoadingMore from "@/components/ContentLoadingMore/index.vue";
	import BottomBtn from "@/components/BottomBtn/index.vue";
	import scanningList from "./scanningList.vue";
	import {
		parseTime
	} from "@/utils/ruoyi";
	export default {
		components: {
			StickyNavBar,
			ContentLoadingMore,
			BottomBtn,
			scanningList,
		},
		data() {
			return {
				wxparams: "",
				ebeln: '',
				catchPl: [],
				btnArr: [{
						style: "",
						type: "warning",
						text: "返回",
						way: "goBack",
					},
					{
						style: "",
						type: "primary",
						text: "提交",
						way: "goSubmit",
					},
				],
				goodsList: [],
				isFocus: true,
				isDisabled: false,
			};
		},
		onLoad(option) {
			console.log(option, 'option')
			if (option.ebeln) {
				this.getOrder(option.ebeln)
			}
		},
		watch: {},
		created() {},
		methods: {
			reset() {
				setTimeout(() => {
					this.wxparams = "";
					this.isFocus = true;
					this.isDisabled = false;
				}, 1000);
			},
			getOrder(ebeln) {
				this.ebeln = ebeln
				this.$u.api.sapApi
					.sapSearchAllot({
						ebeln
					})
					.then((res) => {
						this.goodsList = res.map(item => {
							item.details = []
							return item
						})
					});
			},
			getBtnHandle(row) {
				this[row.way]();
			},
			goBack() {
				uni.navigateBack({
					delta: 1,
				});
			},
			goSubmit() {
				if (this.goodsList.length == 0) return
				if (this.goodsList.some(item => item.MENGE != item.details.reduce((acc, cur) => acc + cur.PACMG, 0))) {
					return this.$u.toast("请确认物料数量是否正确")
				}
				const params = {
					BLDAT: parseTime(new Date(), "{y}{m}{d}"),
					lfsnr: this.ebeln,
					item: this.goodsList.reduce((acc, cur) => {
						acc.push(...cur.details.map(item => {
							return {
								...cur,
								...item,
								EBELN: this.ebeln,
								EBELP: cur.EBELP
							}
						}))
						return acc
					}, [])
				}
				this.$u.api.sapApi.sapAllot(params).then(res => {
					const errobj = res.find(item => item.TYPE == 'E')
					if (errobj) {
						return this.$u.toast(errobj.MESSAGE)
					}
					this.$u.toast(res[0].MESSAGE)
					setTimeout(() => {
						this.goBack()
					}, 3000);
				})
			},
			/**
			 * 删除PL，因为有拆分的PL情况, 要删除关联的的PL
			 */
			deleGonds(index, detailIndex, detail) {},
			handleInputPlnr(e) {
				if (!e) return
				if (this.catchPl.length > 0) {
					if (!this.catchPl.includes(e)) {
						this.getPlnr(e);
					} else {
						this.reset()
						this.$u.toast("请不要重复扫码")
					}
					return
				}
				this.getPlnr(e);
			},
			setPL(blpls) {
				blpls.forEach(item => {
					// 记录如有拆分，剩余数量
					const remainder = item.PACMG
					// 查询相同工厂，相同物料编码的条目，且还未分配满数量的
					let goods = this.goodsList.find(v => item.MATNR == v.MATNR && item.WERKS == v.RESWK && v
						.total != v.MENGE)
						
					// 如果有满足条件的物料
					while (goods != undefined) {
						// 需求量
						const reqNum = goods.MENGE - (goods.total || 0)
						// 如果需求量大于等于剩余量，直接分配
						if (reqNum >= remainder) {
							goods.details.push({...item, PACMG: remainder})
							// 累加已经分配的数量
							goods.total += remainder
							// 终止循环条件
							goods = undefined
						} else {
							// 如果需求量小于剩余量，需要使用拆分
							goods.details.push({...item, PACMG: reqNum})
							goods.total += reqNum
							remainder -= reqNum
							// 还有剩余数量，需要继续遍历添加
							goods = this.goodsList.find(v => item.MATNR == v.MATNR && item.WERKS == v.RESWK && v
								.total != v.MENGE)
						}
					}
				})
			},
			getPlnr(plnr) {
				this.isDisabled = true;
				this.isFocus = false;
				this.$u.api.sapApi
					.sapBlpl({
						plnr,
						ztype: "002",
					})
					.then((res) => {
						// 验证查询PL是否成功
						if (res.MSG.some(item => {
								if (item.TYPE == 'E') {
									this.$u.toast(item.MESSAGE)
									return true
								}
								return false
							})) {
							return this.reset()
						}
						if (res.BLPL.length == 0) {
							return this.$u.toast("未查询到该条码信息")
						}
						this.catchPl.push(plnr)
						this.setPL(res.BLPL)
						this.reset()
					});
			},
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background: #f8f8f8;
	}

	.headerTitle {
		padding: 20rpx;
		font-weight: 600;

		.items {
			line-height: 40rpx;
		}
	}

	.btn {
		padding: 20rpx;
		background: #fff;

		.topSearch {
			margin-bottom: 20rpx;
		}
	}

	.bottomBtn {
		position: sticky;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		background: #fff;
		bottom: 0rpx;
		margin-top: 20rpx;

		.u-btn {
			width: 300rpx;
		}
	}

	.blue {
		color: #3f9dcc;
	}

	.total {
		background: #fff;
		color: #000;
		padding: 0rpx 40rpx;
		display: flex;
		justify-content: space-between;
		font-size: 32rpx;

		.line {
			margin: 0px 10rpx;
		}
	}

	.cardbox {
		min-height: calc(100vh - 480rpx);
		padding: 0rpx 20rpx;
		margin-top: 20rpx;
	}

	.cardContent {
		border-radius: 8px;
		background: #fff;
		margin-bottom: 20rpx;
	}

	.listItemTitle {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		border-bottom: 2px solid #f8f8f8;

		.u-btn {
			width: 150rpx;
			margin: 0px;
			margin-top: 10rpx;
		}

		.item {
			line-height: 50rpx;
			color: #333;
			font-size: 28rpx;
			font-weight: 500;
			word-break: break-all;
			font-weight: 600;
		}
	}

	.listBottom {
		.bottomTitle {
			height: 80rpx;
			position: relative;

			.desc {
				color: #bbb;
				font-size: 24rpx;
				line-height: 80rpx;
				padding-left: 20rpx;
			}

			.topIcons {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				color: #aaa;
			}
		}

		.bottomBox {
			padding: 20rpx;

			.bottomItem {
				background: #f8f8f8;
				padding: 20rpx;
				margin-bottom: 20rpx;

				.items {
					color: #333;
					font-size: 24rpx;
					height: 40rpx;
					line-height: 40rpx;
				}
			}
		}
	}

	/deep/ .u-sticky {
		top: 0 !important;
		background: #fff;
	}

	.checkedCase {
		margin-top: 10rpx;
	}
</style>
