<template>
	<view>
		<u-navbar back-text="返回" title="调拨" :background="background"></u-navbar>
		<u-form>
			<u-form-item :border-bottom="false">
				<p>单号 : </p>
				<u-input :border="true" v-model="shipRequestName" placeholder="请扫描单号" :focus="focusShipRquestname"
						@confirm="serachMaterialList" />
				
			</u-form-item>

			<u-form-item>
				<p>条码:</p>
				<u-input :border="true" v-model="barCode" placeholder="请扫描条码" :focus="focusBarCode"
					@confirm="getmaterial" />
			</u-form-item>

			<u-form-item>
				<p>库位:</p>
				<u-input :border="true" v-model="kw" placeholder="请扫描库位" :focus="focusKw" @confirm="dbFunction" />
			</u-form-item>

			<view class="uni-padding-wrap uni-common-mt">
				<uni-segmented-control :current="current" :values="items" :style-type="styleType"
					:active-color="activeColor" />
			</view>
			<view v-if="current === 0">
				<uni-z-table :style="{'height': tabH+'px'}" :tableData="requestData" :columns="matColumns"
					:showBottomSum="true" :rowNumbers="true" :pagination="true" > <!--@onSelect="onSelectMatTb"-->
				</uni-z-table>
			</view>
			<view v-if="current === 1">
				<uni-card :is-shadow="false">
					<view v-for="item in barCodeInfoList">
						<u-form>
							<u-form-item>
							条码编号:{{item.MATERIALPACKINGNAME}}
							</u-form-item>
							条码数量:{{item.MATERIALQUANTITY}}
							<u-form-item>
								工厂:{{item.SITENAME}}
							</u-form-item>
							<u-form-item>
								物料编号：{{item.MATERIALSPECNAME}}
							</u-form-item>
							<u-form-item>
								物料类型 :{{item.MATERIALTYPE}}
							</u-form-item>
							<u-form-item>
								物料描述:{{item.DESCRIPTION}}
							</u-form-item>
							<u-form-item>
								供应商:{{item.SUPPLIERNAME}}
							</u-form-item>
							<u-form-item>
								供应商描述:{{item.SUPPLIERDESCRIPTION}}
							</u-form-item>
							<u-form-item>
								负责人:{{item.CHARGE}}
							</u-form-item>
							<u-form-item>
								生产日期:{{item.MAKEDATE}}
							</u-form-item>
							<u-form-item>
								过期时间:{{item.EXPIRINGDATE}}
							</u-form-item>
							<u-form-item>
								组织:{{item.ERPFACTORY}}
							</u-form-item>
						</u-form>
					</view>
				</uni-card>
			</view>
		</u-form>
	</view>
</template>

<script>
	export default {
		data() {
			return {			
				items: ['材料列表', '条码信息'], //分栏器的选项卡 
				tabH: 800, //表格的宽度
				ischecked: true, //默认出库
				background: {
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				}, //返回按钮的样式
				//分栏器的样式
				styles: [{
						value: 'button',
						text: '按钮',
						checked: true
					},
					{
						value: 'text',
						text: '文字'
					}
				],
				colors: ['#007aff', '#4cd964', '#dd524d'],
				current: 0,
				colorIndex: 0,
				activeColor: '#007aff',
				styleType: 'text',
		  //---------------------分割线上方都是引用的外部的组件使用的样式，下方才是是使用的数据
				kw: "", //库位
				shipRequestName: "", //单据号	
				requestData: [], //材料列表
				materialKwData: [], //库位的信息	
				barCodeInfoList: [], //条码信息
				shipRequestDetailName: "",//行号
				barCode: "", //条码
				focusBarCode: false, //条码的焦点是否被选中
				focusKw: false, //库位的焦点是否选中
				focusShipRquestname:true,//单号的焦点一来就默认选中
				message: "", //用来获取出库的消息
				//对应的材料列表
				matColumns: [{
						title: '序号',
						field: "SHIPREQUESTDETAILNAME",
						width: 120,
						sort: true,
						align: "left"
					},
					{
						title: '物料编号',
						field: "MATERIALSPECNAME",
						width: 280,
						sort: true,
						align: "left"
					},
					{
						title: '物料描述',
						field: "MATERIALSPECDESCRIPTION",
						width: 280,
						sort: true,
						align: "left"
					},
					{
						title: '应发数量',
						field: "REQUESTQUANTITY",
						width: 150,
						sort: true,
						align: "right"
					},
					{
						title: '实发数量',
						field: "ASSIGNEDQUANTITY",
						width: 150,
						sort: true,
						align: "right"
					},
					{
						title: '待发数量',
						field: "DFQTY",
						width: 150,
						sort: true,
						align: "right"
					},
					{
						title: '调拨仓库',
						field: "ERPLOCATION",
						width: 150,
						sort: true,
						align: "center"

					},
					{
						title: '接收仓库',
						field: "ERPRECEIVELOCATION",
						width: 150,
						sort: true,
						align: "center"
					}
				]
			}
		},
		mounted() {
			this.tabH = this.$GetRemainingHeight(4, 0); //定义表格的高度
		},
		methods: {
			//分栏器的点击事件
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex //获取当前选中的index
				}
			},
			
			//焦点初始化，让页面所有的焦点同时只能存在一个
			initfocus(){
				this.focusShipRquestname=false
				this.focusBarCode=false
				this.focusKw=false	
			},
		
		   //获取焦点的公共方法
			getfocus(nextfocus){
				this.initfocus()
				this[nextfocus]
				this.$nextTick(()=>{ //vue是数据全部修改后才进行的视图更新，哪nextTick函数就是为了拿到最新的数据，还不懂的可以去百度
					this[nextfocus]=true			
				})	
			},
			
			//回车事件扫描单据号
			serachMaterialList() {
				if (this.shipRequestName == "") {
					this.$showMessage("请先选择单号");
					this.$playFail()//失败提示音
					this.getfocus('focusShipRquestname')
				} else {
					this.getmateriallist() //获取材料信息
					this.$playSuccess()//成功提示音
					this.getfocus('focusBarCode')	
				}
			},
		
			//回车事件扫描条码
			getmaterial() {
				if (this.shipRequestName == "") {
					this.$showMessage("请扫描单号");
					this.$playFail()
				    this.getfocus('focusShipRquestname')
					}
				if (this.barCode == "") {
					this.$showMessage("请扫描条码");
					this.$playFail()
		            this.getfocus('focusBarCode')
				} else {
					this.getBarcodeInfo() //条码查询方法
					this.$playSuccess()
				}
			},
		
		
			//条码查询方法
			getBarcodeInfo() {
				//发送条码查询请求 
				  this.$MyRequest('/allocation/getdbbarcodeinfo',{
					  materialPackingName: this.barCode, //条码
					  shipRequestName: this.shipRequestName, //单号
					  userId: this.$login.userid //登录用户名
				  }).then(res=>{
					  if (res.data.success) //判断后端传回来的是消息是true还是false
					  {
					  	this.barCodeInfoList= res.data.resultObj
					    this.current=1//当请求成功条码的信息，默认展示条码的信息
					  	this.getfocus('focusKw')				
					  } else {
					  	this.$showMessage(res.data.message); //后端的校验信息
					  	this.barCode=""
					    this.getfocus('focusBarCode')
					  }
				  }).catch(err=>{
					  this.barCode = '';
					  this.$showMessage(err);
					  this.getfocus('focusBarCode')
				  })	
				},
				
			//获取材料列表信息方法
			getmateriallist() {
				this.$MyRequest('/request/getlist',{
					shipRequestName: this.shipRequestName
				}).then(res=>{
					if (res.data.success) {
						//console.log(res)
						this.requestData = res.data.resultObj
					} else {
						this.$showMessage(res.data.message)
					}
				}).catch(err=>{
					this.$showMessage(err)
				})
				},
				

			//调拨出库-----方法
			dbFunction() {
				if (this.shipRequestName == "") {
					this.$showMessage("请先选择单号");
					this.$playFail()
					this.getfocus('focusShipRquestname')//获取焦点
					return;
				}
				if (this.barCode == "") {
					this.$showMessage("请扫描条码");
					this.$playFail()
					this.getfocus('focusBarCode'); //没有扫条码的时候获取焦点
					return;
				}
				if (this.kw == "") {
					this.$showMessage("请扫描库位");
					this.$playFail()
					this.getfocus('focusKw')//双向绑定一个焦点，没有扫条码的时候获取焦点
					return;
				}
				//发起请求
				this.$MyRequest('/allocation/dodbscan',{
					flag: true,
					site: this.$login.sitename,
					billNo: this.shipRequestName,
					detailRowNo: this.shipRequestDetailName,
					barCode: this.barCode,
					userId: this.$login.userid,//用户id
					storageName: this.kw
				}).then(res=>{
					if (res.data.success) {
						this.materialKwData = res.data.resultObj
						this.$showMessage(res.data.message)
						this.barCode=""//清空条码
						this.kw=""//清空库位
						this.getfocus('focusBarCode')
					} else {
						this.$showMessage(res.data.message)
						this.kw=""//清空库位
						this.getfocus('focusBarCode')
					}
				}).catch(err=>{
					this.$showMessage(err)
					this.barCode=""//清空条码
					this.kw=""//清空库位
					this.getfocus('focusBarCode')
				})
			}
		}
	}
</script>

<style lang="scss">

</style>
