<template>
	<view class="lists">
		<StickyNavBar class="stickyBox">
			<NavBar title="仓位转移"></NavBar>
			<view class="selectSheet">
				<u-row gutter="16">
					<u-col span="6">
						<u-picker v-model="show" mode="selector" :default-selector="[0]" range-key="text" :range="actionSheetList"></u-picker>
						<u-input v-model="value" placeholder="请选择工厂" :type="type" :border="border" @click="show = true" />
					</u-col>
					<u-col span="6">
						<u-picker v-model="depotShow" mode="selector" :default-selector="[0]" range-key="LGOBE" :range="depotLists" @confirm="actionSheetCallback"></u-picker>
						<u-input v-model="LGOBE" placeholder="请选择仓库别" :type="type" :border="border" @click="depotShow = true" />
						<!-- <u-action-sheet :list="depotLists" v-model="depotShow" @click="actionSheetCallback"></u-action-sheet> -->
					</u-col>
				</u-row>
			</view>
			<view class="scanningBtn">
				<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>
		</StickyNavBar>
		<ContentLoadingMore class="cardbox">
			<view class="cardContent" v-for="(item, index) in goodsList">
				<view class="cardTitle">
					<text class="cardItemLabel">物料批号：</text>
					<text class="cardItemValue">{{ item.CHARG }}</text>
				</view>
				<view class="cardItem">
					<view class="cardItemDetail">
						<text class="cardItemLabel">物料编号</text>
						<text class="cardItemValue itemValueWidth">{{ item.MATNR }}</text>
						<u-icon name="trash-fill" size="40" @click="deleteItem(index)"></u-icon>
					</view>
					<view class="cardItemDetail">
						<text class="cardItemLabel">物料描述</text>
						<text class="cardItemValue">{{ item.MAKTX }}</text>
					</view>
					<view class="cardItemDetail">
						<text class="cardItemLabel">数量</text>
						<text class="cardItemValue">{{ item.ERFMG }}</text>
					</view>
					<view class="cardItemDetail">
						<text class="cardItemLabel">单位</text>
						<text class="cardItemValue">{{ item.MEINS }}</text>
					</view>
				</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';
export default {
	components: {
		StickyNavBar,
		ContentLoadingMore,
		BottomBtn
	},
	data() {
		return {
			nlpla: '',
			wxparams: '',
			value: '',
			type: 'select',
			show: false,
			depotShow: false,
			border: true,
			LGOBE: '',
			depotLists: [],
			actionSheetList: [
				{
					text: '男'
				},
				{
					text: '女'
				},
				{
					text: '保密'
				}
			],
			status: 'loadmore',
			btnArr: [
				{
					style: '',
					type: 'warning',
					text: '取消',
					way: 'goBack'
				},
				{
					style: '',
					type: 'primary',
					text: '提交',
					way: 'goSubmit'
				}
			],
			goodsList: [],
			isFocus: false,
			isDisabled: false
		};
	},
	created() {
		this.getDepotLists();
		this.getPlnr('10000820240327000018|10000320002')
	},
	methods: {
		getDepotLists() {
			this.$u.api.sapApi
				.sapDict({
					FIELDNAME: 'T001L'
				})
				.then((res) => {
					if (res) {
						res.forEach((ele) => {
							ele.text = ele.LGOBE;
						});
						this.depotLists = res;
					} else {
						this.depotLists = [];
					}
				});
		},
		getBtnHandle(row) {
			this[row.way]();
		},
		goBack() {
			uni.navigateBack();
		},
		goSubmit() {
			if (this.goodsList.length === 0) {
				return;
			}
			console.log([
				{
					BLDAT: '20240325',
					BUDAT: '20240325',
					ZENCODE: 'A012',
					TYPE: 'ZY',
					ITEM: this.goodsList
				}
			]);
			this.$u.api.sapApi
				.sapRrm([
					{
						BLDAT: '20240325',
						BUDAT: '20240325',
						ZENCODE: 'A012',
						TYPE: 'ZY',
						ITEM: this.goodsList
					}
				])
				.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);
						}
					});
				});
		},
		// 点击actionSheet回调
		actionSheetCallback(index) {
			console.log(index, 'index');
			this.LGOBE = this.depotLists[index].LGOBE;
		},
		handleInputNlpla(e) {
			console.log(e, 'eee');
			if (e) {
				this.nlpla = e;
				this.goodsList.forEach((ele) => {
					ele.NLPLA = ele.NLPLA || this.nlpla;
				});
			}
		},
		handleInputPlnr(e) {
			this.isFocus = false;
			e && this.getPlnr(e);
		},
		getPlnr(plnr) {
			this.isDisabled = true;
			this.$u.api.sapApi
				.sapPlnr({
					plnr
				})
				.then((res) => {
					if (res && res.RESULT.TYPE === 'S') {
						console.log('res.DATA', res.DATA);
						this.goodsList = this.goodsList.concat(res.DATA);
						this.goodsList.forEach((ele) => {
							ele.NLPLA = ele.NLPLA || this.nlpla;
						});
						setTimeout(() => {
							this.wxparams = '';
							this.isFocus = true;
							this.isDisabled = false;
						}, 1000);
					} else {
						setTimeout(() => {
							this.isFocus = true;
							this.isDisabled = false;
						}, 1000);
						this.$u.toast(res.RESULT.MESSAGE);
					}
					this.loading = false;
				});
		},
		deleteItem(idx) {
			console.log('删除');
			this.goodsList.splice(idx, 1);
		},
		// 加载更多
		onReachBottom() {
			console.log('加载更多');
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f8f8f8;
}
.lists {
	flex: 1;
	flex-direction: column;
}
.scanningBtn {
	padding: 20rpx;
	background: #fff;
	.topSearch {
		margin-bottom: 20rpx;
	}
}
.selectSheet {
	padding: 20rpx;
	padding-bottom: 0;
	background: #fff;
}
.cardbox {
	min-height: calc(100vh - 480rpx);
	padding: 0rpx 20rpx;
	margin-top: 20rpx;
}
.cardContent {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 20rpx;
	margin-bottom: 20rpx;
}
.cardTitle {
	font-size: 32rpx;
	color: #000;
	display: flex;
	margin: 20rpx 20rpx 0 20rpx;
	padding-bottom: 20rpx;
	border-bottom: 2px solid #f8f8f8;
}
.cardItem {
	padding: 20rpx 20rpx 0 20rpx;
}
.cardItemDetail {
	display: flex;
	padding-bottom: 20rpx;
}
.cardItemLabel {
	width: 200rpx;
}
.cardItemValue {
	width: 500rpx;
}
.bottom {
	position: fixed;
	display: flex;
	bottom: 0;
	left: 0;
	z-index: 10;
	width: 750rpx;
	height: 140rpx;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	.u-btn {
		width: 300rpx;
	}
}
.bottomArea {
	padding-bottom: 160rpx;
}
.itemValueWidth {
	width: 450rpx;
}
/deep/ .u-sticky {
	top: 0 !important;
}
</style>
