<template>
	<view>
		<u-navbar back-text="返回" title="立库AGV出库" :background="background"></u-navbar>
		<u-form>
			<u-form-item :border-bottom="false">
				<p>选单据：</p>
				<u-input :focus="focusBarcode" v-model="barCode" placeholder="请选择单据" @confirm="submit" :border="true" />
					<u-button @click="searchMaterialStockIn" type="primary" size = "mini">选择单号</u-button>
			</u-form-item>
			<u-form-item :border-bottom="false">
				<p>选物料：</p>
				<u-input :focus="focusBarcode" v-model="barCode" placeholder="请选择物料" @confirm="submit" :border="true" />
					<u-button @click="searchMaterialStockIn" type="primary" size = "mini">选择物料</u-button>
			</u-form-item>
			<u-form-item :border-bottom="false">
				<picker @change="bindPickerChange" :range="array">
					<label>选择行：</label>
					<label class="">{{array[index]}}</label>
					<br/>
					<label>物料属性：</label>
					<label class="">XXXX </label>
					<label>  物料规格：</label>
					<label class="">XXXX</label>
				</picker>
			</u-form-item>
			<u-form-item :border-bottom="false">
					<u-row> 
						<u-col span="20">
							<picker mode="date" :end="endDate"@change="bindDateChange">
								<label>制造日期：</label>{{date}}
							</picker>
						</u-col >
					</u-row>
			</u-form-item>
			<u-form-item :border-bottom="false">
				<p>选择目的地：</p>
				<u-input :focus="focusBarcode" v-model="barCode" placeholder="请选择目的地" @confirm="submit" :border="true" />
					<u-button @click="searchMaterialStockIn" type="primary" size = "mini">选择目的地</u-button>
			</u-form-item>
		</u-form>
		<uni-segmented-control :current="current" :values="items" :style-type="styleType" :active-color="activeColor" />
		    <view v-if="current === 0">
		    	<uni-z-table :style="{'height': tabH+'px'}" :tableData="matData" :columns="matColumns" :showBottomSum="true"
		    		:rowNumbers="true" :pagination="true">
		    	</uni-z-table>
		    </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				array : ['请选择物料行号'],
				barCode: "", //单据编号
				date: this.getDate(),
				PLAN_QTY : 0,
				PRTBARCODEQTY : 0,
				kw: "", // 库位号
				materialList: [], //接收后端传回来的数据
				ischecked: false, //默认不使用库位
				focusKw: false, //库位输入框焦点
				focusBarcode: true, //默认聚焦到条码框	
				items: ['入库清单'], //分栏器的选项卡 应发，实发，待发，物料描述，行号
				styleType: 'button',
				current: 0,
				matData: [], //后端传回来的绑定表格的数据
				background: {
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				}, //返回按钮的样式
				useId:"",
				matColumns: [{
						title: '序号',
						field: "SHIPREQUESTDETAILNAME",
						width: 120,
						sort: true,
						align: "left"
					},
					{
						title: '物料编号',
						field: "MATERIALSPECNAME",
						width: 240,
						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"
					}
				],
			};
			
		},
	  
		 mounted() {
			 let that =this
		 	 uni.getStorage({
		 		key:"userid",
		 		success(res) {
		 			that.userId=res.data
		 		}
		 	})	
		 },
		  
		methods: {
			//设置选中状态
			changeischecked() {
				this.ischecked = !this.ischecked //设置选中状态
				//console.log("选中状态", this.ischecked)
			},

			//焦点初始化，让页面所有的焦点同时只能存在一个
			initfocus() {
				this.focusKw = false //单号焦点
				this.focusBarcode = false //条码焦点
			},

			//获取焦点的公共方法
			getfocus(nextfocus) {
				this.initfocus()
				this[nextfocus] //不能用this.nextfocus
				this.$nextTick(() => { //vue是数据全部修改后才进行的视图更新，哪nextTick函数就是为了拿到最新的数据，还不懂的可以去百度
					this[nextfocus] = true
				})
			},

			//单据编号查询事件（待补充）
			searchMaterialStockIn() {
				this.$MyRequest('', {
				}).then(res => {
				}).catch(err => {
					this.$showMessage(err)
				})
			},
			//用来选择行号，行号唯一就自动选择
			bindPickerChange: function(e) {//改变的事件名
			console.log('picker发送选择改变，携带值为', e.target.value)  // 用于输出改变索引值
			this.index = e.target.value//将数组改变索引赋给定义的index变量
			this.jg=this.array[this.index]//将array【改变索引】的值赋给定义的jg变量
			this.$MyRequest('/barCode/getSLInfo', {
				ReceiveRequestName: this.jg
			}).then(res => {
				if (res.data.success) {
					var _Arr = res.data.resultObj;
					for (let i = 0; i < _Arr.length; ++ i) {
						this.description = _Arr[i]['DESCRIPTION'];
						this.PLAN_QTY = _Arr[i]['PLAN_QTY'];
						this.PRTBARCODEQTY = _Arr[i]['PRTBARCODEQTY'];
					}
				}
			}).catch(err => {
				this.$showMessage(err)
			})	
			},
			computed:{
				endDate(){
					return this.getDate();
				}
			},
			bindDateChange: function(e) {
				this.date = e.detail.value;
			},
            getDate() {
            	const date = new Date();
            	let year = date.getFullYear();
            	let month = date.getMonth() + 1;
            	let day = date.getDate();
            	month = month > 9 ? month : '0' + month;
            	day = day > 9 ? day : '0' + day;
            	return `${year}-${month}-${day}`;
            	},
			//回车事件：入库请求
			ruKuRequest() {
				//发送请求
				this.$MyRequest('/intolocation/receiveinstock', {
					barCode: this.barCode,
					storageName: this.kw,
					userId: this.userId
				}).then(res => {
					if (res.data.success) {
						this.$showMessage(res.data.message)
						this.barCode = ""
						this.getfocus('focusBarcode')
					} else {
						this.$showMessage(res.data.message)
						this.kw = ""
						this.getfocus('focusKw')
					}
				}).catch(err => {
					this.$showMessage(err)
				})
			},
			submit() {
				if (this.ischecked == false) //没有默认使用库位的话
				{
					this.searchmateriallist() //直接请求物料的相关信息
					this.getfocus('focusKw') //焦点下移到下面
				} else {
					//默认使用库位的话，先请求库位信息，再入库 
					this.searchmateriallist() //先展示数据
					if(this.materialList == null) {
						return;
					}
					this.ruKuRequest() //调用入库方法
				}
			}
		}
	}
</script>

<style lang="scss">

</style>

