<!-- 发料任务详情 -->
<template>
	<page-meta root-font-size="16px"></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 desc_ljh">
								<view class="font_xs text_lightblue">{{ item.itemName }}</view>
								<view class="font_xs text_lightblue">{{ item.itemDesc1 }}</view>
							</view>
						</view>
						<view class="list_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="100" align="center">推荐</uni-th>
										<uni-th width="140" align="center">实际</uni-th>
									</uni-tr>
									<uni-tr>
										<uni-th width="50">库位</uni-th>
										<uni-th width="100" align="center">
											<view class="text_black">{{ item.recommendFromLocationCode }}</view>
										</uni-th>
										<uni-th width="140">
											<view class="" v-if="item.scaned"
												style="display: flex; width: 100%; align-items: center;  justify-content: center;">
												<view class="text_black">
													{{ item.handledFromLocationCode }}
												</view>
												<view class="" style="margin-left: 20rpx;">
													<button size="mini" type="primary"
														@click="showLocation(item)">扫描库位</button>
												</view>
											</view>
									
									
										</uni-th>
									</uni-tr>
									<uni-tr>
										<uni-th width="50">数量</text></uni-th>
										<uni-th width="100" align="center">
											<text class="text_black">{{item.recommendQty}}</text>
											<text class="text_black" v-if="item.uom!=''">({{item.uom}})</text>
										</uni-th>
										<uni-th width="140" align="center">
											<view v-if="item.scaned"
												style="display: flex;flex-direction: row;justify-content:center;align-items: center;">
												<com-number-box :ref="'comNumberBox_'+index" v-model="item.handledQty"
													:max="99999" :min="0" style='width: 100px;'
													@change="qtyChanged($event,item,index)">
												</com-number-box>
												<text class="text_black" v-if="item.uom!=''">({{item.uom}})</text>
											</view>
										</uni-th>
									</uni-tr>
									
								</uni-table>
							</view>
						</view>
					</view>

					<view v-if="item.scaned" class="choose_marked_count"
						style="background-color: #5FCB94; opacity: 0.65">
						<view class="" style="background-color: #5FCB94; width: 200rpx;height: 300rpx;">
;
						</view>
						<!-- <image src="@/static/image_marked.svg"></image> -->
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="uni-flex uni-row new_btn_bot">
			<button class="new_clear_btn btn_double" @click="clear()">清空</button>
			<button class="new_save_btn btn_double" @click="submit()">提交</button>
		</view>
		<com-balance ref='issueitems' @selectedItem='selectedBalanceItem'></com-balance>
		<win-scan-button @goScan='openScanPopup' title="单件码"></win-scan-button>
		<winScanByProductCode ref="scanPackPopup" title="单件码" @getScanResult='getScanResult'></winScanByProductCode>
		<winScanLocationCode ref="location" title="库位" @getLocation="getToLocation"></winScanLocationCode>
		<com-balance ref="balanceItems" @selectedItem='selectedBalanceItem'></com-balance>
		<com-message ref="comMessage" @afterCloseCommitMessage='closeCommitMessage()'
			@afterCloseScanMessage='closeScanMessage'></com-message>
	</view>
</template>

<script>
	import {
		getUnProducePickDetail,
		takeIssueJob,
		cancelTakeIssueJob,
		finshUnProducePickJob,
	} from '@/api/index.js';
	import {
		getJobStatuStyle,
		getJobStatuDesc,
		showConfirmMsg,
		goHome,
		compareDesc,
		compareStr,
		getCurrDateTime,
		navigateBack
	} from '@/common/basic.js';
	import comMessage from '@/mycomponents/common/comMessage.vue'
	import winScanButton from '@/mycomponents/wincom/winScanButton.vue'
	import winMulitScan from '@/mycomponents/wincom/winMulitScan.vue'
	import comBalance from '@/mycomponents/common/comBalance.vue'
	import comJobScanDetail from '@/mycomponents/comjob/comJobScanDetail.vue'
	import winScanByPack from '@/mycomponents/wincom/winScanByPack.vue'
	import comNumberBox from '@/mycomponents/common/comNumberBox.vue';
	import winScanByProductCode from '@/mycomponents/wincom/winScanByProductCode.vue'
	import winScanLocationCode from '@/mycomponents/wincom/winScanLocationCode.vue';

	export default {
		components: {
			comMessage,
			winScanButton,
			winMulitScan,
			comBalance,
			comJobScanDetail,
			winScanByPack,
			comNumberBox,
			winScanByProductCode,
			winScanLocationCode
		},
		data() {
			return {
				id: "",
				datacontent: {},
				details: {},
				toLocation: '',
				ispending: false,
				balancesItem: null,
				currentItem: null,
				allCount: 0,
				scanCount: 0,
				isPack: true,
				titleArray: ['箱标签'],
			}
		},
		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.getDetail();
			// 	}));
			// } else {
			// 	this.getDetail();
			// }
			this.getDetail();
		},
		onReady() {},
		//返回首页
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				goHome();
			} else if (e.index === 1) {
				window.location.reload();
			}
		},
		//拦截返回按钮事件
		onBackPress(e) {
			//取消承接任务	
			// cancelTakeIssueJob(this.id)
			// 	.then(res => {})
			// 	.catch(err => {
			// 		this.showMessage(err.message);
			// 	});
		},
		mounted() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: "#5A7CF3 !important"
			})
		},
		methods: {
			showLocation(item) {
				this.currentItem = item;
				this.$refs.location.openScanPopup()
			},

			getToLocation(locationInfo) {
				this.currentItem.handledFromLocationCode = locationInfo.code;
				this.currentItem.handledFromLocationArea = locationInfo.areaCode
				this.currentItem.handledFromLocationGroup = locationInfo.locationGroupCode
				this.currentItem.handledFromLocationErpCode = locationInfo.erpLocationCode
				this.currentItem.handledFromWarehouseCode = locationInfo.warehouseCode
			},

			openScanPopup() {
				// if (this.allCount === this.scanCount) {
				// 	this.showMessage("零件已经全部扫描完成");
				// 	return;
				// }
				this.$refs.scanPackPopup.openScanPopup();
			},
			//加载零件信息
			getDetail() {
				let that = this;
				if (that.id == undefined) {
					return;
				}
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let params = {
					id: that.id,
				};
				getUnProducePickDetail(params)
					.then(item => {
						uni.hideLoading();
						console.log('item', item);
						that.datacontent = item;
						that.details = item.details;
						if (that.details != null) {
							that.details.forEach(
								r => {
									r.scaned = false;
									r.scanDate = new Date()
								}
							);
							that.ispending = item.jobStatus === 2;
							// if (that.toLocation === '') {
							// 	that.toLocation = item.details[0].requestLocationCode;
							// }
							this.allCount = that.details.length;
							this.scanCount = 0;
						}
					})
					.catch(err => {
						uni.hideLoading();
						this.showMessage('未查找到详细信息')
					});
			},

			getScanResult(result) {
				// AH240321AM0153 AH240321AM0198 AH240321AM0199
				let item = this.details.find(r => {
					return r.itemCode == result.itemCode
				});

				if (item == undefined) {
					this.showMessage('在任务详情中,单件码【' + result.scanCode + '】所对应的ERP料号与任务中的ERP料号不一致,请重新扫描');
					return;
				}
				if(item.scaned){
					this.showMessage('单件码['+result.scanCode+"]已经扫描")
				}else {
					item.scaned = true;
					item.scanDate = new Date()
					this.details.sort(compareDesc('scanDate'));
					item.handledQty = item.recommendQty;
					this.calcScanCount()
					this.$forceUpdate()
				}
				
			},

			qtyChanged(value, item, index) {
				if (value == 0) {
					this.showMessage('领料数量必须大于0')
					item.handledQty = item.recommendQty
					this.$refs['comNumberBox_' + index][0].setValue(item.handledQty);
					return;
				}
				if (value > item.recommendQty) {
					this.showMessage("输入数量[" + value + "]大于推荐数量[" + item.recommendQty + "]")
					this.$refs['comNumberBox_' + index][0].setValue(item.recommendQty);
					return;
				}

			},

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

			submit() {
				if (this.datacontent.details.length === 0) {
					this.showMessage('该任务没有选择的零件');
					return;
				}
				let items = this.details.filter(r => {
					return r.scaned && r.handledQty != 0 && r.handledFromLocationCode != null
				})
				if (items.length == this.details.length) {
					this.finsh();
				} else {
					this.showMessage("还有未扫描的单件码或库位")
				}

			},


			finsh() {
				let that = this;
				uni.showLoading({
					title: "提交中...",
					mask: true
				});
				that.details.forEach(res => {
					res.recommendContainerCode = ""
					res.handledContainerCode = ""
					res.recommendPackingCode = ""
					res.handledPackingCode = ""
					res.recommendSupplierBatch = ""
					res.recommendArriveDate = res.recommendFromArriveDate
					res.recommendProduceDate = res.recommendFromProduceDate
					res.recommendExpireDate = res.recommendFromExpireDate
					res.recommendLot = ""
					res.handledSupplierBatch = ""
					res.handledArriveDate = res.handledToArriveDate
					res.handledProduceDate = res.handledToProduceDate
					res.handledExpireDate = res.handledToExpireDate
					res.handledLot = ""

				})
				that.datacontent.completeUserId = localStorage.getItem('userId')
				that.datacontent.completeUserName = localStorage.getItem('userName_CN')
				that.datacontent.completeTime = getCurrDateTime();
				that.datacontent.worker = localStorage.userName_CN == "" ? localStorage.userName : localStorage
					.userName_CN;
				that.datacontent.details = that.details;
				let params = JSON.stringify(that.datacontent);
				console.log("提交", params);
					finshUnProducePickJob(that.id, params)
						.then(res => {
							uni.hideLoading();
							if (res != null) {
								that.showCommitSuccessMessage();
							}
						})
						.catch(err => {
							that.showMessage(err.message);
							uni.hideLoading();
						});
			},

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

			clear() {
				this.scanCount = 0;
				this.currentItem = null;
				this.getDetail();
			},
			showMessage(message) {
				this.$refs.comMessage.showMessage(message);
			},
			showScanMessage(message) {
				this.$refs.comMessage.showScanMessage(message);
			},

			closeScanMessage() {
				this.$refs.scanPackPopup.getfocus();
			},

			calcScanCount() {
				this.scanCount = this.details.filter(r => r.scaned === true).length;
				this.closeScanPopup();
			},

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

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

			closeScanPopup() {
				if (this.allCount == this.scanCount) {
					this.$refs.scanPackPopup.closeScanPopup();
				}
			},
			scanPopupGetFocus() {
				this.$refs.scanPackPopup.getfocus();
			},

		}
	}
</script>

<style scoped lang="scss">
</style>