<template>
	<view class="">
		<view class="top_card">
			<view class="device-detail">
				<view class="ljh_box nopad">
					<view class="tit_ljh">
						<text class="state-style" :class="datacontent.jobStatus | statusStyle">
							{{datacontent.jobStatus | statusColor}}
						</text>
						<text class="text_black">{{datacontent.number}}</text>
					</view>
				</view>
				<view class="cell_box uni-flex uni-row margin_top">
					<view class="cell_info cell_long" style="margin-bottom: 0;">
						<view class="text_lightblue">合格总数量</view>
						<view class="text_black text_bold">50</view>
					</view>
					<view class="cell_info cell_long" style="margin-bottom: 0;">
						<view class="text_lightblue">不合格总数量</view>
						<view class="text_black text_bold">{{summaryDetail.failedQty}}</view>
					</view>
					<view class="cell_info cell_long" style="margin-bottom: 0;">
						<view class="text_lightblue">报废总数量</view>
						<view class="text_black text_bold">{{summaryDetail.crackQty}}</view>
					</view>
				</view>
			</view>
		</view>

		<scroll-view :scroll-top="scrollTop" scroll-y="true" @scrolltoupper="upper" @scrolltolower="lower"
			@scroll="scroll" class="scroll-detail margin_top">
			<view class="detail-list" v-for="(item, index) in details" :key="item.id" style="margin-top: 4rpx;">
				<view class="detail-content">
					<view class="ljh_box">
						<view class="tit_ljh">{{ item.itemCode }}</view>
						<view class="uni-flex uni-row space-between">
							<view class="ljh_left">
								<view class="text_lightblue font_xs">{{ item.itemName }}</view>
								<view class="text_lightblue font_xs">{{ item.item.desc2 }}</view>
							</view>
							<view class="ljh_right">
								<text class="tnum">{{item.receiveQty.qty}}</text>
								<text class="tunit">{{item.receiveQty.uom}}</text>
							</view>
						</view>
					</view>
					<view class="list_form list_inspect">
						<view class="uni-container">
							<uni-table style="overflow-x: hidden;">
								<uni-tr>
									<uni-th width="40"></uni-th>
									<uni-th width="80" align="center">合格</uni-th>
									<uni-th width="80" align="center">不合格</uni-th>
									<uni-th width="80" align="center">报废</uni-th>
								</uni-tr>
								<uni-tr>
									<uni-th width="40">数量</uni-th>
									<uni-th width="80" align="center">
										<text class="text_black" style="font-size: .825rem;">{{item.goodQty}}</text>
									</uni-th>
									<uni-th width="80" align="center">
										<uni-easyinput v-model="item.failedQty" type="digit"
											@input="failedQtyInput($event,item)"></uni-easyinput>
									</uni-th>
									<uni-th width="80" align="center">
										<uni-easyinput v-model="item.crackQty" type="digit"
											@input="crackQtyInput($event,item)"></uni-easyinput>
									</uni-th>
								</uni-tr>
							</uni-table>
						</view>
					</view>
					<view class="uni-flex uni-row bot_card">
						<view class="bot_card_item item_long">
							<label class="icon_bg icon_bg_xm">
								<image class="icon_normal" src="@/static/icons_ui/icon_xm.svg"></image>
							</label>
							<text>{{item.recommendPackingCode}}</text>
						</view>
						<!-- 箱码 -->
						<view class="bot_card_item" style="width:46%;">
							<!-- <label class="icon_bg icon_bg_kw">
								<image class="icon_normal" src="@/static/icons_ui/icon_kw.svg"></image>
							</label>
							<text>{{ item.locationCode }}</text> -->
						</view>
						<!-- 库位 -->
						<view class="bot_card_item">
							<label class="icon_bg icon_bg_pc">
								<image class="icon_normal" src="@/static/icons_ui/icon_pc.svg"></image>
							</label>
							<text>{{item.recommendLot}}</text>
						</view>
						<!-- 批次 -->
						<view class="bot_card_item item_short">
							<!-- <label class="icon_state" :class="item.status | statusStyle"></label>
							<text class="state_point" :class="item.status | statusStyle">
								{{ item.status | statusColor}}
							</text> -->
						</view>
					</view>
					<view v-if="item.check" class="choose_marked">
						<image src="@/static/image_marked.svg"></image>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="new_btn_bot">
			<button :disabled="submitting" 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-message必须放在最下层 -->
		<com-message ref="comMessage"></com-message>
	</view>
</template>

<script>
	import {
		getInspectDetail,
		takeInspectJob,
		cancelTakeInspectJob,
		finshInspectJob
	} from '@/api/index.js';
	import {
		analyseScanInfo
	} from '@/common/scan.js';
	import {
		getJobStatuStyle,
		getJobStatuDesc,
		getInspectTypeStyle,
		getInspectTypeDesc,
		showConfirmMsg,
		compare,
		goHome
	} from '@/common/basic.js';

	import comMessage from '@/mycomponents/common/comMessage.vue'
	import winScanButton from '@/mycomponents/wincom/winScanButton.vue'
	import winScanByPack from '@/mycomponents/wincom/winScanByPack.vue'
	export default {
		name: 'inspect_detail',
		components: {
			comMessage,
			winScanButton,
			winScanByPack
		},
		data() {
			return {
				//popup
				type: '',
				id: '',
				datacontent: {},
				details: {},
				summaryDetail: {},
				nextStep: '',
				nextStepIndex: 0,
				currentItemDetail: {},
				applianceBarcode: '',
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				scanMsg: '',
				inspectResult: {},
				submitting: false,
				finshed: false,
				received: false
			}
		},
		props: {},
		onLoad: function(param) {
			let that = this;
			that.id = this.$route.params.id;
			that.datacontent = this.$route.params.item;
			that.summaryDetail = that.datacontent.summaryDetails[0];
			that.details = that.datacontent.details;

			that.nextStep = this.$route.params.nextStep; //下一步动作
			that.nextStepIndex = this.$route.params.nextStepIndex;
			that.received = this.$route.params.received;

			that.details.forEach(r => {
				r.check = false;
				r.crackQty = 0; //报废
				r.failedQty = that.nextStep === '整批不合格' ? r.receiveQty.qty : 0; //不合格
				r.goodQty = r.receiveQty.qty;
				r.scanDate = Date.now()
			});
		},
		//返回首页
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				goHome();
			}
		},
		//拦截返回按钮事件
		onBackPress(e) {
			//已经接收但是没提交任务
			if (this.received) {
				//取消承接任务	
				cancelTakeInspectJob(this.id)
					.then(res => {})
					.catch(err => {
						this.showMessage(err.message);
					});
			}
		},
		filters: {
			statusStyle: function(val) {
				return getJobStatuStyle(val);
			},
			statusColor: function(val) {
				return getJobStatuDesc(val);
			},
			inspectTypeStyle: function(val) {
				return getInspectTypeStyle(val);
			},
			inspectyTypeDesc: function(val) {
				return getInspectTypeDesc(val);
			}
		},
		mounted() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: "#5A7CF3 !important"
			})
		},
		methods: {
			openScanPopup() {
				this.$refs.scanPopup.openScanPopup();
			},

			//不合格数量
			failedQtyInput(value, item) {
				if (value == '') {
					this.failedQtySet0(item);
				} else {
					let qtyValue = Number(value);
					if (qtyValue < 0) {
						this.showMessage('数量不能小于0');
						this.failedQtySet0(item);
					} else {
						if (qtyValue > item.receiveQty.qty) {
							this.showMessage('不合格数量不能大于总数量');
							this.failedQtySet0(item);
						} else if (qtyValue + Number(item.crackQty) > item.receiveQty.qty) {
							this.showMessage('不合格数量+报废数量不能大于总数量');
							this.failedQtySet0(item);
						} else {
							item.failedQty = qtyValue;
							this.calcGoodQty(item);
						}
					}
				}
			},

			failedQtySet0(item) {
				setTimeout(() => {
					item.failedQty = 0;
				}, 10)
			},

			//报废数量
			crackQtyInput(value, item) {
				if (value == '') {
					setTimeout(() => {
						item.crackQty = 0;
					}, 10)

				} else {
					let qtyValue = Number(value);
					if (qtyValue < 0) {
						this.showMessage('数量不能小于0');
						this.crackQtySet0(item);
					} else {
						if (qtyValue > item.receiveQty.qty) {
							this.showMessage('报废数量不能大于总数量');
							this.crackQtySet0(item);
						} else if (qtyValue + Number(item.failedQty) > item.receiveQty.qty) {
							this.showMessage('不合格数量+报废数量不能大于总数量');
							this.crackQtySet0(item);
						} else {
							item.crackQty = qtyValue;
							this.calcGoodQty(item);
						}
					}
				}
			},

			crackQtySet0(item) {
				setTimeout(() => {
					item.crackQty = 0;
					this.calcGoodQty(item);
				}, 10)
			},

			calcGoodQty(item) {
				item.goodQty = item.receiveQty.qty - Number(item.failedQty) - Number(item.crackQty);
			},

			// 提交
			submit() {
				let that = this;
				let sumFailedQty = 0;
				let sumCrackQty = 0;
				that.details.forEach(r => {
					sumFailedQty += Number(r.failedQty);
					sumCrackQty += Number(r.crackQty);
				});

				let allFailedQty = that.summaryDetail.failedQty;
				let allCrackQty = that.summaryDetail.crackQty;

				if (allFailedQty != Number(sumFailedQty)) {
					this.showMessage('检验结果中的不合格数量【' + allFailedQty + '】与检验详细中的不合格数量汇总值【' + sumFailedQty +
						'】不一致')
				} else if (allCrackQty != Number(sumCrackQty)) {
					this.showMessage('检验结果中的报废数量【' + allCrackQty + '】与检验详细中的报废数量汇总值【' + sumCrackQty +
						'】不一致')
				} else {
					that.finsh();
				}
			},

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

				that.datacontent.nextAction = that.nextStepIndex;
				//为summaryDetail赋值
				that.summaryDetail.handledContainerCode = that.summaryDetail.recommendContainerCode;
				that.summaryDetail.handledPackingCode = that.summaryDetail.recommendPackingCode;
				that.summaryDetail.handledBatch = that.summaryDetail.recommendBatch;
				that.summaryDetail.handledLot = that.summaryDetail.recommendLot;
				// that.summaryDetail.handledLocationCode = that.summaryDetail.recommendLocationCode;
				that.summaryDetail.recommendQty = that.summaryDetail.receiveQty;
				that.summaryDetail.handledQty = that.summaryDetail.receiveQty;
				if (that.nextStep === '整批不合格') {
					that.summaryDetail.goodQty = 0;
				} else {
					that.summaryDetail.goodQty = that.summaryDetail.receiveQty.qty - that.summaryDetail.failedQty - that
						.summaryDetail.crackQty;
				}
				that.datacontent.summaryDetails[0] = that.summaryDetail;
				that.datacontent.details.forEach(r => {
					r.handledContainerCode = r.recommendContainerCode;
					r.handledPackingCode = r.recommendPackingCode;
					r.handledBatch = r.recommendBatch;
					r.handledLot = r.recommendLot;
					r.handledLocationCode = r.handledLocationCode === null ? r.recommendLocationCode : r
						.handledLocationCode
					// r.handledLocationCode = r.recommendLocationCode;
					r.recommendQty = r.receiveQty;
					r.handledQty = r.receiveQty;

					r.failedQty = Number(r.failedQty);
					r.crackQty = Number(r.crackQty);
					r.goodQty = r.receiveQty.qty - r.failedQty - r
						.crackQty;

					if (that.inspectType === '抽检') {
						if (that.nextStep === "挑选" || that.nextStep === "部分合格") {
							r.notPassedQty = r.failedQty;
						} else if (that.nextStep === "整批不合格") {
							r.notPassedQty = r.receiveQty.qty - r.crackQty;
						}
					} else { //全检或者挑选
						r.notPassedQty = r.failedQty;
					}
					r.nextAction = that.summaryDetail.nextAction;
					r.worker = localStorage.userName
				});

				let params = JSON.stringify(that.datacontent);
				console.log(params);
				finshInspectJob(that.id, params)
					.then(res => {
						setTimeout(() => {
							uni.navigateTo({
								url: './Inspect'
							})
						}, 1000)
						that.hideLoading();
						that.showCommitSuccess();
					})
					.catch(err => {
						that.showMessage('提交失败' + err.message);
						that.hideLoading();
					});
			},
			hideLoading() {
				this.submitting = false;
				uni.hideLoading();
			},
			//处理扫描解析的返回值
			getScanResult(result) {
				let that = this;
				//扫的是箱码
				if (result.data.isPack) {
					if (result.data.packingCode != "") {
						var itemDetail = that.details.find(r => {
							return r.recommendPackingCode === result.data.packingCode;
						});
						if (itemDetail != null) {
							that.check(itemDetail);
						} else {
							this.showMessage("未找到箱码" + result.data.packingCode)
						}
					} else {
						this.showMessage('未解析到箱码packingCode')
					}
				} else {
					this.showMessage('请扫描箱标签')
				}
			},

			getInspectResult(result) {
				if (result != null) {
					let that = this;
					that.check(that.currentItemDetail);
					that.currentItemDetail.failedQty = result.failedQty; //不合格数量
					that.currentItemDetail.crackQty = result.crackQty; //报废数量
					that.currentItemDetail.failedReason = result.failedReason; //不合格原因
					that.currentItemDetail.notPassedQty = result.notPassedQty; //最终不合格数量
					//合格数量=收货数量-最终不合格数量
					that.currentItemDetail.goodQty = result.receiveQty.qty - result.notPassedQty; //合格数量
					that.$forceUpdate();
				}
			},
			check(item) {
				item.check = true;
				item.scanDate = new Date()
				this.details.sort(compare('scanDate')); //按扫描时间排序
				this.$forceUpdate();
			},
			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 scoped lang="scss">
	@import '../../common/pdabasic.css';

	.type-style {
		border-radius: 16rpx;
		font-size: 30rpx;
		padding: 5rpx 10rpx;
		line-height: 50rpx;
		height: 50rpx;
		width: 100rpx;
		display: flex;
		flex-direction: column;
		align-items: center; //垂直居中
		margin: 10rpx;
	}
</style>
