<template>
 	<view class="">
 		<uni-collapse @change="handleChange" ref="collapse1"  style="background-color: #fff; border-radius: 20rpx;">
			
 			<uni-collapse-item  :open="isShow">
				<template v-slot:title>
					<view class="" style="font-size: 35rpx; font-weight: bold; margin: 20rpx;">
						目标托标签信息
					</view>
				</template>
				
 				<view class='split_line'></view>
				
				<view class="" style="width: 100%; margin-bottom: 20rpx;">
					<view class="uni-flex uni-row" style=" align-items: center;margin-left: 30rpx;  margin-top: 10rpx;">
						<view style="font-size: 32rpx; width: 25%;  margin-top: 15rpx; margin-bottom: 15rpx;" >目标托码 : </view>
						<view class="uni-flex uni-row" style="margin-left: 10rpx; width: 80%;">
							<view class="" style="width: 85%; height: 60rpx; font-size: 30rpx; padding: 10rpx; border: 1rpx solid darkgray; border-radius: 10rpx; font-size: 30rpx;">
								{{toPackingNumber}}
							</view>
							<!-- <uni-easyinput  v-model="toPackingNumber"  :disabled="true" placeholder="请扫描目标托码,非必填项" > </uni-easyinput> -->
						<u-icon v-if="isShowToPackingNumber" style="margin-left: -50rpx;color: darkgray;"  name="close-circle-fill" size="45" @click="clearPalletCode"></u-icon>
						<u-icon name="scan"  style="margin-left: 10rpx;color: darkgray; " @click="showPalletLabel" size="50"></u-icon>
						</view>
					</view>
					<view class='split_line'></view>
				</view>
 					<view class="" style="margin-bottom: 20rpx;">
 						<view class="uni-flex uni-row" style="align-items: center;margin-left: 30rpx; justify-content: space-between; margin-top: 10rpx;">
 							<view style="font-size: 32rpx;" >托包装规格 : </view>
 							<view class="" style="margin-left: 10rpx; width: 70%;">
								<view class="" v-if="isShowToPackingNumber" style="margin: 10rpx;font-size: 35rpx;">
									{{toPackUnitCode}}
								</view>
 								<selectList v-if="!isShowToPackingNumber" 
								:candidates="toPackList" 
								:inputDisabled="true" 
								 placeholder="请选择目标包装规格"
								 v-model="toPackUnitCode"
								  @input="selectPack"
								  ></selectList>
 							</view>
 						</view>
 						<view class='split_line'></view>
 					</view>
 					
 					<view class="" style="margin-bottom: 20rpx;">
 						<view class="uni-flex uni-row" style="align-items: center;margin-left: 30rpx; justify-content: space-between; margin-top: 10rpx;">
 							<view style="font-size: 32rpx;" >托包装数量 : </view>
 							<view class="" style="margin-left: 10rpx; margin-bottom: 10rpx;">
								<text style="font-size: 35rpx;color: darkgray;">{{packQty}}</text>
								<text style="font-size: 25rpx; color: darkgray;">{{uom}}</text>
 							</view>
 						</view>
 						<view class='split_line'></view>
 					</view>
 					<view class="" style="margin-bottom: 20rpx;">
 						<view class="uni-flex uni-row" style="align-items: center;margin-left: 30rpx;  margin-top: 10rpx;">
 							<view style="font-size: 32rpx;" >
								<text>批次 :</text>
								<text v-show="false">批次</text> </view>
 							<view class="uni-flex uni-row" style="margin-left: 10rpx;">
								<view class="" v-if="isShowToPackingNumber" style="margin: 10rpx;font-size: 35rpx;">
									{{batch}}
								</view>
								
								<uni-easyinput v-if="!isShowToPackingNumber" v-model="batch" :disabled="isBatchDisabled" placeholder="请输入批次" > </uni-easyinput>
 							</view>
 						</view>
 						<view class='split_line'></view>
 					</view>
					
					
					
 					<view class="" style="margin-bottom: 20rpx;">
 						<view class="uni-flex uni-row" style="align-items: center;margin-left: 30rpx; justify-content: space-between; margin-top: 10rpx;">
 							<view style="font-size: 32rpx;" >状态 : </view>
 							<view class="" v-if="toInventoryStatus" style="margin-left: 10rpx; ">
 								<balanceStatus ref="balanceStatus" 
								:isShowStatusPoint="true"
								:status="toInventoryStatus" :allowEdit='isEdit'
 									@updateStatus="updateStatus" >
 								</balanceStatus>
 							</view>
 						</view>
 						<view class='split_line'></view>
 					</view>
					
					<view class="" style="width: 100%; margin-bottom: 20rpx;">
						<view class="uni-flex uni-row" style=" align-items: center;margin-left: 30rpx;  margin-top: 10rpx;">
							<view style="font-size: 32rpx; width: 25%;  margin-top: 15rpx; margin-bottom: 15rpx;" >库位 : </view>
							<view class="uni-flex uni-row" style="margin-left: 10rpx; width: 80%;">
								<view class="" style="width: 85%; height: 60rpx; font-size: 30rpx; padding: 10rpx; border: 1rpx solid darkgray; border-radius: 10rpx; font-size: 30rpx;">
									{{toLocationCode}}
								</view>
								<!-- <uni-easyinput  v-model="toPackingNumber"  :disabled="true" placeholder="请扫描目标托码,非必填项" > </uni-easyinput> -->
							<u-icon v-if="isShowToPackingNumber&&toLocationCode" style="margin-left: -50rpx;color: darkgray;"  name="close-circle-fill" size="45" @click="clearToLocationCode"></u-icon>
							<u-icon name="scan"  style="margin-left: 10rpx;color: darkgray; " @click="showLocation" size="50"></u-icon>
							</view>
						</view>
						<view class='split_line'></view>
					</view>
					
 		
 			</uni-collapse-item>
 		</uni-collapse>
		<winScanLocation ref="scanPopupLoc" title="库位代码" @getLocation='getScanCode'></winScanLocation>
		<winComScanBalanceBind  ref="scanPopupBind" title="托标签"
		:bussinessCode="bussinessCode"
		 @getBalance="getScanResult"
		 :isTargetScan="true"></winComScanBalanceBind>
		<comMessage ref="comMessage"></comMessage>
	</view>
	
 </template>

 <script>
	 import {
	 	getPackUnitByItemCode
	 } from '@/api/request2.js';
	 
	 import selectList from '@/mycomponents/list/selectList.vue'
	 import balanceStatus from '@/mycomponents/status/balanceStatus.vue'
	 import winScanLocation from '@/mycomponents/scan/winScanLocation.vue'
	 import winComScanBalanceBind from '@/mycomponents/scan/winComScanBalanceBind.vue'
	 
	 
 	export default {
 		components: {
			selectList,
			balanceStatus,
			winScanLocation,
			winComScanBalanceBind
 		},
 		data() {
 			return {
				// toPackingNumber:"",//目标托码
				toPackingNumber:"请扫描目标托码,非必填项",//目标托码
				toPackUnitCode:"", //目标包装规格
				packQty:"",
				uom:"",
				batch:"",
				toInventoryStatus:"",
				toLocationCode:"",
				toPackList:[],
				toPackInfoList:[],
				isBatchDisabled:false,
				isLocationDisabled:true,
				isEdit:true,
				isShow:false,
				itemCode:""
				
			};
 		},

 		props: {
 			dataContent: {
 				type: Object,
 				default: {}
 			},
			businessType: {
				type: Object,
				default: {}
			},
			bussinessCode: {
				type: String,
				default: ""
			},
			
			showItemInfo:{
				type: Object,
				default: {}
			}
			
 		},
		computed:{
			isShowToPackingNumber(){
				return this.toPackingNumber!="请扫描目标托码,非必填项"
			}
		},
		watch:{
			
		},
		

 		methods: {
			isShowCollapse(){
				this.isShow=true
			},
			handleChange(e){
				//点击展开
				if(e.length>0){
					uni.showLoading({
						title:"加载中...",
						mask:true
					})
					this.itemCode =this.showItemInfo.itemCode
					getPackUnitByItemCode(this.itemCode).then(res=>{
						uni.hideLoading()
						if(res.data.list&&res.data.list.length>0){
							this.toPackInfoList =res.data.list
							res.data.list.forEach(item=>{
								this.toPackList.push(item.packUnit)
							})
						}
					}).catch(error=>{
						uni.hideLoading()
						this.showErrorMessage(error)
					})
					
					if(this.showItemInfo){
						if(!this.toPackUnitCode){
							this.toPackUnitCode=this.showItemInfo.packUnit
						}
						
						if(!this.packQty){
							this.packQty=this.showItemInfo.packQty
						}
						
						if(!this.uom){
							this.uom=this.showItemInfo.uom
						}
						
						if(!this.batch){
							this.batch=this.showItemInfo.batch
						}
						if(!this.toInventoryStatus){
							this.toInventoryStatus=this.showItemInfo.inventoryStatus
						}
						
						if(!this.toLocationCode){
							this.toLocationCode=this.showItemInfo.locationCode
						}
					}
					
				}
			},
			//扫描之后设置按钮不可编辑 
			//true 不可编辑，false 可编辑
			setDisable(isDisable){
				this.isBatchDisabled=isDisable,
				this.isLocationDisabled=!isDisable,
				this.isEdit=!isDisable
			},
			updateStatus(value) {
				this.toInventoryStatus = value
			},
			selectPack(value){
				this.toPackUnitCode=value
				var toPackInfo = this.toPackInfoList.find(r=>r.packUnit==this.toPackUnitCode)
				this.packQty  =toPackInfo?.packQty
				this.uom=toPackInfo?.uom
			},
			
			getScanResult(result){
				let balance = result.balance;
				var data =result.balance.packageList[0];
				if(this.itemCode!=balance.itemCode){
					this.showErrorMessage("扫描物料["+balance.itemCode+"]与绑定物料["+this.itemCode+"]不一致")
				}
				
				this.toPackUnitCode =data.packUnit;
				this.packQty =data.packQty
				this.uom =data.uom;
				this.batch =data.batch;
				this.toPackingNumber =data.packingNumber
				this.toInventoryStatus =data.inventoryStatus
				this.toLocationCode =data.locationCode
				
				this.setDisable(true)
			},
			
			getData() {
				var data={
					itemCode:this.itemCode,
					toPackingNumber:this.toPackingNumber,
					packQty:this.packQty,
					packUnit:this.toPackUnitCode,
					batch:this.batch,
					toInventoryStatus:this.toInventoryStatus,
					toLocationCode:this.toLocationCode,
					isCheck:true
				}
				
				if(!data.packUnit){
					this.showErrorMessage("请填写托包装规格")
					data.isCheck=false;
					return data;
				}
				
				if(!data.packQty){
					this.showErrorMessage("请填写托包装数量")
					data.isCheck=false;
					return data;
				}
				
				if(!data.batch){
					this.showErrorMessage("请填写批次")
					data.isCheck=false;
					return data;
				}
				
				if(!data.toInventoryStatus){
					this.showErrorMessage("请填写状态")
					data.isCheck=false;
					return data;
				}
				
				if(!data.toLocationCode){
					this.showErrorMessage("请填写库位")
					data.isCheck=false;
					return data;
				}
				
				return data;
			},
			
			showLocation(){
				this.$refs.scanPopupLoc.openScanPopup();
			},
			
			showPalletLabel(){
				this.$refs.scanPopupBind.openScanPopup(this.businessType);
			},
			getScanCode(location, code){
				this.toLocationCode=code
			},
			clearPalletCode(){
				this.toPackingNumber="请扫描目标托码,非必填项"
				this.toPackUnitCode="", //目标包装规格
				this.packQty="",
				this.uom="",
				this.batch="",
				this.toInventoryStatus="",
				this.toLocationCode=""
				this.toPackInfoList=[]
				this.toPackList=[]
				this.itemCode=""
				this.setDisable(false)
			},
			clearToLocationCode(){
				this.toLocationCode=""
			},
			showErrorMessage(message){
				this.$refs.comMessage.showErrorMessage(message, res => {
					if (res) {
					}
				});
			},
			
			
 		}
 	}
 </script>

 <style scoped>
	>>>.uni-easyinput__content-input {  
	        font-size: 50rpx;  
	    }  

 </style>
