<template>
	<view>
		<u-navbar back-text="返回" title="立库AGV入库" :background="background"></u-navbar>
		<u-form ref="testForm">
			<u-form-item :border-bottom="false">
				<p>扫描条码:</p>
				<u-input :border="true" v-model="barCode" placeholder="请扫描条码" :focus="focusBarCode" @confirm="ship" />
			</u-form-item>
			<u-form-item :border-bottom="false">
				<picker>
					<div class="row">
						<div class="col">
							<label>物料属性：{{this.MATERIALSPECNAME}}</label>
							<!-- <label class="value">{{this.MATERIALSPECNAME}}</label> -->
						</div>
						<div class="col">
							<label>物料规格：{{this.SPECNAME}}</label>
							<!-- <label class="value">{{this.SPECNAME}}</label> -->
						</div>
						<div class="col">
							<label>物料数量：{{this.QTY}}</label>
							<!-- <label class="value">{{this.QTY}}</label> -->
						</div>
					</div>
					<div class="row">
						<div class="col">
							<label>阶段：{{this.PHASE}}</label>
							<!-- <label class="value">{{this.PHASE}}</label> -->
						</div>
						<div class="col">
							<label>入库库位：{{this.ERPLOCATIONNAME}}</label>
							<!-- <label class="value">{{this.ERPLOCATIONNAME}}</label> -->
						</div>
						<div class="col">
							<label>物料单位：{{this.UNIT}}</label>
							<!-- <label class="value">{{this.UNIT}}</label> -->
						</div>
					</div>
					
					<div class="row">
						<div class="col">
							<label>批次号：{{this.MATERIALPACKINGNAME}}</label>
							<!-- <label class="value">{{this.MATERIALPACKINGNAME}}</label> -->
						</div>
					</div>
				</picker>
			</u-form-item>
			<u-form-item class="item2">
				<p>绑定卷芯:</p>
				<u-input placeholder="请绑定卷芯" :border="true" v-model="DURABLENAMECode" @confirm="TRAYNAMEShip" />
			</u-form-item>
			 <u-form-item label="起始点">  
				 <zxzUniDataSelect filterable v-model="INITILATION" :localdata="items_In"></zxzUniDataSelect>
			  </u-form-item>  
			  <u-form-item label="目的点"> 
			       <zxzUniDataSelect filterable v-model="ENDING" :localdata="items_En"></zxzUniDataSelect>  
			   </u-form-item> 
			   <u-form-item label="A/B轴">
			      <select v-model="AB">  
			        <option value="A">A轴</option>  
			        <option value="B">B轴</option>  
			      </select>  
			    </u-form-item> 
		</u-form>
		<u-button @click="SendTransportTask" type="primary">确定</u-button>


	</view>
</template>

<script>
	import { removeZeros } from "@/utils/utils"
	import zxzUniDataSelect from "@/components/zxz-uni-data-select/zxz-uni-data-select.vue"
	export default {
		components: {
			zxzUniDataSelect  
		},  
		data() {
			return {
				items_In:[],
				items_En:[],
				INITILATION:'',//起始点
				ENDING:'',//目的地
				AB:'',//AB轴
				ERPLOCATIONNAME : '', //库位信息
				RECEIVERREQUESTNAME : '', //入库单号
				tabH: 800, //表格的宽度
				MATERIALSPECNAME: '',
				UNIT : '', //单位
				PHASE: '',//阶段
				QTY: '',//数量
				SPECNAME: '',//物料规格
				MATERIALPACKINGNAME: '',
				background: {
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				}, //返回按钮的样式
				//style:{color: '#2979FF'},
				colors: ['#007aff', '#4cd964', '#dd524d'],
				styleType: 'button',
				current: 0,
				matData: [], //后端传回来的绑定表格的数据
				items: ['入库清单'], //分栏器的选项卡 应发，实发，待发，物料描述，行号
				colorIndex: 0,
				activeColor: '#007aff',
				loading: false,
				//-----------------上方是template标签中的分栏器等需要的样式，下方是双向绑定需要使用到的数据
				requestData: [], //材料列表
				materialKwData: [], //库位的信息	
				scanData: [], //已扫描箱
				barCode: "", //条码
				DURABLENAMECode: "", //卷芯
				focusBarCode: false, //焦点是否被选中
				focusShipRequest: true, //默认焦点在单号
				siteName: "",
				userId: "",
				//对应的材料列表下的表格，field对应后端返回了来的字段
			}
		},
		onUnload() {     
		   uni.$off('rifdscan')
		},
		onShow() {
			let that = this
			// uni.$off('rifdscan') 
			uni.$on('rifdscan', (res)=> {
				console.log('扫码结果：', res);
				that.DURABLENAMECode = res.rifd
			})
		},
		mounted() {
			this.tabH = this.$GetRemainingHeight(4, 0); //定义表格的高度
			let that = this
			uni.getStorage({
				key: "sitename",
				success(res) {
					that.siteName = res.data
				}
			})
			uni.getStorage({
				key: "userid",
				success(res) {
					that.userId = res.data
				}
			})
			this.GetLiberaryBaeIn()
			this.GetLiberaryBaeEn()
		},

		methods: {
           GetLiberaryBaeIn()
			{
				//发送请求
				this.$MyRequest('/api/ApiQuery', {
					queryId: "GetLibraryBaseIn",
					version: "00001",
					params: {
					}
				}).then(res => {
					for (let i = 0; i < res.data.data.length; i++) {
						var _Arr = res.data.data[i];
						this.items_In.push({
							text: _Arr.LABEL,
							value: _Arr.VALUE
						});
					}
				}).catch(err => {
					this.$showMessage(err)
				})
			},
			GetLiberaryBaeEn()
						{
							//发送请求
							this.$MyRequest('/api/ApiQuery', {
								queryId: "GetLibraryBaseIn",
								version: "00002",
								params: {
								}
							}).then(res => {
									for (let i = 0; i < res.data.data.length; i++) {
										var _Arr = res.data.data[i];
										this.items_En.push({
											text: _Arr.LABEL,
											value: _Arr.VALUE
										});
									}
							}).catch(err => {
								this.$showMessage(err)
							})
						},
			//点击拆分按钮
			spilitbox() {
				uni.navigateTo({
					url: './SplitBoxPage' //跳转到拆分页面
				})
			},

			//设置开关的选中状态
			changeischecked() {
				this.ischecked = !this.ischecked
				//console.log("选中状态", this.ischecked)
			},

			//分栏器的点击事件
			clickitem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex //获取当前选中的index
				}
			},

			//焦点初始化，让页面所有的焦点同时只能存在一个
			initfocus() {
				this.focusBarCode = false
				this.focusShipRequest = false
			},
			//获取焦点的公共方法
			getfocus(nextfocus) {
				this.initfocus()
				this[nextfocus]
				this.$nextTick(() => { //vue是数据全部修改后才进行的视图更新，哪nextTick函数就是为了拿到最新的数据，还不懂的可以去百度
					this[nextfocus] = true
				})
			},

			//单据编号查询事件（待补充）
			searchMaterialStockIn() {
				this.$MyRequest('', {}).then(res => {}).catch(err => {
					this.$showMessage(err)
				})
			},
			//扫描条码输入框---------------回车调用方法
			ship() {
				if (this.barCode == "") {
					this.$showMessage("请扫描条码");
					this.getfocus('focusBarCode') //焦点移动到条码
					return;
				} else {
					//查询//通过标签查位置和单号
					const str = this.barCode;
					const elements = str.split("|");
					//通过标签查位置和单号
					if (elements[4] == "") {
						this.$showMessage("条码规则不正确，条码规则分为 8 段，每一段以 ‘|’ 作为分隔符");
						this.getfocus('focusBarCode') //焦点移动到条码
						return;
					}
					this.$MyRequest('/api/ApiQuery', {
						queryId: "getMESShippedInfo",
						version: "00001",
						params: {
							PALLETNAME: this.barCode,
							MATERIALPACKINGNAME: this.barCode,
						}
					}).then(res => {
						if (res.data.code == "0") {
							console.log(res.data.data[0]) ;
							let obj = res.data.data[0];
							this.MATERIALPACKINGNAME = obj.MATERIALPACKINGNAME;
							this.QTY = obj.MATERIALQUANTITY;
							this.MATERIALSPECNAME = obj.MATERIALSPECNAME;
							this.UNIT = obj.UNIT;
							this.ERPLOCATIONNAME = obj.ERPLOCATION;
							this.PHASE = obj.PHASE;
							this.SPECNAME = obj.SPECNAME;
							this.REQUESTNAME = obj.REQUESTNAME;
								// T.LOTNAME MATERIALPACKINGNAME, --批次号
								// T.QTY MATERIALQUANTITY, --数量
								// T.UNIT , --入库单位
								// T.REQUESTNAME , --入库单
								// T.PRODCUTSPECNAME MATERIALSPECNAME, --料号
								// SS.SPECNAME , --斯迪克规格
								// T.SDK_ID , --斯迪克ID
								// M.ERPLOCATION ,--库位
								// T.PHASE --阶段
						}
					}).catch(err => {
						this.$showMessage(err)
					})
				}
			},
			//扫描卷芯条码输入框---------------回车调用方法
			TRAYNAMEShip() {
				if (this.DURABLENAMECode == "") {
					this.$showMessage("请扫描条码");
					this.getfocus('focusBarCode') //焦点移动到条码
					return;
				}
			},
			//搬送任务下发
			SendTransportTask() {
				this.$MyRequest('/bpel/event', {
					header: {
						MESSAGENAME:'TransportCommandRequest',
						LANGUAGE: 'Chinese',
						Flag: 'LK' //立库标志
					}, 
					body: {
						MATERIALPACKINGNAME : this.barCode,
						PALLETNAME : this.barCode,
						SITENAME: this.siteName == '' ? 'SDK' : this.siteName,
						USERID:this.userId,
						TRANSPORTCOMMANDTYPE: 'IN', //搬送类型
						INDESTINATION: 'C', //搬入库位
						OUTDESTINATION: '', //搬出库位
						TRAYNAME: this.DURABLENAMECode, //轴心RFID/托盘ID
						ISAGV: 'True', //是否AGV搬送
						INITILATION:this.INITILATION,
						ENDING:this.ENDING,
						AB:this.AB
					}

				}).then(res => {
					if (res.data.code=='0')
						{
							this.barCode='';
							this.MATERIALSPECNAME= '';
							this.UNIT ='';//单位
							this.PHASE='';//阶段
							this.QTY='';//数量
							this.SPECNAME='';//物料规格
							this.MATERIALPACKINGNAME='';
							this.ERPLOCATIONNAME =''; //库位
							this.$showMessage("搬送下发成功");
						}
					else this.$showMessage(res.data.msg)
				}).catch(err => {
					this.$showMessage(err)
				})
			}
		}
	}
</script>

<style lang="scss">
	switch {
		color: #FFCC33;
	}

	/* 基础样式 */
	.picker {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		/* 根据需要调整宽度 */
	}

	.row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		/* 行与行之间的间距 */
	}

	.col {
		flex: 1;
		/* 使得每列占据相等的空间 */
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	label {
		// font-weight: bold;
		/* 标签加粗 */
		margin-bottom: 5px;
		/* 标签和值之间的间距 */
	}

	.value {
		/* 值的样式，可以根据需要调整 */
	}
</style>
