<template>
	<view>
		<StickyNavBar>
			<NavBar title="生产发料"></NavBar>
			<view class="headerTitle">
				<view class="">
					<view class="items">领料申请:{{goodsList[0]&&goodsList[0].applyNo}}</view>
					<view class="items">WC01:{{goodsList[0]&&goodsList[0].workstationName}}</view>
					<view class="items">计划日期:{{goodsList[0]&&goodsList[0].startTime}}</view>
				</view>
				<view class="">
					<checkbox-group @change="checkedChange">
						<checkbox value="r1" :checked="checkedBox" />是否结案
					</checkbox-group>
				</view>
			</view>
			<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">{{ totalNum }}</text>
					<text class="line">/</text>
					<text class="">{{ goodsList.length }}</text>
				</view>
			</view>
		</StickyNavBar>
		<view class="cardbox">
			<view class="cardContent" v-for="(item, index) in goodsList" :key="item.erfmg">
				<scanningList :item='item'/>
			</view>
		</view>
		<!-- <view class="cardbox">
			<view class="cardContent" v-for="(item, index) in goodsList">
				<view class="listItemTitle">
					<view>
						<view class="item">物料编号：{{ item.itemCode }}</view>
						<view class="item">物料描述：{{ item.itemName }}</view>
					</view>
					<view class="right">
						<text class="blue">XX</text>
						<text class="line">/</text>
						<text class="">{{item.applyNum}}</text>
					</view>
				</view>
				<view class="listBottom">
					<view class="bottomTitle" @tap="show = !show">
						<view class="desc">卷条码明细</view>
						<view class="topIcons">
							<view v-if="show">
								<u-icon name="arrow-down" color="#aaa" size="32"></u-icon>
								展开
							</view>
							<view v-else>
								<u-icon name="arrow-up" color="#aaa" size="32"></u-icon>
								收起
							</view>
						</view>
					</view>
					<view v-if="!show" class="bottomBox">
						<view class="bottomItem">
							<view class="items">生产单号：{{ item.applyNo }}</view>
							<view class="items">物料批次：{{ item.MATNR }}</view>
							<view class="items">{{ item.MATNR }}</view>
							<view class="items">数量：{{ item.ERFMG }}</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<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"
export default {
	components: {
		StickyNavBar,
		ContentLoadingMore,
		BottomBtn,
		scanningList
	},
	data() {
		return {
			checkedBox: false,
			r1:'',
			totalNum: 0,
			number: 0,
			show: true,
			nlpla: 'YD-02-02-3',
			wxparams: '',
			btnArr: [
				{
					style: '',
					type: 'warning',
					text: '返回',
					way: 'goBack'
				},
				{
					style: '',
					type: 'primary',
					text: '提交',
					way: 'goSubmit'
				}
			],
			goodsList: [],
			isFocus: false,
			isDisabled: false,
			OrderNum: '',
		};
	},
	computed:{
	},
	onLoad(option) {
		if(option && option.order){
			this.OrderNum = option.order
			this.getOrder(option.order)
		}
	},
	created() {
		this.handleInputNlpla()
		this.getPlnr('100021240419000001|00010001020000050.000|10002441900001');
	},
	methods: {
		getOrder(applyNo) {
			this.totalNum = 0;
			this.isDisabled = true;
			this.$u.api.mesApi
				.pdaMaterialcreate({
					pageNum:1,
					pageSize:10,
					applyNo
				})
				.then((res) => {
					if (res.code - 200 === 0) {
						const data = res.rows
						let num = 0
						data.forEach((ele,index) => {
							ele.sonItemCode = []
							ele.sonItemCode.push(...data)
							ele.applyNum1 = 0
						})
						const result = data.filter((item, index, self) => {
						    return self.findIndex(t => t.itemCode === item.itemCode) === index;
						});
						let i=null,j=null
						for(i = 0; i < result.length; i++){
						  for(j = 0; j < result[i].sonItemCode.length; j++){
							if(result[i].itemCode !== result[i].sonItemCode[j].itemCode){
								result[i].sonItemCode.splice(j,1)
								j--
							}else{
								result[i].applyNum1 += result[i].sonItemCode[j].applyNum
							}
						  }
						}
						// result.forEach((ele,index) => {
						// 	ele.applyNum = []
						// })
						this.goodsList = [...result]
						console.log(this.goodsList,result)
					} else {
						this.$u.toast(res.msg);
					}
					this.loading = false;
				});
		},
		checkedChange(){
			this.checkedBox = !this.checkedBox
		},
		getBtnHandle(row) {
			this[row.way]();
		},
		goBack() {
			console.log('进来')
			uni.navigateBack({
				delta: 0
			});
		},
		goSubmit() {
			if (this.goodsList.length === 0) {
				return;
			}
			// this.goodsList.forEach((item,idnex)=>{
			// 	arr.push({
			// 		...item,
			// 		"aufnr": item.workorderCode,
			//         "mtsnr": item.applyNo,	
			// 		'zeile': index,
			// 		'werks': '1000', // 第42~45位：4位数，工厂代码
			// 		'lgort': this.nlpla,
			// 		'matnr': item.itemCode,
			// 		// 'erfmg': '1', //当然是PDA扫描实体PL标签所获取的数量   第30~40位：总共11位数，每个版号的数量
			// 		// 'erfme': '1',  //为防止采用“可辨单位”管理的情况，选择这个字段来记录单位是万无一失的。
			// 		// 'charg': '1', //批次号 PDA扫码获取 第46位~55位：10位数。 批次号
			// 		// 'plnr': '1', //券号 版号 PDA扫码获取  第13~18位
			// 		// 'vista': '1', // 来自PDA。本方案中，目标下架数量=实际下架数量，无差异
			// 	})
			// })
			// "windCase": null,是否结案   Y是  N否
			this.goodsList.forEach((ele) => {
				ele.windCase = this.checkedBox ? 'Y': 'N'
			})
			const arr = this.goodsList.filter(ele=>ele.vista)
			const params = {
				'zencode': 'A008',
				'item': arr
			}
			this.$u.api.sapApi
				.sapProiss(params)
				.then((res) => {
					this.loading = false;
					console.log(res);
					if (res.every((item) => item.TYPE === 'S')) {
						this.goodsList = [];
						this.nlpla = '';
						this.wxparams = '';
						this.$u.toast('提交成功');
					}
					res.forEach((ele) => {
						if (ele.TYPE === 'E') {
							this.$u.toast(ele.MESSAGE);
						}
					});
				});
		},
		handleInputPlnr(e) {
			e && this.getPlnr(e);
		},
		getPlnr(plnr) {
			this.totalNum = 0;
			this.$u.api.sapApi
				.sapBlpl({
					plnr
				})
				.then((res) => {
					if (res.MSG[0].TYPE === 'S') {
						this.goodsList.forEach((ele,index) => {
							if (ele.itemCode.slice(9, 18) === plnr.slice(20, 29)) {
								// 已发
								if(ele.grantNum){
									
								}else{
									if(!ele.PACMG){
										
									}
								}
									
								ele.aufnr = ele.workorderCode,
								ele.mtsnr = ele.applyNo,
								ele.zeile = index,
								ele.werks = plnr.slice(41, 45),
								ele.erfmg = plnr.slice(29, 40)
								ele.charg = plnr.slice(45, 55)
								ele.plnr = plnr.slice(12, 18)
								ele.vista = Math.floor(plnr.slice(29, 40))
								// ele.LGNUM = res.BLPL[0].LGNUM || 'W00'
								ele.NLBER = res.BLPL[0].NLBER || '001'
								ele.MATNR = res.BLPL[0].MATNR
								ele.WERKS = res.BLPL[0].WERKS
								ele.lgort = res.BLPL[0].LGORT
								ele.PACMG = res.BLPL[0].PACMG
							}
						});
						this.totalNum = this.goodsList.filter(ele=>ele.vista).length
					} else {
						this.$u.toast(res.MSG[0].MESSAGE);
					}
					this.loading = false;
				});
		},
		handleInputNlpla(e) {
			this.$u.api.sapApi
				.sapLgpla({
					LGPLA:"YD-02-02-3"
				})
				.then((res) => {
					if (res) {
						this.goodsList.forEach((ele,index) => {
							// ele.NLPLA = this.nlpla
							ele.LGBER = res.BKDT.LGBER
							ele.LGNUM = res.BKDT.LGNUM
							ele.LGPLA = res.BKDT.LGPLA
							ele.NLTYP = res.BKDT.NLTYP
						})
					} else {
					}
				});
		},
	}
};
</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;
}
</style>