<template>
	<view>
		<u-navbar back-text="返回" title="生产领料出库" :background="background"></u-navbar>
		<u-form ref="testForm">
			<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 class="uni-input" v-model="MaterialPackingcode" :focus="focusKw" placeholder="请扫描条码"
						:border="true" @confirm="submit2" />	
			</u-form-item>
		</u-form>
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" :style-type="styleType"
				:active-color="activeColor" @clickItem="clickitem" />
		</view>
		<view>
			<view v-show="current === 0">
				<view class="material">
					<u-form ref="materialform">
						<uni-z-table :style="{'height': tabH+'px'}" :tableData="ShiptData" :columns="matColumns"
							:showBottomSum="true" :rowNumbers="true" :pagination="true" @onSelect="selectTableRow">
						</uni-z-table>
					</u-form>
				</view>
			</view>

			<view v-show="current === 1">
				<uni-z-table :style="{'height': tabH+'px'}" :tableData="StockOutShipData" :columns="matLocation"
					:showBottomSum="true" :rowNumbers="true" :pagination="true">
				</uni-z-table>
			</view>
		</view>
        <u-form>
        	<u-form-item>
        		<u-button @click="submitButton" type="primary"  style = "background-color: green;width: 100%;">确认提交</u-button>
        	</u-form-item>
        </u-form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shipRequestName: "", //单据号	
				showActionSheet: false, // 控制下拉列表的显示与隐藏
				actionSheetList: [], // 用于存储查询结果的列表
				ShipDetailArray: [], // 用于存储明细查询明细号结果的列表
				ShipDetailAllArray: [], //用于存储明细查询明细所有结果的列表
				MaterialPackingcode: '', //标签编号
				items: ['材料列表', '已出库列表'], //分栏器的选项卡 应发，实发，待发，物料描述，行号
				tabH: 800, //表格的宽度
				ischecked: true, //默认出库
				background: {
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				}, //返回按钮的样式
				colors: ['#007aff', '#4cd964', '#dd524d'],
				current: 0,
				colorIndex: 0,
				activeColor: '#007aff',
				styleType: 'text',
				loading: false,
				//-----------------上方是template标签中的分栏器等需要的样式，下方是双向绑定需要使用到的数据
				ShiptData: [], //材料列表
				StockOutShipData: [], //库位的信息	
				scanData: [], //已扫描箱
				shipRequestDetailName: "",
				barCode: "", //条码
				focusBarCode: false, //焦点是否被选中
				focusShipRequest: true, //默认焦点在单号
				siteName: "",
				userId: "",
				//对应的材料列表下的表格，field对应后端返回了来的字段
				matLocation: [{
						title: '标签编号',
						field: "MATERIALPACKINGNAME",
						width: 240,
						sort: true,
						align: "left"
					},
					{
						title: '物料编码',
						field: "MATERIALSPECNAME",
						width: 240,
						sort: true,
						align: "left"
					},
					{
						title: '数量',
						field: "MATERIALQUANTITY",
						width: 100,
						sort: true,
						align: "left"
					},
					{
						title: 'SDK规格',
						field: "SDK_ID",
						width: 150,
						sort: true,
						align: "right"
					},
					{
						title: '创建时间',
						field: "CREATETIME",
						width: 150,
						sort: true,
						align: "right"
					}
				],

				//对应的相应的库位信息
				matColumns: [{
						title: '标签编号',
						field: "MATERIALPACKINGNAME",
						width: 240,
						sort: true,
						align: "left"
					},
					{
						title: '物料编码',
						field: "MATERIALSPECNAME",
						width: 240,
						sort: true,
						align: "left"
					},
					{
						title: '数量',
						field: "MATERIALQUANTITY",
						width: 100,
						sort: true,
						align: "left"
					},
					{
						title: 'SDK规格',
						field: "SDK_ID",
						width: 150,
						sort: true,
						align: "right"
					},
					{
						title: '创建时间',
						field: "CREATETIME",
						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: {

			//点击拆分按钮
			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
				})
			},

			//选中table的当前选中行时，对数据进行一系列的操作
			selectTableRow(e) {
				var matId = e.row["MATERIALSPECNAME"];
				this.getmaterialkw(matId);
				this.shipRequestDetailName = e.row["SHIPREQUESTDETAILNAME"]
			},
			submit() {
				this.actionSheetList = [];
				//发送请求
				this.$MyRequest('/api/ApiQuery', {
					queryId: "GetPdaMaterialShipRequest",
					version: "00001",
					params: {
						SHIPREQUESTNAME: this.barCode,
					}
				}).then(res => {
					if (res.data.message == "SUCCESS!") {
						for (const item of res.data.data) {
							this.actionSheetList.push({
								text: item.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.QueryMateriPacking();
			},
			QueryMateriPacking()
			{
				this.ShiptData = [];
				//发送请求
				this.$MyRequest('/api/ApiQuery', {
					queryId: "GetMaterialPackingShipDetail",
					version: "00001",
					params: {
						SHIPREQUESTNAME: this.barCode,
					}
				}).then(res => {
					if (res.data.message == "SUCCESS!") {
						this.ShiptData=res.data.data						
					} else {
						this.actionSheetList = [];
					}
				}).catch(err => {
					this.$showMessage(err)
				})
			},
			submit2() {
				const str = this.MaterialPackingcode;
				const elements = str.split("|");
				console.log(elements[4])
				//发送请求
				for (let i = this.ShiptData.length - 1; i >= 0; i--) {
				    // 检查当前对象的MATERIALPACKINGNAME属性是否等于标签  
				    if (this.ShiptData[i].MATERIALPACKINGNAME ===elements[4]) {  
				        // 如果等于标签，则添加到StockOutShipData数组  
				        this.StockOutShipData.push(this.ShiptData[i]);  
				        // 从ShiptData数组中删除该对象  
				        this.ShiptData.splice(i, 1);  
				    }  
				}    
			},
			submitButton(){
				//发送请求
				if(this.ShiptData.length<=0)
				{
					this.$MyRequest('/bpel/event', {
						header: {
							MESSAGENAME: 'CompleteShipRequest',
							LANGUAGE: 'Chinese',
							Flag: 'LK' //立库标志
						},
						body: {
							SITENAME: 'SDK',
							SHIPREQUESTNAME: this.barCode,
					        ACTTYPE:'Normal'
						}
					}).then(res => {
						if (res.data.code == "0") {
							this.$showMessage(res.data.msg)
						}
					}).catch(err => {
						this.$showMessage(err)
					})
				}else{
					this.$showMessage("还有标签未扫描")
				}
				
			}
			 
		}
	}
</script>

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