<!-- 出库箱查询 -->
<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: outboundOrderNumber }" :style="{ 'pointer-events': outboundOrderNumber ? '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="it itsp">
					        <text class="t1">
					            <text class="redtag">*</text>
					            出库单号:
					        </text>
					       <w-select
					            style="margin-left: 20rpx; flex: 1"
					            v-model.trim="outboundOrderNumber"
					            defaultValue="模糊搜索"
					            :list="outboundOrderList"
								   valueName="billNo"
								   keyName="billNo"
								@change="handleOutboundOrderChange"
								:showClose="true"
								:focus="focusInput == 'outboundOrderNumber'"
								@focus="focusInput = 'outboundOrderNumber'"
								:filterable="filterable"
								:pagingSet="isPagingSet"
								:wselectTotal="total"
								@onBottomPage="onBottomPage"
								:pageNo="pageNo"
								:loadingFlag="loadingFlag"
								@clearnFn="clearnFn"
								selectTag="ckfsWselect"     
					        ></w-select>
					    </view>
					</view>
				</view>
				<!-- 分割 -->
				<view :style="{height:navHeight+formHeight+30+'rpx'}"></view>
				<view class="th-box" >
					<view class="th-item" style="" >
						<view class="th br" style="width: 80rpx;">序号</view>
						<view class="th br" style="width: 250rpx;">箱号</view>
						<view class="th " style="width: 330rpx;">规格型号</view>
					<!-- 	<view class="th" style="width: 140rpx;">出库数量</view> -->
					</view>
				</view>
			</template>
			<!-- border-bttom-radius: 12rpx; -->
			<view :class="dataList.length ? 'td-box1' :'td-box'">
				<view class="td-item" style="" v-for="(item,index) in dataList" :key="index" >
					<view  class="td br wd" style="width: 80rpx;">{{item.indexNumber}}</view>
					<view  class="td br wd" style="width: 250rpx;">{{item.boxBillNo}}</view>
					<view  class="td wd" style="width: 330rpx;">{{item.specifications}}({{item.qty}})</view>
					<!-- <view  class="td wd" style="width: 140rpx;">{{item.qty}}</view> -->
				</view>
			</view>
		</z-paging>	
	</view>
	
</template>

<script>
	export default {
	    data() {
	        return {
	            navHeight:0,
	            formHeight:0,
				dataList:[],
				focusInput: '', //自动聚焦
				outboundOrderList:[],//出库单号列表
				outboundOrderNumber:'',//出库单号
				isPagingSet: true, // 是否开启出库单下拉分页
	            warehouseName: '', // 选择后的仓库名称
	            warehouseCode: '', // 选择后的仓库编码
				warehouseList:[],//仓库列表数据
				loadingFlag: 0, //分頁提示
				pageNo: 1,//分页
				filterable: true,
				total:0,//出库单号列表数量
				timer:null,
				timer1:null,
	        };
	    },
	   
	    onReady() {
	    	this.getElHeight(".sh_gdInfo",1)
	    	this.getElHeight(".mianheade",2)
	    },
	    onLoad() {
			this.getStock();
	    },
	    onBackPress(e) {
			//物理设备返回按钮,otherUnderwearIndex是返回当前/otherUnderwear/index下
	        this.$util.appgoBack(e, 'otherUnderwearIndex');
	        return true;
	    }, 
	  
		watch: {
		    outboundOrderNumber(n) {
				if(!n) {
					this.tableReload()
					return 
				}
				this.pageNo = 1;
				this.outboundOrderList=[]
				this.getOutboundOrderData(n)
		    },
		},
		methods: {
			//获取元素高度
			getElHeight(el,type){
				this.$nextTick(()=>{
					uni.createSelectorQuery().select(el).boundingClientRect((data) => {
						if(type===1) {
							
							/* #ifdef H5 */
							this.navHeight = data.height
							/*#endif*/
							/*#ifdef APP-PLUS*/
							this.navHeight = data.height+14
							/*#endif*/
						}else if(type===2) {
							/* #ifdef H5 */
							this.formHeight = data.height
							/*#endif*/
							/*#ifdef APP-PLUS*/
							this.formHeight = data.height+14
							/*#endif*/
						}
					}).exec();
				})	
			},
			//根据出库单号获取对应的下拉数据
			getOutboundOrderData(val) {
				// this.outboundOrderList=[]
			    clearTimeout(this.timer);
			    this.isPagingSet = false;
			    if (this.outboundOrderList.length >= this.total && this.pageNo >= 2) {
			        this.loadingFlag = 2;
			        return;
			    }
			    this.timer = setTimeout(() => {
			        this.$api
			            .post('/OutStockTask/GetOutStockTaskNosByNoBox', {
			                billNo: val,
			                pageSize: 10,
			                pageNo: this.pageNo,
			                stockCode: this.warehouseCode
			            })
			            .then((res) => {
			                if (res.status == 200) {
			                    this.total = res.totalCount;
			                    let newarr = res.data.map((item) => {
			                        return {
			                            billNo: item
			                        };
			                    });
								 // this.outboundOrderList.concat(newarr);
								this.outboundOrderList = [...this.outboundOrderList,...newarr]
			                    this.isPagingSet = true;
			                    this.loadingFlag = 1;
			                } else {
			                    this.isPagingSet = true;
			                    this.total = res.totalCount;
								console.log('走到了这里吗')
								this.outboundOrderList=[]
			                }
			            }).catch(err=>{
							this.outboundOrderList=[]
						})
			    }, 1000);
			},
			//仓库
			handleWareHouseChange(e) {
				this.warehouseName = e.name;
				this.warehouseCode = e.code+`_$${e.erpOrgCode}`;
				this.outboundOrderList=[]
				// this.$refs.paging.complete([]);
				this.tableReload()
				this.getOutboundOrderData(this.outboundOrderNumber);
				this.focusInput=""
				//选择仓库后获取该仓库的出库单号
				setTimeout(()=>{
					this.focusInput="outboundOrderNumber"
				},300)
	
			},
	        //出库单号改变
			handleOutboundOrderChange(e){
				console.log(this.outboundOrderNumber,'=outboundOrderNumber=')
				this.queryList(1,10)
			},
			//表格刷新
			tableReload() {
				this.$refs.paging.reload().catch(() => {});
			},
			//清空出库单号值
			clearnFn(val) {
				this.outboundOrderNumber=''
				this.outboundOrderList=[]
				// this.$refs.paging.complete([]);
				this.tableReload()
				this.focusInput=""
				//选择仓库后获取该仓库的出库单号
				setTimeout(()=>{
					this.focusInput="outboundOrderNumber"
				},300)
				this.getOutboundOrderData(this.outboundOrderNumber);
			
			},
			// 出库订单号查询分页
			onBottomPage(val) {
			    this.pageNo = val;
			    this.loadingFlag = 1;
			    this.getOutboundOrderData(this.outboundOrderNumber);
			},
			//获取仓库数据
			getStock() {
			    this.$api.get('/SysConfig/GetUcStock').then((res) => {
			        if (res.status == 200) {
			            this.warehouseList = res.data;
			        }
			    });
			},
			//请求时非200情况下z-paging组件设置和本地数据重置
			setRefsPagingComplete() {
				this.$refs.paging.complete(false);
				this.outboundOrderNumber=""
				this.focusInput="outboundOrderNumber"
			},
			//获取单号下的数据
			queryList(pageNo, pageSize) {
				if(!this.outboundOrderNumber) {
					return
				}
				clearTimeout(this.timer1);
				const params = {
					pageNo:pageNo || 1,
					pageSize: 10,
					billNo:this.outboundOrderNumber,
				};
				this.timer1 = setTimeout(() => {
					this.$api
					    .post(`/OutStockTask/GetInfoByNo`,params)
					    .then((res) => {
					        if (res.status == 200) {
					            this.$refs.paging.complete(res.data.details);
					        } else {
								this.$refs.paging.complete(false);
								this.setRefsPagingComplete()
					        }
					    }).catch(res=>{
								this.setRefsPagingComplete()
						})
				},1000)
				
			},
			//回退
	        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;
	}
	.table--border {
		// border:1rpx solid red 
	}
	
	.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-box {
		margin: 0 24rpx; 
		padding:20rpx 20rpx 0 20rpx; 
		background-color: #fff;
		border-top-left-radius: 12rpx;
		border-top-right-radius: 12rpx;
	}
	.th-item {
		box-sizing: border-box;
		display:flex;
		font-size:13px;
		border: 1rpx solid #E3E5E8;
		border-top: 1rpx solid #E3E5E8;
		border-top-left-radius: 12rpx;
		border-top-right-radius: 12rpx;
	}
	.td-box {
		margin: 0 24rpx;
		padding:0 20rpx 20rpx 20rpx;
		background-color: #fff;
		// border-bottom-left-radius: 12rpx;
		// border-bottom-right-radius: 12rpx;
	}
	.td-box1 {
		margin: 0 24rpx;
		padding:0 20rpx 20rpx 20rpx;
		background-color: #fff;
		border-bottom-left-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
	}
	.td-item {
		box-sizing: border-box;
		display:flex;
		font-size:13px;
		border: 1rpx solid #E3E5E8;
		border-top:none;
		border-bottom-left-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
	}
	.td {
		display: flex;
		align-items: center;
		justify-content:center; 
		text-align: center;
		min-height: 140rpx;
		background-color: #fff;
		padding: 10rpx;
		// border-right: 1rpx solid #E3E5E8;
		// border-left: 1rpx solid #E3E5E8;
	}
	.br {
		border-right: 1rpx solid #E3E5E8;
	}
	.wd {
		word-wrap: break-word;
		white-space:normal ;
		word-break: break-all;
		
	}
</style>