<template>
	<page-meta root-font-size="16px"></page-meta>
	<view class="">
		<view class="top_card">
			<view class="device-detail">
				<view class="">
					<text class="state-style fl" :class="datacontent.jobStatus | statusStyle"
						style="margin-top: 10rpx;">
						{{datacontent.jobStatus | statusColor}}
					</text>
					<text class="font_xl text_bold text_black">{{datacontent.number}}</text>
				</view>

				<view class="uni-flex">
					<view class="font_sm margin_top">
						<image class="icon_normal fl" src="@/static/icons_ui/icon_kw_blue.svg" style="float: left;">
						</image>
						目标库位: {{currentdetail.recommendLocationCode}}
					</view>
				</view>
			</view>
		</view>
		<scroll-view :scroll-top="scrollTop" scroll-y="true" @scrolltoupper="upper" @scrolltolower="lower"
			@scroll="scroll" class="scrollView">
			<view class="detail-list margin_top" v-for="(item, index) in details" :key="item.id">
				<view>
					<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 desc_ljh">
									<view class="font_xs text_lightblue">{{item.itemName}}</view>
									<view class="font_xs text_lightblue">{{item.item.desc2}}</view>
								</view>
								<view class="ljh_right">
									<text class="tnum">{{item.recommendQty}}</text>
									<text class="tunit">{{item.recommendQty.uom}}</text>
								</view>
							</view>
						</view>
						<view class="cen_card margin_xs_bottom">
							<view class="label_box uni-flex uni-row">
								<view class="label_info">
									<label class="">
										<image class="icon_normal" src="@/static/icons_ui/icon_tm.svg">
										</image>
									</label>
									<text>{{item.recommendContainerCode}}</text>
								</view>
							</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:35%;">
								<!-- <label class="icon_bg icon_bg_kw"><image class="icon_normal" src="@/static/icons_ui/icon_kw.svg"></image></label>
										<text>{{datacontent.recommendLocationCode}}</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>
				</view>
			</view>
		</scroll-view>
		<win-scan-button @goScan='openScanPopup'></win-scan-button>
		<win-scan-by-code ref="scanPopup" title='扫描库位信息' @getScanCode='getScanCode'>
		</win-scan-by-code>
		<comMessage ref="comMessage"></comMessage>
	</view>
</template>

<script>
	import {
		getPutawayJobDetail,
		takePutawayJob,
		cancelTakePutawayJob,
		finshPutawayJob,
		locations
	} from '@/api/index.js';
	'@/common/scan.js';
	import {
		printPutawayLabel
	} from '@/common/print.js'
	import {
		getJobStatuStyle,
		getJobStatuDesc,
		showConfirmMsg,
		goHome
	} from '@/common/basic.js';

	import winScanByCode from '@/mycomponents/wincom/winScanByCode.vue'
	import winScanButton from '@/mycomponents/wincom/winScanButton.vue'
	import comMessage from '@/mycomponents/common/comMessage.vue'

	export default {
		components: {
			winScanByCode,
			winScanButton,
			comMessage
		},
		data() {
			return {
				//popup
				type: '',
				//滑动移除
				options2: [{
					text: '移除',
					style: {
						backgroundColor: '#F56C6C'
					}
				}],
				id: '',
				datacontent: {},
				details: {},
				currentdetail: {},
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				scanMsg: '',
				isPack: {
					type: Boolean,
					default: false
				},
				locationCode: '', //库位
				recommendLocationCode: '', //推荐库位
				submitting: false,
				finshed: false,
				received: false,
				isByLocation: false
			}
		},
		props: {},
		onLoad: function(param) {
			this.id = param.id;
			this.isPack = param.isPack;
			this.isByLocation = param.byLocation === 'true' ? true : false;
			//新建的任务自动接收
			if (param.jobStatus == 1) {
				this.receive((callback => {
					this.received = true;
					this.getDetail();
				}));
			} else {
				this.getDetail();
			}
		},
		onReady() {
			if (this.isByLocation) {
				uni.setNavigationBarTitle({
					title: '上架限制库位任务详情'
				})
			} else {
				uni.setNavigationBarTitle({
					title: '上架任务详情'
				})
			}
		},

		//返回首页
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				goHome();
			}else if(e.index === 1){
				window.location.reload();
			}
		},
		//拦截返回按钮事件
		onBackPress() {
			if (this.received && !this.finshed) {
				//取消承接任务	
				cancelTakePutawayJob(this.id)
					.then(res => {})
					.catch(err => {
						this.showMessage(err.message);
					});
			}
		},
		filters: {
			statusStyle: function(val) {
				return getJobStatuStyle(val);
			},
			statusColor: function(val) {
				return getJobStatuDesc(val);
			},
		},
		mounted() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: "#5A7CF3 !important"
			})
		},
		methods: {
			openScanPopup() {
				this.$refs.scanPopup.openScanPopup();
			},
			getScanCode(code) {
				if (code == "") {
					this.showMessage('库位不能为空')
					return;
				}
				this.getLocationInfo(code);
			},

			getLocationInfo(code) {
				let that = this;
				uni.showLoading({
					title: "正在查询库位信息...",
					mask: true
				});
				setTimeout(() => {
					locations(code).then((res) => {
						if (res != null) {
							this.locationDetail = res
							that.locationCode = code;
							that.submit();
						} else {
							this.showMessage('未查找到库位信息');
							this.locationCode = '';
						}
						uni.hideLoading();
					}).catch((err) => {
						this.showMessage(err.message);
						this.locationCode = '';
						uni.hideLoading();
					})
				}, 100)
			},

			getDetail() {
				let params = {
					id: this.id,
				};
				uni.showLoading({
					title: "加载中....",
					mask: true
				});
				getPutawayJobDetail(params)
					.then(res => {
						this.datacontent = res;
						this.details = res.details;
						if (res.details != null) {
							this.currentdetail = res.details[0];
							// this.locationCode = this.currentdetail.recommendLocationCode;
							// this.recommendLocationCode = this.currentdetail.recommendLocationCode;
							// this.$refs.scanlocation.setValue(this.locationCode);
						}
						uni.hideLoading();
					});
			},

			// 接收
			receive(callback) {
				console.log('receive');
				let params = {
					id: this.id,
				};
				takePutawayJob(params)
					.then(res => {
						callback();
					})
					.catch(err => {
						this.showMessage(err);
					});
			},

			//扫描目标库位
			getlocationDetail(location, code) {

			},

			// 提交
			submit() {
				let that = this;
				//限制库位
				if (that.isByLocation) {
					if (that.locationCode.trim().toUpperCase() != this.currentdetail.recommendLocationCode.trim()
						.toUpperCase()) {
						this.showMessage('目标库位与任务中的库位不一致,不可以上架')
					} else {
						that.finish();
					}
				} else {
					if (that.locationCode.toUpperCase() != this.currentdetail.recommendLocationCode.toUpperCase()) {
						showConfirmMsg('目标库位与任务中的库位不一致,是否要继续上架?',
							confirm => {
								//需要调用接口查询库位是否是零件的可用库位
								if (confirm) {
									that.finish();
								}
							});
					} else {
						that.finish();
					}
				}
			},

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

				that.datacontent.details.forEach(r => {
					r.handledLocationCode = that.locationCode; //推荐库位
					r.handledContainerCode = r.recommendContainerCode
					r.handledPackingCode = r.recommendPackingCode;
					r.handledBatch = r.recommendBatch;
					r.handledLot = r.recommendLot;
					r.handledQty = r.recommendQty;
					r.worker = localStorage.userName_CN ==""?localStorage.userName:localStorage.userName_CN
				});
				let params = JSON.stringify(that.datacontent);
				console.log(params);
				finshPutawayJob(that.id, params)
					.then(res => {
						setTimeout(() => {
							if (this.isByLocation) //限制库位
							{
								uni.navigateTo({
									url: './putawayByLocation'
								})
							} else //不限制库位
							{
								uni.navigateTo({
									url: './putawayNoLocation'
								})
							}
						}, 1000)
						that.hideLoading();
						that.showCommitSuccess();
					})
					.catch(err => {
						that.showMessage(err.message);
						that.hideLoading();
					});
			},

			hideLoading() {
				this.submitting = false;
				uni.hideLoading();
			},

			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;
			},
			print() {
				printPutawayLabel(this.datacontent);
			}
		}
	}
</script>

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