<template>
  <view class="sh-content">
	  
    <view class="sh-search">
		
		<u-form labelPosition="left" :model="dataForm" class="sh-form">
			<view style="display: flex;line-height:5vh;margin-bottom: 2vh;">
			<text style="font-size: 34rpx;">台车编号:</text><input style="width: 72%; text-align: left;padding-left: 15rpx;"  class="barNo"
			v-model="dataForm.containerCode" @confirm="inputQuery()" :focus="firstFocus" ref="input" 
			type="text" placeholder="请扫描台车编号" :border="true" />
			</view>
			<view style="display: flex;line-height: 65rpx;" >
				
			<text style="font-size: 34rpx;margin-top: 3px;">选择物料:</text>
			 <select-lay  :options="datalist1" style="width: 78%;padding-left: 1vh; " 
			smoldName="ptName" slabel="ptDesc" smodel="ptName" name="name3"  svalue="id" @selectitem="queryList" 
			:value="dataForm.ptName" placeholder="请选择物料编码"> </select-lay>
			</view>
			
	
		
		<view style="display: flex;line-height: 5vh; margin-top: 2.5vh;" >
		<text style="font-size: 34rpx;">入库数量:</text><input style="width: 72%; text-align: left;padding-left: 15rpx;" v-model="dataForm.rerpQty"  
		class="barNo"  type="text" placeholder="请输入入库数量" :border="true" />
		</view>
	
		<u-button @click="handleAdd()" style="width: 75%;height:5vh;margin-left:11vh; margin-top: 2.5vh; 
		;color: black;background-color: #fafafa;">加入列表</u-button>
		<!-- background-color: rgb(31, 163, 219) -->
		</u-form>
 <!-- @input="inputQuery()" -->
    </view>
	<view class='recommend'>
	  <text class='recommend-title'>物料信息</text>
	</view>
    <!-- {{dataList}} -->
	
	<view class="all-card">

		<view class="sh-card" v-for="(item, index) in dataList" :keys="item.id" :index="item.id" v-if="dataList.length > 0"
		       style="border-radius: 20rpx; margin-bottom: 2vh;">
			<view  class="sh-card-title"   style="border-radius: 20rpx;">
				   <image src="@/static/icon/error.png" @click="delBtn(index)" 
				   style="width: 3vh;height: 3vh;position: absolute;right: 0.5vh;top:0.5vh" />
		      <view class="card-content" style="margin-top: 12px;">
		        <view class="card-content-item" width="60%">
		          <text class="item-title" >物料编号:</text>
		          <text class="item-value">{{item.rerpPart}}</text>
		        </view>
		      </view>
		     <view class="card-content">
		       <view class="card-content-item">
		         <text class="item-title">物料信息:</text>
		         <text class="item-value">{{item.ptName}}{{item.ptDesc?item.ptDesc:item.ptDesc}}</text>
		       </view>

		     </view>
		     <view class="card-content">
		       <view class="card-content-item">
		         <text class="item-title">台车编号:</text>
		         <text class="item-value">{{item.containerCode}}</text>
		       </view>
	
		     </view>
		     <view class="card-content"style="margin-bottom: 12px;">
		       <view class="card-content-item">
		         <text class="item-title">缴库数量:</text>
		         <text class="item-value">{{item.rerpQty}}</text>
		       </view>
		    
		     </view> 
	
		    
		    </view>
		     </view>
	</view>

	<!-- direction="bottom" -->
	<view class="fixed-area" >
	<!-- 	    这个区域一直固定在底部 -->
			  <view class="bottom">
				<u-modal v-model="show" @confirm="confirm" :show-cancel-button="true" 
				:content="content" ref="uModal" :async-close="true"></u-modal>
			  	<button width="70%" @click="enterInstore()" type="primary" style="background-color: #19be6b;">确认入库</button>
			  </view>
				  	
		    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        showDiv:false,
		checkFlag:false,
        queryFlag: '',
        dataForm: {
          // pageNum: 1,
          // pageSize: 10,
		  ptPart:''
        },
        dataList: [
			{
				rerpPart:'222222',
				ptName:'ptName',
				containerCode:'11111',
				rerpQty:'15'
			},		
			{
				rerpPart:'222222',
				ptName:'ptName',
				containerCode:'11111',
				rerpQty:'15'
			},		
			{
				rerpPart:'222222',
				ptName:'ptName',
				containerCode:'11111',
				rerpQty:'15'
			}
			
		],
		datalist1:[],
        query: {
          current: 1,
          size: 20
        },
		containerCode:'',
		//入库数量
		rerpQty:'',
        loadStatus: 'loadmore',
        dicOptions: [],
		pickUpObj:{
			isCall:'',
			containerCode:'',
			moldBarcodeList:[],

		},
		timer:0,
		moldBarcodeList:[],
		show: false,
		content: '',
		isChecked: false,
		firstFocus:false
      }

    },
	onReady() {
		// const setTitleText = (rightButton,width='auto') => {
			// let pages = getCurrentPages();
			// let page = pages[pages.length - 1];
			// // #ifdef APP-PLUS
			// let currentWebview = page.$getAppWebview();
			// let titleObj = currentWebview.getStyle().titleNView;
			// if (!titleObj.buttons) {
			// 	return;
			// }
			// titleObj.buttons[0].text = rightButton;
			// if (rightButton) {
			// 	titleObj.buttons[0].width = width;
			// }else{
			// 	titleObj.buttons[0].width = 0;
			// }
			// //修改文字
			// currentWebview.setStyle({
			// 	titleNView: '你好'
			// });
			// // #endif
	},
		onLoad(options) {
	// console.log(this.$u.api.getItemInInfoByContainerType());
	// this.$u.api.getItemDataInfo().then(res=>{
	// 	console.log(res);
	// 	this.datalist=res.data
	// })

    },

    //上拉刷新(当数据距离底部100时触发，距离在pages.json配置)
    onReachBottom() {
      this.loadStatus = "loading";
      setTimeout(() => {
        this.dataForm.pageNum += 1;
        // this.loadList();
      }, 100);
    },
	
	 onPullDownRefresh () {
	    this.list = []
	    //调用获取数据方法
	    // this.getData()
	    setTimeout(() => {
	        //结束下拉刷新
	      uni.stopPullDownRefresh ();
	    }, 1000);
	},
		
    methods: {
		//下拉框
		queryList(index,item){
			// console.log(item.ptPart);
			this.dataForm.ptPart=item.ptPart
			this.dataForm.ptName=item.ptName
			this.dataForm.ptDesc=item.ptDesc
		},
		checkboxChange(){
			this.checkFlag=!this.checkFlag
			this.pickUpObj.isCall=(this.checkFlag?1:-1)
		},
		handleContainCode(){
		
		},
      /**搜索框查询*/
      inputQuery() {
        if (this.dataForm.containerCode == '' || this.dataForm.containerCode == null || this.dataForm.containerCode ==
          undefined ) {
			  // console.log(222);
          return
        }else{
			this.handleContainerId()
		}

      },
	  //呼叫托盘
	  onNavigationBarButtonTap(e){
	  		  e.text=111
			  this.$u.api.mouldStorage.callEmptyContainer().then(res=>{
			  if(res.code==200){
				  this.$u.toast("已呼叫空托盘");
			  }
			  })

	  },
	  //删除单个
	  delBtn(index){
	  	this.dataList.splice(index,1)
	  },
	  
	  handleAdd(){
		  if(this.dataForm.containerCode == null
		  || this.dataForm.containerCode === '' 
		  || this.dataForm.containerCode === 0
		  || this.dataForm.containerCode === undefined
		  || this.dataForm.containerCode ==='undefined'){
		  	this.$u.toast("请扫描台车编号");
		  	return; 
		  }  if(this.dataForm.ptName == null
		  || this.dataForm.ptName === '' 
		  || this.dataForm.ptName === 0
		  || this.dataForm.ptName === undefined
		  || this.dataForm.ptName ==='undefined'){
		  	this.$u.toast("请选择物料");
		  	return; 
		  }  
		  if(this.dataForm.rerpQty == null
		  || this.dataForm.rerpQty === '' 
		  || this.dataForm.rerpQty === 0
		  || this.dataForm.rerpQty === undefined
		  || this.dataForm.rerpQty ==='undefined'){
		  	this.$u.toast("请输入入库数量");
		  	return; 
		  }
		  // let {ptPart }=this.dataForm
		  if(this.dataList.length>0){
			  let length=0
			  this.dataList.forEach(item=>{
				  if(item.rerpPart==this.dataForm.ptPart){
					   this.$u.toast("条码重复，请重新添加");
				  }else{
					  length++
				  }	 
			  })
			if(length==this.dataList.length){
				this.dataList.push({rerpPart:this.dataForm.ptPart,ptName:this.dataForm.ptName,ptDesc:this.dataForm.ptDesc,inType:'1', rerpQty:this.dataForm.rerpQty,containerCode:this.dataForm.containerCode})  
			}
						
		  }else{
			  this.dataList.push({rerpPart:this.dataForm.ptPart,ptName:this.dataForm.ptName,ptDesc:this.dataForm.ptDesc,inType:'1',rerpQty:this.dataForm.rerpQty,containerCode:this.dataForm.containerCode})
		  }
		  
	  },
      handleContainerId() {
		  // console.log(this.dataForm
		  //防抖
		  clearInterval(this.timer)
		  this.timer =setTimeout(()=>{
		  	//节流
		  	let flag = true
		  	if(flag===false) return
		  	flag=false
		  	setTimeout(()=>{
		  		flag = true
				// let id=this.dataForm.containerId
		  this.$u.api.getItemInInfoByContainerType({containerCode:this.dataForm.containerCode}).then(res=>{
		  	this.datalist1=res.data
		  })
		  flag=false
		  	},500)
		  	
		  },400)
		  // console.log(this.$refs);
			// this.$refs.input=''
		
      },

	  //延时关闭
	  confirm() {
		  	// this.pickUpObj.containerCode=this.containerCode
			console.log(JSON.stringify(this.dataList));
	  			setTimeout(() => {
					
				  this.$u.api.saveInPlanAndItemIn(this.dataList).then(res=>{
							  if(res.code=='200'){
								  // this.$u.toast("入库完成");	
								  this.$u.toast("入库已完成，请重新扫描");
								  this.dataForm={},
								  this.dataList= [],
								  this.datalist1=[],
								  setTimeout(() => {
								  	this.$router.go(0)
								  }, 500)
							  }			  
				})
				// setTimeout(()=>{
				// 	this.$router.go(0)
				// },800)
				
	  				// 3秒后自动关闭
	  				this.show = false;
					
	  			},300)
	  		},
			
	  //确认入库
	  enterInstore(){
			
		if(this.dataList.length<3){
			  this.content='确定要入库吗'
			    this.show = true;
		  }else{
			   	this.pickUpObj.containerCode=this.containerCode
			 setTimeout(()=>{
				 this.$u.api.saveInPlanAndItemIn(this.dataList).then(res=>{
				 			  if(res.code=='200'){
				 				  this.$u.toast("入库已完成，请重新扫描");
								  this.dataForm={},
								  this.dataList= [],
								  this.datalist1=[],
								  setTimeout(() => {
								  	this.$router.go(0)
								  }, 500)
				 			  }			  
				 })
			 },100)
			

		  }
		
		    
	  },
	  //异常
	  abnormal(){
	  },
      // 任务查看
      searchClick() {
        // this.$u.route({
        // 	url: 'pages/onShelf/taskView',
        // 	type: 'navigateTo'
        // })
        this.dataList = [];
        this.dataForm.pageNum = 1;
        this.loadList();
      },
    },
	filters: {
	  formatType(value) {
	    switch (Number(value)) {
	      case 0:
	        return "type1";
	      case 1:
	        return "type2";
	      case 2:
	        return "type3";
	      default:
	        return "";
	    }
	  }}
  }
</script>

<style lang="scss">
  @import "index.scss";
  .footer {
    display: flex;
    padding: 20rpx 0;
  }
</style>
