<!-- 整箱移货下架 -->
<template>
	<view class="shpage zxyhsjpage">
		<!-- 标题栏 -->
		<view class="mianheade mianheade2" @click="goback()">
			<image src="../../static/img/n_baiback.png" class="blacBackico"></image>
			<text class="pagetitle">整箱移货下架</text>
		</view>
		<!-- 固定内容-->
		<view class="sh_gdInfo">
			<view class="item itembg2">
				<view class="it">
					<text class="t1">仓库: </text>
					<text class="t2">{{warehouseName}}</text>
				</view>
			</view>
			<view class="item">
				<view class="it itsp">
					<text class="t1"><text class="redtag">*</text>箱号: </text>
					<input v-model="boxNo" class="inpt1" type="text" @focus="inputfocus($event,'box')"
						@blur="inputblur($event,'')" @confirm="inputConfirm($event,'box')"
						:focus="focusInput == 'box'" />
					<image src="../../static/img/smico.png" class="searchico" @click="scanImg('box')"></image>
				</view>
			</view>
			<view class="item itembg2">
				<view class="it">
					<text class="t1">仓位: </text>
					<text class="t2">{{cwName}}</text>
				</view>
			</view>
			<view class="item item2">
				<view class="it2 it50">
					<text class="t1">{{boxstrList.length}}</text>
					<text class="t2">已扫描箱数</text>
				</view>
				<view class="it2 it50">
					<text class="t1 rednum">{{totalNum}}</text>
					<text class="t2">总数量</text>
				</view>

			</view>
		</view>
		<!-- 列表内容-->
		<view class="shlb cgsjrklb jscklb" :style="{'margin-top':heights.top+'px','height':heights.body+'px'}">
			<view class="item" v-for="(item,index) in dataList" :key="index">
				<view class="it">
					<!-- 箱号 -->
					<text class="txt titstr">{{item.boxBillNo}}</text>
					<view v-for="(cit,index) in item.details" class="ibgt" :key="index+'a'">
						<text class="txt">{{cit.specifications}}</text>
						<view class="txt txtflexnum">
							<text class="txt">{{cit.materialNumber}}</text>
							<text class="txt"> {{cit.qty}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部按钮固定-->
		<view class="footbts">
			<view class="bt bt1" @click="qktkshow = true">清空下架数量</view>
			<view class="bt bt2" @click="wcNxetFn">完成/下一单</view>
		</view>
		<!--清空二次确认弹框-->
		<u-modal :show="qktkshow" :title="qktkTitle" :content='qktkContent' @confirm="qktkconfirm"
			:showCancelButton='true' @cancel="qktkshow = false" @></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				heights: {
					top: 0,
					body: 0,
				},
				focusInput: 'box', // 自动聚焦
				warehouseName: '', // 仓库名称 根据箱号带出来的会实时更新
				boxNo: '', // 箱号的值
				cwIds: [], // 仓位id集合
				boxstrList: [], // 缓存的箱号信息（多个）
				cwName: '', // 仓位名
				totalNum: 0, // 总数量
				dataList: [], // 列表明细数据
				focusTag: '', // 判断聚焦
				qktkshow: false, //清空二次确认弹框
				qktkTitle: '确定清空下架数量?',
				qktkContent: "清空后页面数据将不保存",
				tjdata: [], // 页面提交数据
				dqboxNO: '', //用来是否保存当前输入箱号的值
				APPdevice: uni.getStorageSync('devicePixelRatio'), // 缓存设备的像素比用来区分普通安卓normalAnroid还是pda
				requestStatus: false, // 请求状态识别变量
				scanTracker: {
					lastScanTime: 0,
					lastScanCode: null
				}, // 源头处理扫码段时间内重复扫
			}
		},
		watch: {
			boxNo(n) {
				if (!n) {
					this.dqboxNO = ''
				}
			},
			chooseValue(n, o) {}
		},
		onReady() {
			this.heights = this.$util.setlistHeight('.sh_gdInfo', '.footbts')
		},
		onLoad() {
			//获取广播扫码监听
			this.$broadcastScan.init(this.getScancode)
			this.$broadcastScan.start();
			this.stopScanCode()
			this.startScanCode()
		},
		onHide() {
			this.$broadcastScan.stop();
			this.stopScanCode()
		},
		onShow() {
			this.$broadcastScan.start();
			this.startScanCode()
		},
		onBackPress(e) {
			this.$util.appgoBack(e,'otherUnderwearIndex')
			return true
		},
		methods: {
			// 开启广播
			startScanCode() {
				uni.$on('xwscan', (res) => {
					const now = Date.now();
					const timeSinceLastScan = now - this.scanTracker.lastScanTime;
					// 如果扫描的箱码和上次相同，并且时间间隔小于500ms，则不作处理  
					if ((res.code === this.scanTracker.lastScanCode) && (timeSinceLastScan < 4000)) {
						return;
					} else {
						// 更新扫描跟踪信息
						this.scanTracker.lastScanTime = now;
						this.scanTracker.lastScanCode = res.code;
						this.getScancode(res.code)
					}
				})
			},
			// 关闭广播
			stopScanCode() {
				uni.$off('xwscan')
			},
			// 完成完成/下一单
			wcNxetFn() {
				if (this.boxstrList.length == 0) {
					uni.showToast({
						title: '请先输入必填值',
						icon: 'none',
						duration: 1000
					})
					return
				}
				// 节流
				if (this.requestStatus) {
					return false;
				}
				this.requestStatus = true
				this.$api.post('/MoveBoxRecord/Down_Save', this.tjdata).then(res => {
					if (res.status == 200) {
						uni.showToast({
							title: '成功',
							icon: 'none',
							duration: 1000
						})
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/otherUnderwear/moveBoxDown'
							})
						}, 200);
						// this.$router.go(0)
					}
				})
				setTimeout(() => {
					this.requestStatus = false;
				}, 1500);
			},
			// 清空二次确认
			qktkconfirm() {
				this.warehouseName = ''
				this.cwName = ''
				this.boxNo = ''
				this.boxstrList = []
				this.dataList = []
				this.tjdata = []
				this.totalNum = 0
				this.cwId = ''
				this.qktkshow = false
			},
			// 区分不同的扫描数据、输入数据做处理显示 box
			setSMstr(str) {
				let lth = str.length - this.dqboxNO.length
				console.log('区分不同的扫描数据、输入数据做处理显示 box', str, this.dqboxNO, lth, str.substring(this.dqboxNO.length))
				if (lth > 1) {
					// 扫描的值
					this.boxNo = str.substring(this.dqboxNO.length)
				} else {
					this.dqboxNO = str
					this.boxNo = str
				}
			},
			// 输入确认
			inputConfirm(val, type) {
				if (val) {
					if (this.focusTag == 'box') {
						this.setSMstr(val.target.value)
						this.getboxinfo()
					}
				}
			},
			// 輸入失去焦點
			inputblur(val, type) {
				this.focusTag = type
				// console.log('輸入失去焦點', val, type)
			},
			// 输入聚焦
			inputfocus(val, type) {
				this.focusTag = type
			},
			// 普通安卓设备碘酒扫描图标扫描
			scanImg(type) {
				if (this.APPdevice == "normalAnroid") {
					this.$util.doScanQrCode().then(res => {
						this.focusInput = type
						this.focusTag = type
						this.getScancode(res.result)
					})
				}
			},
			// 获取扫描的值
			getScancode(code) {
				if (this.focusTag == 'box') {
					// 有些PDA会自带换行符，trim函数处理下
					this.boxNo = ''
					this.boxNo = code.trim()
					this.getboxinfo()
				}
			},
			// 扫描框数据重置，光标聚焦
			setSMinputbox() {
				this.focusInput = ''
				setTimeout(() => {
					this.boxNo = ''
					this.focusInput = 'box'
					this.dqboxNO = ''
				}, 200)
			},
			// 根据箱号获取信息
			getboxinfo() {
				if (!this.boxNo) {
					this.setSMinputbox()
					uni.showToast({
						title: '请扫描需要上架的箱号',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if (this.boxstrList.includes(this.boxNo)) {
					this.setSMinputbox()
					uni.showToast({
						title: '该箱号已扫描',
						icon: 'none',
						duration: 1000
					})
					return
				}
				this.focusInput = ''
				this.$api.get('/Inventory/GetBoxInventoryDetails/' + this.boxNo).then(res => {
					if (res.status == 200) {
						let thetotalQty = res.data.totalQty ? res.data.totalQty : 0
						let newDetails = [];
						for (let i = 0; i < res.data.details.length; i++) {
							if (res.data.details[i].qty !== 0) {
								newDetails.push(res.data.details[i]);
							}
						}
						res.data.details = newDetails
						// 页面提交数据
						this.tjdata.push({
							boxId: res.data.boxId,
							subStockCode: res.data.subStockCode,
							qty: thetotalQty,
							details: res.data.details
						})
						this.cwName = res.data.subStock
						this.warehouseName = res.data.stock
						this.dataList.push(res.data)
						// 缓存当前箱
						this.boxstrList.push(res.data.boxBillNo)
						//扫描当前箱
						this.boxNo = res.data.boxBillNo
						this.dqboxNO = res.data.boxBillNo
						// 总数量
						this.totalNum = this.totalNum + thetotalQty
						uni.showToast({
							title: '获取成功',
							icon: 'none',
							duration: 1000
						})
					}
					//清空当前框数据 自动聚焦箱号
					this.setSMinputbox()
				})
			},
			goback() {
				uni.navigateTo({
					url: "/pages/otherUnderwear/index"
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "@/static/public.scss";

	.mianheade2 {
		.pagetitle {
			margin-left: 30%;
		}
	}
</style>