<template>
	<view class="page">
		<StickyNavBar>
			<NavBar title="委外退料"></NavBar>
			<view class="btn">
				<uni-easyinput prefixIcon="search" class="topSearch" v-model="nlpla" focus placeholder="请扫描库位" @change="handleInputNlpla"></uni-easyinput>
				<uni-easyinput
					prefixIcon="search"
					:disabled="isDisabled"
					v-model="wxparams"
					:focus="isFocus"
					placeholder="请扫描产品包装条码/外箱码"
					@input="handleInputPlnr"
				></uni-easyinput>
			</view>
			<view class="total">
				<view class="left">退料明细</view>
				<view class="right">
					批次数：
					<text class="blue">{{ chargaArr.length }}</text>
					<text class="line">|</text>
					总数量：
					<text class="blue">{{ totalNum }}</text>
				</view>
			</view>
		</StickyNavBar>
		<ContentLoadingMore class="cardbox"  :list='chargaArr'>
			<view class="cardContent" v-for="(item, index) in chargaArr">
				<listItem :item="item" :goodsList="goodsList" :nlpla="nlpla" @deleGonds="deleGonds"/>
			</view>
		</ContentLoadingMore>
		<BottomBtn :btnArr="btnArr" @getBtnHandle="getBtnHandle"></BottomBtn>
	</view>
</template>

<script>
import listItem from "./listItem.vue"
import StickyNavBar from '@/components/StickyNavBar/index.vue';
import ContentLoadingMore from '@/components/ContentLoadingMore/index.vue';
import BottomBtn from '@/components/BottomBtn/index.vue';
import { parseTime} from "@/utils/ruoyi";
export default {
	components: {
		StickyNavBar,
		ContentLoadingMore,
		BottomBtn,
		listItem
	},
	data() {
		return {
			number: 0,
			totalNum: 0,
			show: true,
			nlpla: '',
			wxparams: '',
			btnArr: [
				{
					style: '',
					type: 'warning',
					text: '返回',
					way: 'goBack'
				},
				{
					style: '',
					type: 'primary',
					text: '提交',
					way: 'goSubmit'
				}
			],
			goodsList: [],
			isFocus: false,
			isDisabled: false,
			chargaArr: []
		};
	},
	created() {
		// this.getPlnr('100001240428000002|00100000000000014.000|10002442800002');
		// this.getPlnr('100001240428000002|00100000000000019.500|10002442800001');
	},
	methods: {
		deleGonds(detail) {
			this.goodsList.forEach((ele,idx) => {
				if(detail.PLNR === ele.PLNR){
					this.goodsList.splice(idx, 1);
				}
			});
			this.totalNum = 0;
			this.goodsList.forEach((ele) => {
				this.totalNum += ele.TOMNG - 0
				ele.cardNum = 0
			});
			this.handleData()
		},
		getBtnHandle(row) {
			this[row.way]();
		},
		goBack() {
			uni.navigateBack();
		},
		goSubmit() {
			if (this.goodsList.length === 0) {
				return;
			}
			const data = JSON.parse(JSON.stringify(this.goodsList))
			data.forEach(ele => {
				ele.ERFMG = ele.TOMNG
			});
			this.$u.api.sapApi
				.sapRrm([
					{
						BLDAT: parseTime(new Date(),'{y}{m}{d}'),
						BUDAT: parseTime(new Date(),'{y}{m}{d}'),
						ZENCODE: 'A014',
						TYPE: 'CG',
						ITEM: data
					}
				])
				.then((res) => {
					this.loading = false;
					if(!Array.isArray(res)){
						return
					}
					if (res && res.every((item) => item.TYPE === 'S')) {
						this.goodsList = [];
						this.chargaArr = []
						this.totalNum = 0;
						this.nlpla = '';
						this.wxparams = '';
						this.$u.toast('提交成功');
					}
					const foundObject = res.find(item => item.TYPE === 'E');
					if(foundObject && foundObject.MESSAGE){
						this.$u.toast(foundObject.MESSAGE);
					}
				});
		},
		handleInputPlnr(e) {
			this.isFocus = false;
			// e&& e.length > 79 && this.getPlnr(e);
			e && this.getPlnr(e);
		},
		handleInputNlpla(e) {
			if (e) {
				// this.nlpla = e;
				// this.goodsList.forEach((ele) => {
				// 	this.totalNum += ele.TOMNG-0;
				// 	ele.NLPLA = ele.NLPLA || this.nlpla;
				// });
			}
		},
		getPlnr(plnr) {
			this.isDisabled = true;
			if(!this.nlpla){
				this.$u.toast('请先扫描仓位');
				setTimeout(() => {
					this.wxparams = '';
					this.isFocus = true;
					this.isDisabled = false;
				}, 1000);
				return
			}
			this.$u.api.sapApi
				.sapPlnr({
					plnr,
					zType: '001'
				})
				.then((res) => {
					if (res && res.RESULT.TYPE === 'S') {
						if (this.goodsList.some((item) => item.PLNR === plnr)) {
							setTimeout(() => {
								this.isFocus = true;
								this.isDisabled = false;
								this.wxparams = '';
							}, 1000);
							this.$u.toast('已经存在当前条码');
							return
						}
						const arr = [
							{
								...res.DATA[0],
								NLPLA: this.nlpla
							}
						]
						this.goodsList = this.goodsList.concat(arr);
						this.totalNum = 0;
						this.goodsList.forEach((ele) => {
							this.totalNum += ele.TOMNG - 0
							ele.cardNum = 0
						});
						this.handleData()
						setTimeout(() => {
							this.wxparams = '';
							this.isFocus = true;
							this.isDisabled = false;
						}, 1000);
					} else {
						setTimeout(() => {
							this.isFocus = true;
							this.isDisabled = false;
							this.wxparams = '';
						}, 1000);
						this.$u.toast(res.RESULT.MESSAGE);
					}
					this.loading = false;
				});
		},
		handleData(){
			this.chargaArr = this.goodsList.filter((item, index, self) => {
				return self.findIndex(t => t.CHARG === item.CHARG) === index;
			});
			this.chargaArr.forEach((ele,idx) => {
				this.goodsList.forEach(item => {
					if(ele.CHARG === item.CHARG){
						ele.cardNum += (item.TOMNG - 0)
						this.$set(this.chargaArr,idx,{...ele})
					}
				});
			});
		},
	}
};
</script>

<style lang="scss" scoped>

.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 - 540rpx);
	padding: 0rpx 20rpx;
	margin-top: 20rpx;
}
.cardContent {
	border-radius: 8px;
	background: #fff;
	margin-bottom: 20rpx;
}
/deep/ .u-sticky {
	top: 0 !important;
	background: #fff;
}

</style>