<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"
						: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"/>
		<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';

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: '',
			isFocus: false,
			isDisabled: false,
			orderBoxNum: '',
			show: false,
			actionSheetList: [
				{
					text: 'BL+PL'
				},
				{
					text: 'PL'
				},
			],
			form: {
				ZZXFS: '',
			},
			goodsList: [],
		};
	},
	onLoad(option) {
		if(option && option.order){
			this.orderBoxNum = option.order
		}
	},
	methods: {
		goSubmit(){
			if(this.goodsList.length === 0){
				this.$u.toast('暂无提交数据');
			}
		},
		// 删除
		deleGonds(idx) {
			this.goodsList.splice(idx, 1);
		},
		handleInputPlnr(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;
		},
		// 加载更多
		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: 240rpx!important;
	}
}
</style>
