<template>
	<page-meta root-font-size="18px"></page-meta>
	<view class="">
		<view class="top_card">
			<com-job-scan-detail :jobContent="datacontent" :allCount="allCount" :scanCount="scanCount">
			</com-job-scan-detail>
		</view>

		<scroll-view scroll-y="true" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll"
			class="scroll-detail">
			<view class="detail-list margin_top" v-for="(item, index) in details" :key="item.id">
				<!-- 单选卡片 -->
				<view class="detail-content">
					<view class="choose_main">
						<view class="ljh_box">
							<view class="tit_ljh">{{ item.itemCode }}</view>
							<view class="ljh_left">
								<view class="font_xs text_lightblue">{{ item.itemName }}</view>
								<view class="font_xs text_lightblue">{{ item.itemDesc1 }}</view>
							</view>
						</view>
						<view class="list_form hold_form">
							<view class="uni-container">
								<uni-table style="overflow-x: hidden;">
									<uni-tr>
										<!-- <uni-th width="90"></uni-th>
										<uni-th width="100" align="center">推荐</uni-th>
										<uni-th width="100" align="center">实际</uni-th> -->
										<uni-th width="50"></uni-th>
										<uni-th width="120" align="center">推荐</uni-th>
										<uni-th width="120" align="center">实际</uni-th>
									</uni-tr>
									<uni-tr>
										<uni-th width="50">数量</uni-th>
										<uni-th width="120" align="center">
											<view class="text_black">{{item.recommendQty}}({{item.uom}})</text>
											</view>
										</uni-th>
										<!-- -->
										<uni-th width="120" align="center">
											<view v-if="item.scaned" class="text_black">
												{{item.handledQty}}({{item.uom}})
											</view>
										</uni-th>
									</uni-tr>
									<uni-tr>
										<uni-th width="50">箱码</uni-th>
										<uni-th width="120" align="center">
											<view class="text_packingCode">{{ item.recommendPackingCode }}</view>
										</uni-th>
										<uni-th width="120" align="center">
											<view v-if="item.scaned" class="text_packingCode">
												{{ item.handledPackingCode }}
											</view>
										</uni-th>
									</uni-tr>
									<uni-tr>
										<uni-th width="50">批次</uni-th>
										<uni-th width="120" align="center">
											<view><text class="text_black">{{item.recommendLot }}</text>
											</view>
										</uni-th>
										<uni-th width="120" align="center">
											<view v-if="item.scaned">
												<text class="text_black">{{item.handledLot }}</text>
											</view>
										</uni-th>
									</uni-tr>
									<uni-tr>
										<uni-th width="50">库位</uni-th>
										<uni-th width="120" align="center">
											<view class="text_black">{{ item.recommendLocationCode }}</view>
										</uni-th>
										<uni-th width="120" align="center">
											<view v-if="item.scaned" class="text_black">
												{{ item.handledFromLocationCode }}
											</view>
										</uni-th>
									</uni-tr>
								</uni-table>
							</view>
						</view>
					</view>
					<view class="choose_marked" v-if="item.scaned">
						<image src="@/static/image_marked.svg"></image>
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="new_btn_bot count_shadow">
			<button type="primary" class="new_save_btn" @click="submit()">提交</button>
		</view>
		<win-scan-button @goScan='openScanPopup'></win-scan-button>
		<win-scan-by-pack ref="scanPopup" @getScanResult='getScanResult'></win-scan-by-pack>
		<com-balance ref="balanceItems" @selectedItem='selectedBalanceItem'></com-balance>
		<comMessage ref="comMessage" @afterCloseCommitMessage='closeCommitMessage()'></comMessage>
	</view>
</template>

<script>
	import {
		getDeliverDetail,
		takeDeliverJob,
		cancelTakeDeliverJob,
		finshDeliverJob,
		balances
	} from '@/api/index.js';
	import {
		getJobStatuStyle,
		getJobStatuDesc,
		showConfirmMsg,
		goHome
	} from '@/common/basic.js';
	import winScanButton from '@/mycomponents/wincom/winScanButton.vue'
	import winMulitScan from '@/mycomponents/wincom/winMulitScan.vue'
	import winScanByPack from '@/mycomponents/wincom/winScanByPack.vue'
	import comMessage from '@/mycomponents/common/comMessage.vue'
	import comJobScanDetail from '@/mycomponents/comjob/comJobScanDetail.vue'
	import comBalance from '@/mycomponents/common/comBalance.vue'

	export default {
		components: {
			winScanButton,
			winMulitScan,
			winScanByPack,
			comMessage,
			comJobScanDetail,
			comBalance
		},
		data() {
			return {
				type: '',
				id: "",
				datacontent: {},
				details: {},
				toLocation: '',
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				ispending: false,
				balancesItem: {},
				received: false,
				titleArray: ['箱标签', '目标库位'],
				allCount: 0,
				scanCount: 0,
			}
		},
		filters: {
			statusStyle: function(val) {
				return getJobStatuStyle(val);
			},
			statusColor: function(val) {
				return getJobStatuDesc(val);
			}
		},
		props: {
			itemCode: "",
		},
		onLoad(param) {
			this.id = param.id;
			if (param.jobStatus == 1) {
				this.receive((callback => {
					this.received = true;
					this.getDetail();
				}));
			} else {
				this.getDetail();
			}
		},
		//返回首页
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				goHome();
			}else if(e.index === 1){
				window.location.reload();
			}
		},
		//拦截返回按钮事件
		onBackPress(e) {
			if (this.received) {
				//取消承接任务	
				cancelTakeDeliverJob(this.id)
					.then(res => {})
					.catch(err => {
						this.showMessage(err.message);
					});
			}
		},
		mounted() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: "#5A7CF3 !important"
			})
		},
		methods: {
			openScanPopup() {
				this.$refs.scanPopup.openScanPopup();
			},
			//加载零件信息
			getDetail() {
				let that = this;
				let params = {
					id: that.id,
				};
				getDeliverDetail(params)
					.then(item => {
						console.log('item', item);
						that.datacontent = item;
						that.details = item.details;
						that.details.forEach(r => r.scaned = false);
						that.ispending = item.jobStatus === 2;
						that.allCount = item.details.length;
						// that.toLocation = item.details[0].recommendLocationCode;
					})
					.catch(err => {
						this.showMessage('未查找到详细信息')
					});
			},
			//扫描箱标签
			getScanResult(result) {
				let that = this;
				let code = result.data.code;
				let item = this.details.find(r => {
					return r.recommendPackingCode === code
				});

				if (item === undefined) {
					this.showMessage('在发货任务详情中,未找到箱码【' + code + '】');
					return;
				} else {
					if (item.scaned) {
						this.showMessage('箱码【' + code + '】已经扫描,请扫描下一箱零件');
						return;
					}
				}
				//按照零件号和箱码去查询库存
				let params = {
					pageSize: 1000,
					pageIndex: 1,
					packingCode: code,
					locationTypes: [4], //成品
					inventoryStatuses: [2], //合格
				};
				balances(params)
					.then(res => {
						try {
							if (res.totalCount == 0) {
								this.showMessage('箱码【' + code + '】在【成品库】未查询到库存信息');
							} else if (res.totalCount == 1) {
								that.balancesItem = res.items[0];
								this.createItem(item);
							} else {
								this.$refs.balanceItems.openPopup(res.items);
							}
							uni.hideLoading();
						} catch (e) {
							this.showMessage(e.message)
						}
					})
					.catch(err => {
						this.showMessage(err.message)
					});
			},

			createItem(item) {
				let that = this;
				if (that.balancesItem != null || that.balancesItem != undefined) {
					// if (that.balancesItem.qty != item.recommendQty) {
					// 	this.showMessage('库存余额数量【' + that.balancesItem.qty + '】不等于推荐数量【' + item.recommendQty + '】,不可以进行发货')
					// } else {
					item.scaned = true;
					item.handledContainerCode = that.balancesItem.containerCode;
					item.handledPackingCode = that.balancesItem.packingCode;
					item.handledBatch = that.balancesItem.batch;
					item.handledLot = that.balancesItem.lot;
					item.handledFromLocationArea = that.balancesItem.locationCode;
					item.handledQty = that.balancesItem.qty;
	

					// ==================================
					// item.recommendFromLocationCode = string;
					// item.recommendFromLocationArea = string;
					// item.recommendFromLocationGroup = string;
					// item.recommendFromLocationErpCode = string;
					// item.recommendFromWarehouseCode = string;
					// item.uom = string;
					// item.recommendQty = 0;
					// item.handledFromLocationCode = string;
					// item.handledFromLocationArea = string;
					// item.handledFromLocationGroup = string;
				 //    item.handledFromLocationErpCode = string;
					// item.handledFromWarehouseCode = string;
					// item.handledQty = that.balancesItem.qty;
					// item.toLocationCode = string;
					// item.toLocationArea = string;
					// item.toLocationGroup = string;
					// item.toLocationErpCode = string;
					// item.toWarehouseCode = string;
					// item.onTheWayLocationCode = string;


					this.getScanCount();
					this.closeScanPopup();
					that.$forceUpdate();
					// }
				}
			},


			getScanCount() {
				this.scanCount = this.datacontent.details.filter(r => r.scaned).length;
			},

			closeScanPopup() {
				if (this.allCount == this.scanCount) {
					this.$refs.scanPopup.closeScanPopup();
				}
			},

			selectedBalanceItem(balanceItem) {
				that.balancesItem = balanceItem;
				this.createItem(item);
			},

			//接收
			receive(callback) {
				let params = {
					id: this.id
				};
				takeDeliverJob(params)
					.then(res => {
						callback(true);
					})
					.catch(err => {
						this.showMessage(err.message);
						callback(false);
					});
			},

			submit() {
				let that = this;
				if (that.datacontent.details.length === 0) {
					this.showMessage('该任务没有要发货的零件');
					return;
				}
				let items = that.datacontent.details.filter(r => r.scaned);
				if (items.length === 0) {
					this.showMessage('请扫描要发货的零件');
					return;
				} else if (items.length < that.datacontent.details.length) {
					this.showMessage('还有未扫描的零件,不可以发货');
					return;
				} else {
					that.finsh();
				}
			},

			finsh() {
				let that = this;
				uni.showLoading({
					title: "提交中..."
				});

				let params = JSON.stringify(that.datacontent);
				console.log(params);
				// finshDeliverJob(that.id, params)
				// 	.then(res => {
				// 		uni.hideLoading();
				// 		if (res != null) {
				// 			that.showCommitSuccessMessage();
				// 			that.backJobList(1000);
				// 		}
				// 	})
				// 	.catch(err => {
				// 		this.showMessage(err.message);
				// 		uni.hideLoading();
				// 	});
			},

			//返回任务列表页
			backJobList(delay) {
				setTimeout(() => {
					uni.navigateTo({
						url: './deliver'
					})
				}, delay)
			},

			showCommitSuccessMessage() {
				this.$refs.comMessage.showCommitSuccess();
			},

			closeCommitMessage() {
				this.backJobList(0); //点关闭直接返回列表
				uni.hideLoading();
			},

			closeScanPopup() {
				if (this.allCount == this.scanCount) {
					this.$refs.scanPopup.closeScanPopup();
				}
			},

			clearScanLocation() {
				// this.$refs.scanLocation.getfocus();
				// this.$refs.scanLocation.clear();
			},
			showMessage(message) {
				this.$refs.comMessage.showMessage(message);
			},

			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 scoped lang="scss">
</style>
