<template>
	<view class="lists">
		<StickyNavBar :class="{'meteringTab':current !== 0}">
			<NavBar title="装箱"></NavBar>
			<view class="selectSheet">
				<u-tabs :list="list" :is-scroll="false" :current="current" @change="changeTab"></u-tabs>
			</view>
			<view class="" v-if="current === 0">
				<view class="btn">
					<view class="boxSelect">
						<u-picker v-model="show" mode="selector" :default-selector="[0]" range-key="text"
							:range="actionSheetList" @confirm="actionSheetCallback"></u-picker>
						<u-input v-model="form.ZZXFS" placeholder="请选择装箱方式" type="select" :border="true"
							@click="show = true" />
					</view>
					<uni-easyinput prefixIcon="search" class="topSearch" v-model="blNum" focus placeholder="请扫描箱码"
						@change="handleInputNlpla" :disabled="form.ZZXFS === 'PL'"></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="">{{ goodsList.length }}</text>
					</view>
				</view>
			</view>
		</StickyNavBar>
		<relationships v-show="current === 0" :list="goodsList" @deleGonds="deleGonds" />
		<metering v-show="current === 1" :form="form" />
		<unpacking v-show="current === 2" />
		<BottomBtn :btnArr="btnArr" @getBtnHandle="getBtnHandle" v-if="current !== 2"></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 relationships from './relationships.vue';
	import metering from './metering.vue';
	import unpacking from './unpacking.vue';
	import {
		parseTime
	} from "@/utils/ruoyi";

	export default {
		components: {
			StickyNavBar,
			ContentLoadingMore,
			BottomBtn,
			relationships,
			metering,
			unpacking
		},
		data() {
			return {
				value: '',
				type: 'select',
				show: false,
				border: true,
				list: [{
						name: '装箱关联'
					},{
						name: '计量称重'
					},{
						name: '解除装箱'
					}
				],
				current: 0,
				status: 'loadmore',
				btnArr: [{
						style: '',
						type: 'warning',
						text: '返回',
						way: 'goBack'
					},
					{
						style: '',
						type: 'primary',
						text: '提交',
						way: 'goSubmit'
					}
				],
				wxparams: '',
				blNum: '',
				isFocus: false,
				isDisabled: false,
				orderBoxNum: '',
				show: false,
				actionSheetList: [{
						text: 'BL+PL'
					},
					{
						text: 'PL'
					},
				],
				form: {
					ZZXFS: 'BL+PL',
					zxspe: '', //箱规格（cm）
					zxvolum: '', //体积(m132)
					zxntgew: '', //箱重（kg）
					ntgew: '', //净重（kg）
					brgew: '', //毛重(kg)
					long: '', //长
					wide: '', //宽
					high: '', //高
					updkz: 'I',
					datum: '', //扫描日期
					uzeit: '', //扫描时间
					uname: 'admin', //扫描人
					zxtext: '',
					ztext: '',
				},
				goodsList: [],
			};
		},
		// onLoad(option) {
		// 	if(option && option.order){
		// 		this.orderBoxNum = option.order
		// 	}
		// },
		methods: {
			goSubmit() {
				if (this.goodsList.length === 0) {
					this.$u.toast('暂无提交数据');
					return
				}
				if (!this.blNum && this.form.ZZXFS === 'BL+PL') {
					this.$u.toast('请扫描箱码');
					return
				}
				if (!this.form.long || !this.form.wide || !this.form.high || !this.form.brgew || !this.form.zxntgew) {
					uni.showModal({
						title: '提示',
						content: '还未填写计量称重信息！是否继续提交？',
						success: (res) => {
							if (res.confirm) {
								console.log('用户点击确定');
								this.subRequest()
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					this.subRequest()
				}
			},
			// 请求发送
			subRequest() {
				const arr = []
				this.goodsList.forEach(ele => {
					arr.push({
						plnr: ele,
						werks: this.vuex_user_factory,
						...this.form,
						kunnr: "",
						zxspe: this.form.long + '*' + this.form.wide + '*' + this.form.high,
						zxvolum: (this.form.long * this.form.wide * this.form.high) / 1000000,
						ntgew: (this.form.brgew - 0) - (this.form.zxntgew - 0),
						zcode: this.form.ZZXFS === 'PL' ? '' : this.blNum,
						datum: parseTime(new Date(), '{y}{m}{d}'),
						uzeit: parseTime(new Date(), '{h}{i}{s}'),
					})
				});
				this.$u.api.sapApi
					.sapCasePlnr(arr)
					.then((res) => {
						if (!Array.isArray(res)) {
							return
						}
						if (res.every((item) => item.TYPE === 'S')) {
							this.$u.toast(res[0].MESSAGE);
							this.resetData()
						}
						const foundObject = res.find(item => item.TYPE === 'E');
						if (foundObject && foundObject.MESSAGE) {
							this.$u.toast(foundObject.MESSAGE);
						}
					});
			},
			// 重置数据
			resetData() {
				this.goodsList = [];
				this.form.brgew = ''
			},
			// 删除
			deleGonds(idx) {
				this.goodsList.splice(idx, 1);
			},
			handleInputNlpla(e) {
				console.log(`output->e`, e)
			},
			reset() {
				setTimeout(() => {
					this.isFocus = true;
					this.isDisabled = false;
					this.wxparams = ''
				}, 1000);
			},
			handleInputPlnr(e) {
				this.isFocus = false;
				this.isDisabled = true;
				if (this.goodsList.some((item) => item === e)) {
					this.$u.toast('已经存在当前条码');
					this.reset()
					return
				}
				e && this.goodsList.push(e)
				this.reset()
			},
			// 点击actionSheet回调
			actionSheetCallback(index) {
				this.form.ZZXFS = this.actionSheetList[index].text;
				if (this.form.ZZXFS === 'PL') {
					this.blNum = ''
				}
			},
			// 加载更多
			onReachBottom() {
				console.log('加载更多inventoryCounting');
			},
			getBtnHandle(row) {
				console.log('getBtnHandle', row);
				this[row.way]();
			},
			goBack() {
				console.log('返回了');
				uni.navigateBack();
			},
			changeTab(index) {
				this.current = index;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.selectSheet {
		border-bottom: 1px solid #ccc;
	}

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

	.contentMore {
		margin: 20rpx;
	}

	page {
		background: #f8f8f8;
	}

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

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

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

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

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

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

	.meteringTab {

		// height: 200rpx;	
		/deep/.u-sticky-wrap {
			height: 170rpx !important;
		}
	}

	.topSearch {
		margin-bottom: 20rpx;
	}
</style>
