<template>
	<view>
		<u-navbar back-text="返回" title="Lot入库" :background="background"></u-navbar>
		<u-form style="margin-top: 20px;">
			<u-form-item>
				<p>条码:</p>
				<u-input :border="true" v-model="barCode" placeholder="请扫描Lot" :focus="focusBarCode"
					@confirm="getBarcodeInfo" />
			</u-form-item>

			<view class="uni-padding-wrap uni-common-mt">
				<uni-segmented-control :current="current" :values="items" :style-type="styleType"
					:active-color="activeColor" @clickItem="onClickItem"  />
			</view>

			<view v-if="current === 0">
				<uni-card :is-shadow="false">
					<view v-for="item in barCodeInfoList">
						<u-form>
							<u-form-item>
								工厂:{{item.SITENAME}}
							</u-form-item>
							<u-form-item>
								条码编号:{{item.PRODUCTNAME}}
							</u-form-item>
							<u-form-item>
								物料编号：{{item.PRODUCTSPECNAME}}
							</u-form-item>
							<u-form-item>
								物料描述:{{item.DESCRIPTION}}
							</u-form-item>
							<u-form-item>
								库存状态:{{item.PRODUCTSTATE}}
							</u-form-item>
							<u-form-item>
								条码数量:{{item.MATERIALQUANTITY}}
							</u-form-item>
						</u-form>
					</view>
				</uni-card>
			</view>
			
		<view v-if="current === 1">
		   <div v-for="(item,index) in texts" :key="index">
			   <p>{{item}}</p>
		   </div>
		</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',
				//---------------------分割线上方都是引用的外部的组件使用的样式，下方才是是使用的数据
				texts:[],//显示入库条码
				scanedData:[],//已扫描列表
				receiveRequestName: "", //单据号	
				requestData: [], //材料列表
				barCodeInfoList: [], //条码信息
				shipRequestDetailName: "", //行号
				barCode: "", //条码
				focusBarCode: false, //条码的焦点是否被选中
				focusReceiveRequestName: true, //单号的焦点一来就默认选中
				ISRELEASE: "", //是否释放
				siteName:"",
				userId:"",
				//对应的材料列表的表格
				matColumns: [],
			  
			   //对应已扫描条码的表格
			    scanedColums:[
					{
							title: '序号',
							field: "SHIPREQUESTDETAILNAME",
							width: 120,
							sort: true,
							align: "right"
						},
						{
							title: '物料编号',
							field: "MATERIALSPECNAME",
							width: 280,
							sort: true,
							align: "left"
						},
						{
							title: '物料描述',
							field: "MATERIALSPECDESCRIPTION",
							width: 300,
							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"
						}
				]
			}
		},
		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
				}
			})	
		},
		methods: {
			//分栏器的点击事件
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex //获取当前选中的index
				}
			},
			//焦点初始化，让页面所有的焦点同时只能存在一个
			initfocus() {
				this.focusReceiveRequestName = false
				this.focusBarCode = false
			},
			//获取焦点的公共方法
			getfocus(nextfocus) {
				this.initfocus()
				this[nextfocus]
				this.$nextTick(() => { //vue是数据全部修改后才进行的视图更新，哪nextTick函数就是为了拿到最新的数据，还不懂的可以去百度
					this[nextfocus] = true
				})
			},
			
			//扫描条码回车事件
			getBarcodeInfo() {
				if (this.barCode == "") {
					this.$showMessage("请扫描条码");
					this.$playFail()
					this.getfocus('focusBarCode')
					return
				}
				 this.requsetIn() //调用条码查询
			},

		//入库申请
		requsetIn() {
			this.$MyRequest('/productinto/lotStockIn', {
				site: this.siteName,
				billNo: this.receiveRequestName,
				barCode: this.barCode,
				userId: this.userId
			}).then(res => {
				console.log(res)
				if (res.data.success) {
					console.log(res.data.resultObj)
					this.barCodeInfoList = res.data.resultObj
					if (this.barCodeInfoList[0]["ISRELEASE"] == 1) //处理后端返回的ISRELEASE，为1的时候设置为释放
						this.ISRELEASE = "释放"
					else this.ISRELEASE = "未释放"
					this.current=1
					setTimeout(()=>{
						this.onClickItem(event)
					},2000)
					this.texts.push(barCode)//将入库申请成功的条码放在已扫描条码里面
					console.log("****************************" + this.texts)
					this.barCode = "" //清空条码
					this.$showMessage(res.data.message)
					this.getfocus('focusBarCode') //焦点回到条码			
				} else {
					this.$showMessage(res.data.message)
					this.$playFail()
					this.barCode = "" //清空条码
					this.getfocus('focusBarCode') //获取焦点回到条码
				}
			}).catch(err => {
				this.$showMessage(err)
				this.$playFail()
				this.barCode = ""
				this.getfocus('focusBarCode') //重新获取焦点
			})
		}
	}
	}
</script>

<style lang="scss">

</style>

