<template>
	<view>
		<u-navbar back-text="返回" title="立库人工出库" :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-action-sheet :list="actionSheetList" v-model="showActionSheet" @click="actionSheetCallback">
				</u-action-sheet>
			</u-form-item>
			<u-form-item :border-bottom="false">
				<p>扫描标签：</p>
				<u-input :border="true" v-model="barCode2" placeholder="请扫描条码" :focus="focusBarCode" @confirm="ship" />
			</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="">{{MATERIALSPEC}} </label>
					<br />
					<label> 物料规格：</label>
					<label class="">{{SPECNAME}}</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>
		
		<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>
		<u-button @click="SubmitSure" type="primary">确定</u-button>
	</view>
</template>

<script>
	import { removeZeros } from "@/utils/utils"
	export default {
		data() {
			return {
				array: ['请选择物料行号'],
				barCode: "", //单据编号
				barCode2: "", //物料标签号
				date: this.getDate(),
				PLAN_QTY: 0,
				PRTBARCODEQTY: 0,
				kw: "", // 库位号
				materialList: [], //接收后端传回来的数据
				ischecked: false, //默认不使用库位
				focusKw: false, //库位输入框焦点
				focusBarcode: true, //默认聚焦到条码框	
				styleType: 'button',
				actionSheetList: [], // 用于存储查询结果的列表
				ReceiveDetailArray: [], // 用于存储明细查询结果的列表
				current: 0,
				items: ['入库清单'], //分栏器的选项卡 应发，实发，待发，物料描述，行号
				matData: [], //后端传回来的绑定表格的数据
				colorIndex: 0,
				MaterialSpecName: '',
				phase: '',
				sdk_desc: '',
				fifthElement: '',
				oUTDESTINATION: '',
				sHIPREQUESTNAME: '',
				DESCRIPTION: '',
				SPECNAME: '',
				MATERIALQUANTITY: '',
				EXPIRINGDATE: '',
				background: {
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				}, //返回按钮的样式
				useId: "",
				//对应的材料列表下的表格，field对应后端返回了来的字段
				matColumns: [{
						title: '扫描状态',
						field: "'IS_FALSE'",
						width: 120,
						sort: true,  
					    className: 'text-center' // 居中对齐 
					},
					{
						title: '物料编号',
						field: "MATERIALSPECNAME",
						width: 240,
						sort: true,
						className: 'text-center'
					},
					{
						title: '品名',
						field: "DESCRIPTION",
						width: 280,
						sort: true,
						className: 'text-center'
					},
					{
						title: '阶段',
						field: "PHASE",
						width: 50,
						sort: true,
						className: 'text-center'
					},
					{
						title: '批号',
						field: "MATERIALPACKINGNAME",
						width: 300,
						sort: true,
						className: 'text-center'
					},
					{
						title: 'SDK规格',
						field: "SPECNAME",
						width: 150,
						sort: true,
						className: 'text-center'
					},
					{
						title: '数量',
						field: "MATERIALQUANTITY",
						width: 150,
						sort: true,
						className: 'text-center'
					},
					{
						title: '有效期',
						field: "EXPIRINGDATE",
						width: 150,
						sort: true,
						className: 'text-center'
					}
				],

			};

		},
		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}`;
			},

			submit() {
				this.actionSheetList = [];
				//发送请求
				this.$MyRequest('/api/ApiQuery', {
					queryId: "GetMaterialShipRequest_01",
					version: "00001",
					params: {
						SHIPREQUESTNAME: this.barCode,
					}
				}).then(res => {
					if (res.data.message == "SUCCESS!") {
						for (let i=0; i<res.data.data.length;i++) {
							console.log(this.actionSheetList)
							this.actionSheetList.push({
								text: res.data.data[i].SHIPREQUESTNAME,
								color: 'blue',
								fontSize: 28
							});
						}
						this.showActionSheet = true;
					} else {
						this.actionSheetList = [];
						this.showActionSheet = true;
					}
					
				}).catch(err => {
					this.$showMessage(err)
				})	
			},
			actionSheetCallback(item) {
				// 用户在下拉列表中选择了一个项目  
				this.barCode = this.actionSheetList[item].text; // 更新输入框的值  
				this.showActionSheet = false; // 关闭下拉列表 
				 //发送请求---一共多少列
				 this.$MyRequest('/api/ApiQuery', {
				 	queryId: "GetShipRequestList_1",
				 	version: "00001",
				 	params: {
				 		SHIPREQUESTNAME: this.barCode,
				 	}
				 }).then(res => {
				 	if (res.data.message == "SUCCESS!") {
				 		console.log('success进来了');
				 		this.matData=res.data.data;
				 	} 
				 }).catch(err => {
				 	this.$showMessage(err)
				 })
				
			},
			//扫描条码输入框---------------回车调用方法
			ship() {
				if (this.barCode2 == "") {
					this.$showMessage("请扫描条码");
					this.getfocus('focusBarCode') //焦点移动到条码
					return;
				} else {
					//查询//通过标签查位置和单号
					const str = this.barCode2;
					const elements = str.split("|");
					this.fifthElement = elements[4];
					console.log(this.matData.length)
					for(let i=0;i<this.matData.length;i++)
					{
						if(this.matData[i].MATERIALPACKINGNAME==this.fifthElement)
						{
							this.matData[i]["'IS_FALSE'"]="已扫"
						}
					}
					console.log(this.matData)
				}
			},
			SubmitSure(){
				let IF_TRUE='true';
				for(let i=0;i<this.matData.length;i++)
				{
					if(this.matData[i]["'IS_FALSE'"]!="已扫")
					{
						IF_TRUE='false';
						break;
					}
					
				}
				console.log(IF_TRUE)
				if(IF_TRUE=='true')
				{
					//发送请求---一共多少列
					this.$MyRequest('', {
						header: {
						      MESSAGENAME: '',
						      LANGUAGE: 'Chinese',
						      Flag: 'LK'//立库标志
						    },
						    body: {
						      SHIPREQUESTNAME:this.barCode,
						      SITENAME: 'SDK',
						    }
					}).then(res => {
						
					}).catch(err => {
						this.$showMessage(err)
					})
				}else{
					this.$showMessage("该订单下扫描条码有遗漏！");
				}
			},
		}
	}
</script>

<style lang="scss">
	/* 左对齐 */
	.text-left {
		text-align: left;
	}

	/* 右对齐 */
	.text-right {
		text-align: right;
	}

	/* 居中 */
	.text-center {
		text-align: center;
	}
</style>
