<template>
	<view class="lists">
		<StickyNavBar class="listTitle">
			<NavBar title="销售拣货"></NavBar>
			<!-- <view class="selectSheet">
				<u-tabs :list="list" :is-scroll="false" :current="current" @change="changeTab"></u-tabs>
			</view> -->
			<view class="headerTitle">
				<view class="items">交货单号:MO2024032100001</view>
				<view class="items">600247|李XXXX宁XXX体</view>
				<view class="items">计划日期:2024/03/22</view>
			</view>
			<view class="">
				<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>
			</view>
		</StickyNavBar>
		<ContentLoadingMore class="contentMore" :list='goodsList'>
			<view class="cardbox">
				<view class="cardContent" v-for="(item, index) in goodsList" :key="item.PLNR">
					<scanningList :item='item'/>
				</view>
			</view>
			<!-- <view class="cardbox" v-else>
				<view class="cardContent" v-for="(item, index) in goodsList">
					<stockList :item='item' />
				</view>
			</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 stockList from "./stockList.vue"
import { parseTime} from "@/utils/ruoyi";
export default {
	components: {
		StickyNavBar,
		ContentLoadingMore,
		BottomBtn,
		scanningList,
		stockList
	},
	data() {
		return {
			value: '',
			type: 'select',
			border: true,
			list: [
				{
					name: '拣货扫描'
				},
				{
					name: '库存查询'
				}
			],
			current: 0,
			status: 'loadmore',
			btnArr: [
				{
					style: '',
					type: 'warning',
					text: '返回',
					way: 'goBack'
				},
				{
					style: '',
					type: 'primary',
					text: '提交',
					way: 'goSubmit'
				}
			],
			isFocus: false,
			isDisabled: false,
			nlpla: '',
			wxparams: '',
			goodsList: [],
			orderItem: {},
		};
	},
	created() {
		// this.getPlnr('10000820240325000001|10000320100');
	},
	onLoad(option) {
		if(option && option.order){
			this.goodsList = [
				...JSON.parse(option.order)
			]
			this.goodsList.forEach(ele => {
				ele.checkedBox = false
			});
		}
	},
	computed:{
		totalNum(){
			const count = this.goodsList.filter(item => item.checkedBox).length
			return count || 0
		},
	},
	methods: {
		goSubmit() {
			const checkboxArr = this.goodsList.filter(item => item.checkedBox)
			if (checkboxArr.length === 0) {
				this.$u.toast('暂无提交数据');
				return;
			}
			const chargLength = checkboxArr.filter(item => item.CHARG).length
			const chargListLength = this.goodsList.filter(item => item.CHARG).length
			if (chargLength > 1 || chargListLength != chargLength) {
				this.$u.toast('超过拣配数量');
				return;
			}
			this.$u.api.sapApi
				.sapPickingDn(checkboxArr)
				.then((res) => {
					this.loading = false;
					console.log(res);
					if (res.every((item) => item.TYPE === 'S')) {
						this.$u.toast('提交成功');
					}
					res.forEach((ele) => {
						if (ele.TYPE === 'E') {
							this.$u.toast(ele.MESSAGE);
						}
					});
				});
		},
		getPlnr(plnr) {
			let params = {
				ZCODE: plnr.includes('BL') ? plnr : '',
				plnr: plnr.includes('BL') ? '': plnr
			}
			this.$u.api.sapApi
				.sapBlpl(params)
				.then((res) => {
					if (res.MSG[0].TYPE === 'S') {
						const data = res.BLPL[0]
						const count = this.goodsList.filter(item => item.PLNR === res.BLPL[0].PLNR).length
						if(!count){
							this.$u.toast('没有匹配到对应物料');
						}else{
							this.goodsList.forEach((ele,idx) => {
								if(ele.PLNR === res.BLPL[0].PLNR){
									this.$set(this.goodsList,idx,{...ele,checkedBox: true})
								}
							});
						}
					} else {
						this.$u.toast(res.MSG[0].MESSAGE);
					}
					setTimeout(() => {
						this.isFocus = true;
						this.isDisabled = false;
						this.wxparams = ''
					}, 1000);
					this.loading = false;
				});
		},
		// 加载更多
		onReachBottom() {
			console.log('加载更多inventoryCounting');
		},
		getBtnHandle(row) {
			console.log('getBtnHandle', row);
			this[row.way]();
		},
		goBack() {
			console.log('进来');
			uni.navigateBack({
				delta: 0
			});
		},
		changeTab(index) {
			this.current = index;
		},
		handleInputNlpla(e) {
			
		},
		handleInputPlnr(e) {
			this.isFocus = false;
			e && this.getPlnr(e);
		},
	}
};
</script>

<style lang="scss">
.selectSheet {
	border-bottom: 1px solid #ccc;
}
/deep/ .u-sticky {
	top: 0 !important;
	background: #fff;
}
.tabTwo{
	/deep/ .u-sticky-wrap{
		height: 330rpx !important;
	}
}
.listTitle{
}
.contentMore {
	margin: 20rpx;
}
page {
	background: #f8f8f8;
}
.headerTitle{
	padding: 20rpx;
	font-weight: 600;
	.items{
		line-height: 40rpx;
	}
}
.btn {
	padding: 20rpx;
	background: #fff;
	.topSearch {
		margin-bottom: 20rpx;
	}
}
.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 - 410rpx);
	padding: 0rpx 20rpx;
	margin-top: 20rpx;
}
.cardContent {
	border-radius: 8px;
	background: #fff;
	margin-bottom: 20rpx;
}
</style>
