<!-- 库存查询 -->
<template>
	<view class="shpage gx_zxpage">

		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<template #top>
				<!-- 标题 --> 
				<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" :class="{ itembg2: inputVal }" :style="{ 'pointer-events': inputVal ? 'none' : '' }">
						<view class="it">
							<text class="t1">
								<text class="redtag">*</text>
								仓库:
							</text>
							<w-select
								class="wwselectit"
								v-model.trim="warehouseName"
								defaultValue="请选择"
								:list="warehouseList"
								valueName="name"
								keyName="name"
								@change="handleWareHouseChange"
								@focus="inputfocus($event, 'ck')"
								ref="wselectck"
							></w-select>
						</view>
					</view>
					<!-- 無聊 -->
					<view class="item" :class="{ itembg2: !warehouseName }" :style="{ 'pointer-events': !warehouseName ? 'none' : '' }">
					    <view class=""  style="display: flex;padding: 10rpx 0; margin:0  40rpx;border-bottom: 1rpx solid #E3E5E8; box-sizing: border-box;">
					      <!-- border-right: 1rpx solid #E3E5E8; -->
						   <view style="width:130rpx;flex:3;border-right: 1rpx solid #E3E5E8;">
								<uni-data-select
								  v-model="selectValue"
								  :localdata="options"
								  @change="hanldeSelectChange"
								  :clear="false"
								 style=""
								></uni-data-select>
						   </view>
						 <!--  <view style="width: 1rpx; height:50rpx;background-color:#E3E5E8 ;">
							   
						   </view> -->
						  <view style="display: flex; align-items: center;justify-content: center;flex:10">
						  	<u-input :focus="focusTag==='box'"  @clear="handleClear"  border="bottom"   style="font-size: 14px; height:32rpx;"clearable  v-model="inputVal" @confirm="handleInputConfirm()"
						  	></u-input>
						  </view>
						  <view style="display: flex;align-items: center;flex: 2;justify-content: center;"@click="scanImg('box')">
						  	<image src="../../static/img/smico.png" class="searchico" style="margin-left:0;"></image>
						  </view>
							
					    </view>
					</view>
				</view>
				<view :style="{height:navHeight+formHeight+30+'rpx'}"></view>
				<view style="padding: 20rpx 16rpx 0;background-color: #fff;margin:0 24rpx;border-top-left-radius: 12rpx;border-top-right-radius: 12rpx;">
					<!-- 详情 -->
					<view style="font-size: 14px;padding-left:12rpx;color: #717275;">
						<view v-if="selectValue===1">
							<view style="padding-bottom: 10rpx;">
								<text>查询物料为</text>
								<text style="margin: 0 10rpx;">:</text>
								<text style="color:#222222">{{specifications}}</text>
							</view>
							<view style="padding-bottom: 10rpx; display: flex;">
								<view style="width: 140rpx;text-align-last: justify;">物料编码</view>
								<view style="margin: 0 10rpx;">:</view>
								<view style="color:#222222" >{{materialNumber}}</view>
							</view>
							<view style="padding-bottom: 10rpx; display: flex;">
								<view style="width: 140rpx;text-align-last: justify;">物料名称</view>
								<view style="margin: 0 10rpx;">:</view>
								<view style="color:#222222">{{materialName}}</view>
							</view>
							<view style="padding-bottom: 10rpx; display: flex;">
								<view style="width: 140rpx;text-align-last: justify;">库存总数</view>
								<view style="margin: 0 10rpx;">:</view>
								<view style="color:#222222">{{totalQty}}</view>
							</view>
						</view>
						<!-- 箱号详情 -->
						<view v-if="selectValue===2">
							<view style="padding-bottom: 10rpx; display: flex;">
								<view>查询箱号为</view>
								<view style="margin: 0 10rpx;">:</view>
								<view style="color:#4178D5" @click="goInventory()">{{boxBillNo}}</view>
							</view>
							<view style="padding-bottom: 10rpx;display: flex;">
								<view style="width: 140rpx;text-align-last: justify;">所在仓位</view>
								<view style="margin: 0 10rpx;">:</view>
								<view style="color:#222222">{{subStock}}</view>
							</view>
							<view style="padding-bottom: 10rpx;display: flex;">
								<view style="width: 140rpx;text-align-last: justify;">库存总数</view>
								<view style="margin: 0 10rpx;">:</view>
								<view style="color:#222222">{{totalQty}}</view>
							</view>
						</view>
						<!-- 仓位详情 -->
						<view v-if="selectValue===3">
							<view style="padding-bottom: 10rpx;display: flex;">
								<view>查询仓位为</view>
								<view style="margin: 0 10rpx;">:</view>
								<view style="color:#222222">{{subStock}}</view>
							</view>
							<view style="padding-bottom: 10rpx;display: flex;">
								<view style="width: 140rpx;text-align-last: justify;">库存总数</view>
								<view style="margin: 0 10rpx;">:</view>
								<view style="color:#222222">{{totalQty}}</view>
							</view>
						</view>
						<view style="font-weight: 900;padding-top: 10rpx;padding-bottom: 12rpx;color:#222222">
							库存详情 : 
						</view>
					</view>
					<!-- 库存详情表格 -->
					<!-- 物料 -->
					<view class="th-item" v-if="selectValue===1" >
						<view class="th br" style="width: 210rpx;">箱号</view>
						<view class="th br" style="width: 360rpx;">仓位</view>
						<view class="th" style="width: 80rpx;">数量</view>
					</view>
					<!-- 箱号 -->
					<view class="th-item" v-if="selectValue===2">
						<view class="th br" style="width: 570rpx;">规格型号</view>
						<view class="th" style="width: 80rpx;">数量</view>
					</view>
					<!-- 仓位 -->
					<view class="th-item" v-if="selectValue===3">
						<view class="th br" style="width: 210rpx;">箱号</view>
						<view class="th br" style="width: 360rpx;">规格型号</view>
						<view class="th" style="width: 80rpx;">数量</view>
					</view>
				</view>
			</template>
			<!-- border-bottom-left-radius: 12rpx;border-bottom-right-radius: 12rpx; -->
			<view  :class="dataList.length ? 'c-box':'c-box1'">
				<!-- 物料 -->
				<view v-if="selectValue===1">
					<view class="td-item" v-for="(item,index) in dataList" :key="index" >
						<view class="td br wd"  style="width: 210rpx;color:#4178D5" @click="goInventory(item)">{{item.boxBillNo}}</view>
						<view class="td br wd"  style="width: 360rpx;">{{item.subStock}}</view>
						<view class="td wd"  	style="width: 80rpx;">{{item.qty}}</view>
					</view>
				</view>
				<!-- 箱号 -->
				<view v-if="selectValue===2">
					<view class="td-item" v-for="(item,index) in dataList" :key="index" >
						<view class="td br wd" style="width: 570rpx;">{{item.specifications}}</view>
						<view class="td wd"  	style="width: 80rpx;">{{item.qty}}</view>
					</view>
				</view>
				<!-- 仓位 -->
				<view v-if="selectValue===3">
					<view class="td-item" v-for="(item,index) in dataList" :key="index" >
						<view class="td br wd" style="width: 210rpx;color:#4178D5" @click="goInventory(item)">{{item.boxBillNo}}</view>
						<view class="td br wd" style="width: 360rpx;">{{item.specifications}}</view>
						<view class="td wd" style="width: 80rpx;">{{item.qty}}</view>
					</view>
				</view>
			</view>
			
		</z-paging>
	</view>
	
</template>

<script>

	export default {

	    data() {
	        return {
				navHeight:0,
				formHeight:0,
				options:[
					{value:1,text:'物料'},
					{value:2,text:'箱号'},
					{value:3,text:'仓位'}
				],
				selectValue:1,//下拉框值
				materialName:"",//物料名称
				materialNumber:"",//物料编码
				specifications:"",//规格型号
				totalQty:"",//总数量
				subStock:"",//仓位名称
				boxBillNo:"CTN00051426",//箱号
				dataList: [],//列表数据
	            focusTag: '', //  判断聚焦
	            warehouseName: '', // 选择后的仓库名称
	            warehouseCode: '', // 选择后的仓库编码
				warehouseList:[],//仓库列表数据
				inputVal:'',//input输入值
				timer:null,
				inputWidth:0,
				timer1:null,
	            APPdevice: uni.getStorageSync('devicePixelRatio'), // 缓存设备的像素比用来区分普通安卓normalAnroid还是pda
	            scanTracker: {
	                lastScanTime: 0,
	                lastScanCode: null
	            } // 源头处理扫码段时间内重复扫
	        };
	    },
	   
	    onReady() {
			this.getElHeight(".sh_gdInfo",1)
			this.getElHeight(".mianheade",2)
			/* #ifdef H5 */
			this.inputWidth = '450rpx'
			/*#endif*/
			/*#ifdef APP-PLUS*/
			this.inputWidth = '402rpx'
			/*#endif*/
			console.log(this.inputWidth,'=this.inputWidth')
			
	    },
	    onLoad() {
	        //获取广播扫码监听
	        this.$broadcastScan.init(this.getScancode);
	        this.$broadcastScan.start();
	        this.stopScanCode();
	        this.startScanCode();
			this.getStock()
			// this.$refs.paging.complete([]);
			// this.queryList(1,10);
			
	    },
	    onHide() {
	        this.$broadcastScan.stop();
	        this.stopScanCode();
			
	    },
	    onShow() {
	        this.$broadcastScan.start();
	        this.startScanCode();
	    },
	    onBackPress(e) {
	        this.$util.appgoBack(e, 'otherUnderwearIndex');
	        return true;
	    },
	  
		watch: {
			inputVal(n) {
				if(!n) {
					this.dataList=[]
					//表格刷新
					this.tableReload()
					return 
				}
		    },
		    
		},
		methods: {
			//获取元素高度
			getElHeight(el,type){
				this.$nextTick(()=>{
					uni.createSelectorQuery().select(el).boundingClientRect((data) => {
						if (data) {
							if(type===1) {
								
								/* #ifdef H5 */
								this.navHeight = data.height
								/*#endif*/
								/*#ifdef APP-PLUS*/
								this.navHeight = data.height+20
								/*#endif*/
							}else if(type===2) {
								/* #ifdef H5 */
								this.formHeight = data.height
								/*#endif*/
								/*#ifdef APP-PLUS*/
								this.formHeight = data.height+20
								/*#endif*/
							}
					    }
					}).exec();
				})	
			},
	        // 开启广播
	        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');
	        },
			// 普通安卓设备碘酒扫描图标扫描
			scanImg(type) {
			    if (this.APPdevice == 'normalAnroid') {
			        this.$util.doScanQrCode().then((res) => {
			            this.focusTag = type;
			            this.getScancode(res.result);
			        });
			    }
			},
			// 获取扫描的值
			getScancode(code, index, wlcode) {
			    // 有些PDA会自带换行符，trim函数处理下
			    this.inputVal = '';
			    this.dataList=[];
				this.inputVal= code.trim();
				//表格刷新
				this.tableReload()
			    this.queryList(1,10);
			},
			//仓库
			handleWareHouseChange(e) {
				//仓库名称
				this.warehouseName = e.name;
				//仓库code
				this.warehouseCode = e.code+`_$${e.erpOrgCode}`;
				this.tableReload()
				this.setInputTagBox()
			},

			//获取仓库数据
			getStock() {
			    this.$api.get('/SysConfig/GetUcStock').then((res) => {
			        if (res.status == 200) {
			            this.warehouseList = res.data;
			        }
			    });
			},
			//软键盘确认
			handleInputConfirm() {
				this.dataList=[];
				//表格刷新
				this.tableReload()
				this.queryList(1,10);
			},
			//清空获取的值
			clearValue(){
				this.materialName="";//物料名称
				this.materialNumber="";//物料编码
				this.specifications="";//规格型号
				this.totalQty="";//总数量
				this.subStock="";//仓位名称
				this.boxBillNo="";//箱号
				this.inputVal = "";//input输入框
				this.dataList =[];//表格数据
			},
			//表格刷新
			tableReload() {
				this.$refs.paging.reload().catch(() => {});
			},
			//下拉框改变
			hanldeSelectChange(e) {
				this.clearValue();
				//表格刷新
				this.tableReload()
				this.setInputTagBox()
			},
			//设置input聚焦
			setInputTagBox() {
				this.focusTag="";
				setTimeout(()=>{
					this.focusTag="box";
				},200)
			},
			//库存详情赋值
			setDetailsValue(data) {
				const {materialNumber,materialName,specifications,subStock,boxBillNo,totalQty} = data 
				console.log(totalQty,'=totalQty=')
				this.totalQty = totalQty ;
				this.materialNumber = materialNumber;
				this.materialName = materialName;
				this.specifications = specifications;
				this.subStock = subStock ;
				this.boxBillNo = boxBillNo;
			},
			//表格數據
			queryList(pageNo, pageSize) {
				//空值直接return
				if(!this.inputVal) {
					return
				}
				clearTimeout(this.timer1);
				//根据不同的this.selectValue值匹配不同的后端接口
				//说明:1为物料 2为箱号 3仓位
				const url = {
					1:"/Inventory/GetPagedListBoxByMaterial", 
					2:"/Inventory/GetPagedListBoxByBox",
					3:"/Inventory/GetPagedListBoxBySubStock",
				};
				//根据不同的this.selectValue的值匹配不同的参数传给后端
				const selectValCloneParams = {
					1:'materialNumber',
					2:'boxBillNo',
					3:'subStock'
				};
				//接口基本參數
				const params = {
					pageNo:pageNo,
					pageSize: 10,
					stockCode:this.warehouseCode,//仓库编码
				};
				//选择后的this.selectValue值
				let paramsItem = selectValCloneParams[this.selectValue]
				//将选择后的selectValue和用户输入的input值添加到params中
				params[paramsItem] = this.inputVal;
				this.timer1 = setTimeout(() => {
					this.$api
					    .post(url[this.selectValue],params)
					    .then((res) => {
					        if (res.status == 200) {
								//如果res.data.details是一个空数组直接返回不进行赋值操作
								// if(!res.data.totalCount) {
								// 	this.$refs.paging.complete(res.data.details);
								// 	return;
								// }
					            this.$refs.paging.complete(res.data.details);
								this.setDetailsValue(res.data)
					        } else {
					           this.$refs.paging.complete(false);
							   this.inputVal=""
							   this.setInputTagBox()
					        }
					    }).catch(res=>{
							this.$refs.paging.complete(false);
							this.inputVal=""
							this.setInputTagBox()
						})
				},1000)
			},
			handleClear() {
				this.clearValue()
				this.setInputTagBox()
			},
			//跳转到盘点
			goInventory(item) {
				let boxBillNo = item && item.boxBillNo ? item.boxBillNo:this.boxBillNo
				//跳转盘点時需要去掉warehouseCodeClone拼接的org，老接口的warehouseCodeClone是没有进行org拼接的.
				let warehouseCodeClone = JSON.stringify(this.warehouseCode)
				let warehouseCode = JSON.parse(warehouseCodeClone).split("_")[0];
				uni.navigateTo({
					url:`/pages/Inventory/index?warehouseName=${this.warehouseName}&warehouseCode=${warehouseCode}&boxBillNo=${boxBillNo}`
				})
			},
			//回退
	        goback() {
	            uni.navigateTo({
	                url: '/pages/otherUnderwear/index'
	            });
	        },
			
	    }
	};
</script>

<style lang="scss">
	@import "@/static/public.scss";
	
	.mianheade2 {
		.pagetitle {
			margin-left: 30%;
		}
	}
	.item1 {
		position: relative;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 30rpx;
	}
	
	.item1-detail {
		padding: 5rpx 15rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: white;
		background-color: #007AFF;
	}
	
	.item1-line {
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
		height: 1px;
		width: 100%;
		background-color: #eeeeee;
	}

	::v-deep .uni-select {
		border:none !important;
		height:24px;
		width: 100rpx;
		padding-right: 0;
		padding-left: 3rpx;
		text-align: center;
		margin-left: -7rpx;
	}
	.th {
		color: #505050;
		// border-right: 1rpx solid #E3E5E8;
		background-color:#F0F2F5;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10rpx;
		font-weight: 900;
		height: 44rpx;
	}

	.th-item {
		box-sizing: border-box;
		display:flex;
		font-size:13px;
		border: 1rpx solid #E3E5E8;
		border-top-left-radius: 12rpx;
		border-top-right-radius: 12rpx;
	}
	.td-item {
		box-sizing: border-box;
		display:flex;
		font-size:13px;
		border: 1rpx solid #E3E5E8;
		border-top:none;
	}
	.td {
		display: flex;
		align-items: center;
		justify-content:center; 
		text-align: center;
		min-height: 90rpx;
		background-color: #fff;
		padding: 10rpx;
	}
	.br {
		border-right: 1rpx solid #E3E5E8;
	}
	.wd {
		word-wrap: break-word;
		white-space:normal ;
		word-break: break-all;
	}
	.c-box {
		padding:0rpx 16rpx 20rpx 16rpx;
		background-color: #fff;
		margin:0 24rpx;
		border-bottom-left-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
	}
	.c-box1 {
		padding:0rpx 16rpx 20rpx 16rpx;
		background-color: #fff;
		margin:0 24rpx;
	}
</style>