<template>
	<view class="lists">
		<StickyNavBar :class="{'meteringTab':current === 1}">
			<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">箱号:{{ orderBoxNum }}</view>
			</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="请扫描产品包装条码/外箱码"
						@confirm="handleConfirm"
					></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"/>
		<BottomBtn :btnArr="btnArr" @getBtnHandle="getBtnHandle" v-if="current === 0"></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 { parseTime} from "@/utils/ruoyi";

export default {
	components: {
		StickyNavBar,
		ContentLoadingMore,
		BottomBtn,
		relationships,
		metering
	},
	data() {
		return {
			value: '',
			type: 'select',
			show: false,
			border: true,
			list: [
				{
					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: '',
				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
			}
			const arr = []
			this.goodsList.forEach(ele => {
				arr.push(
					{
						plnr: ele,
						...this.form,
						zxspe: this.form.long +'*'+ this.form.wide  +'*'+ this.form.high,
						zxvolum: (this.form.long * this.form.wide*this.form.high)/1000,
						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);
						setTimeout(()=>{
							this.goBack()
						},1000)
					}
					const foundObject = res.find(item => item.TYPE === 'E');
					if(foundObject && foundObject.MESSAGE){
						this.$u.toast(foundObject.MESSAGE);
					}
				});
		},
		// 删除
		deleGonds(idx) {
			this.goodsList.splice(idx, 1);
		},
		handleInputNlpla(e){
			console.log(`output->e`,e)
		},
		handleConfirm(e) {
			this.isFocus = false;
			this.isDisabled = true;
			e && this.goodsList.push(e)
			setTimeout(() => {
				this.isFocus = true;
				this.isDisabled = false;
				this.wxparams = ''
			}, 1000);
		},
		// 点击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>
