<template>
	<page-meta root-font-size="16px"></page-meta>
	<view class="">
		<win-blank-view @goScan='openScanPopup' v-if="itemList.length==0"></win-blank-view>
		<view class="device-detail" style="margin-bottom: 0;" v-if="itemList.length>0">
			<view class="">
				<text class="font_xs">目标库位:</text>
				<text class="text_black text_bold font_sm">{{location.code}}</text>
			</view>
		</view>

		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
			<view class="detail-list margin_top" v-for="(item, index) in itemList">
				<uni-swipe-action>
					<uni-swipe-action-item :right-options="options2" :auto-close="false"
						@click="swipeClick($event,index)">
						<dy-item-info :dataContent='item'></dy-item-info>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>
		</scroll-view>

		<comMessage ref="comMessage"></comMessage>
		<win-scan-button @goScan='openScanPopup' v-if="itemList.length>0"></win-scan-button>
		<com-scan-putaway ref="scanPopup" @confirm='scanConfirm'></com-scan-putaway>
		<view class="uni-flex uni-row new_btn_bot" v-if="itemList.length>0">
			<button class="new_clear_btn btn_double" @click="cancel()">取消</button>
			<button class="new_save_btn btn_double" @click="submit()">确定</button>
		</view>
	</view>
</template>

<script>
	import dyItemInfo from '@/mycomponents/dycom/dyItemInfo.vue'
	import winScanButton from '@/mycomponents/wincom/winScanButton.vue'
	import comScanPutaway from '@/mycomponents/scan/comScanPutaway.vue'
	import winBlankView from '@/mycomponents/wincom/winBlankView.vue'
	import comMessage from '@/mycomponents/common/comMessage.vue'
	import {
		recycledMaterialReceipt,
	} from '@/api/index.js';

	import {
		maxPageSize,
		showConfirmMsg,
		goHome
	} from '@/common/basic.js';

	export default {
		name: 'directPutaway',
		components: {
			winBlankView,
			winScanButton,
			comScanPutaway,
			dyItemInfo,
			comMessage,
		},
		data() {
			return {
				options2: [{
					text: '移除',
					style: {
						backgroundColor: '#F56C6C'
					}
				}],
				itemList: [],
				location: null,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
			};
		},
		props: {
			datacontent: {
				type: Object,
				value: null
			},
			type: {
				type: String,
				value: 'SEMI' //SEMI半成品 
			}
		},
		//返回首页
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				goHome();
			}else if(e.index === 1){
				window.location.reload();
			}
		},
		methods: {
			openScanPopup() {
				this.$refs.scanPopup.openScanPopup(this.location, this.itemList);
			},

			//提示是否移除选择的行?
			swipeClick(e, index) {
				let {
					content
				} = e;
				if (content.text === '移除') {
					uni.showModal({
						title: '提示',
						content: '是否移除选择的行?',
						success: res => {
							if (res.confirm) {
								this.itemList.splice(index, 1);
							}
						}
					});
				}
			},

			scanConfirm(itemList, location) {
				this.itemList = itemList;
				this.location = location;
			},

			submit() {
				let that = this;
				if (that.itemList.length == 0) {
					return;
				}
				uni.showLoading({
					title: '提交中',
					mask: true
				})
				let item = {
					worker: localStorage.userName,
					company: localStorage.company,
					warehouseCode: localStorage.warehouseCode,
					details: that.itemList
				};

				let params = JSON.stringify(item);
				console.log(params);
				recycledMaterialReceipt(params)
					.then(res => {
						that.showCommitSuccess();
						that.itemList = [];
						uni.hideLoading();
					})
					.catch(err => {
						this.showMessage(err.message);
						uni.hideLoading();
					});
			},

			cancel() {
				let that = this;
				showConfirmMsg('是否要清空已扫描的目标库位和零件信息?', confirm => {
					if (confirm) {
						that.location = null;
						that.itemList = [];
					}
				})
			},

			showMessage(message) {
				this.$refs.comMessage.showMessage(message);
			},
			showCommitSuccess() {
				this.$refs.comMessage.showCommitSuccess();
			},
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(e)
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop;
			},
		}
	}
</script>

<style>
	.scanType {
		padding: 5rpx 30rpx;
	}

	.myinput {
		display: flex;
		box-sizing: border-box;
		overflow: hidden;
		position: relative;
		flex: 1;
		justify-content: center;
		flex-direction: row;
		align-items: center;

		font-size: 18px;
	}
</style>
