<template>
	<view>
		<u-navbar back-text="返回" title="盘点" :background="background"></u-navbar>
		<!-- 第一个分段器-->
		<uni-segmented-control :current="currentChoose" :values="chooseitems" :style-type="styleType"
			:active-color="activeColor" @clickItem="chooseItem" />
		<view v-show="currentChoose === 0">
			<table>
				<tr>
					<td>单号:</td>
					<td width="82%">
						<u-input :border="true" v-model="checkPlanName" :focus="focusCheckPlanName" placeholder="请扫描单号"
							@confirm="serachCheckPlan" />
					</td>
				</tr>
				<tr>
					<td>盘点描述:</td>
					<td>
						<u-input :border="true" v-model="checkPlanDescription" placeholder="" :disabled="true" />
					</td>
				</tr>
			</table>
			<!-- 第二个分段器-->
			<uni-segmented-control :current="current" :values="items" :style-type="styleType"
				:active-color="activeColor" @clickItem="onClickItem" />
			<view>
				<view v-show="current === 0">
					<view class="material">
						<u-form ref="materialform">
							<uni-z-table :style="{'height': tabH+'px'}" :tableData="requestData" :columns="matColumns"
								:showBottomSum="true" :rowNumbers="true" :pagination="true" @onSelect="onSelectMatTb">
							</uni-z-table>
						</u-form>
					</view>
				</view>

				<view v-show="current === 1">
					<uni-z-table :style="{'height': tabH+'px'}" :tableData="matDetailData" :columns="matLocation"
						:showBottomSum="true" :rowNumbers="true" :pagination="true">
					</uni-z-table>
				</view>
			</view>
		</view>

		<view v-show="currentChoose === 1">
			<table>
				<tr>
					<td>条 码:</td>
					<td>
						<u-input placeholder="请扫描条码" :border="true" v-model="barCode" :focus="focusBarCode"
							@confirm="searchByBarcode" />
					</td>
				</tr>
				<tr>
					<td>物料编码:</td>
					<td>
						<u-input placeholder="" :disabled="true" :border="true" v-model="materialCode" />
					</td>
				</tr>
				<tr>
					<td>物料描述:</td>
					<td>
						<u-input placeholder="" :disabled="true" :border="true" v-model="materialDescription" />
					</td>
				</tr>
				<tr>
					<td>账面数量:</td>
					<td>
						<u-input placeholder="" :disabled="true" :border="true" v-model="QTY" />
					</td>
				</tr>
				<tr>
					<td>库位编码:</td>
					<td>
						<u-input placeholder="" :disabled="true" :border="true" v-model="Kw" />
					</td>
				</tr>
				<tr>
					<td>新库位:</td>
					<td>
						<u-input placeholder="" :border="true" v-model="newKw" :focus="focusNewKw" />
					</td>
				</tr>
				<tr>
					<td>盘点数量:</td>
					<td>
						<u-input placeholder="" :border="true" v-model="checkQty" :focus="focusQty" />
					</td>
				</tr>
				<tr>
					<td><button type="warn" size="mini" @click="clear">清除</button></td>
					<td><button type="primary" size="mini" @click="submit">确认</button></td>
				</tr>
			</table>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: ['盘点明细', '库位明细'], //第二分段器选项卡
				chooseitems: ['盘点信息', '单个条码'], //第一个分栏器
				tabH: 800, //表格的宽度
				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,
				currentChoose: 0,
				colorIndex: 0,
				activeColor: '#007aff',
				styleType: 'text',
				//---------------------------------------- 分割线上方都是引用的外部的组件使用的样式，下方才是是使用的数据
				newKw: "", //新库位
				checkQty: "", //盘点数量
				checkPlanName: "", //盘点单号
				barCode: "", //条码		 
				requestData: [], //获取的盘点信息
				matDetailData: [], //获取库位明细
				infoList: [], //条码接口查询的信息
				focusBarCode: false, //条码焦点
				focusCheckPlanName: true, //默认选中单号焦点
				focusNewKw: false, //新库位焦点
				queryParam: {
					queryID: "",
					version: "",
					BINDV: {}
				},
				focusQty: false, //盘点数量焦点
				//---------------------------仅展示的数据
				checkPlanDescription: "", //盘点描述
				materialCode: "", //物料编码
				materialDescription: "", //物料描述
				QTY: "", //账面数量
				Kw: "", //库位编码
				//对应的表格的信息---------盘点明细下的表格
				matColumns: [{
						title: '未盘数',
						field: "WEIPAN",
						width: 120,
						sort: true,
						align: "right"
					},
					{
						title: '物料编号',
						field: "MATERIALSPECNAME",
						width: 280,
						sort: true,
						align: "left"
					},
					{
						title: '已盘',
						field: "YIPAN",
						width: 150,
						sort: true,
						align: "right"
					},
					{
						title: '物料描述',
						field: "DESCRIPTION",
						width: 280,
						sort: true,
						align: "left"
					}
				],
				//对应的相应的库位明细下面的表格
				matLocation: [{
						title: '仓库',
						field: "ERPLOCATION",
						width: 150,
						sort: true,
						align: "left"
					},
					{
						title: '库位',
						field: "LOCATIONNAME",
						width: 150,
						sort: true,
						align: "left"
					},
					{
						title: '条码编号',
						field: "MATERIALPACKINGNAME",
						width: 380,
						sort: true,
						align: "left"
					},
					{
						title: '条码数量',
						field: "MATERIALQUANTITY",
						width: 180,
						sort: true,
						align: "right"
					}
				]
			}
		},
		mounted() {
			this.tabH = this.$GetRemainingHeight(4, 0); //定义表格的高度
		},
		methods: {
			//第一个分段器的点击事件
			chooseItem(e) {
				if (this.currentChoose !== e.currentIndex) {
					this.currentChoose = e.currentIndex //获取当前选中的index
				}
				if (this.currentChoose == 1)
					this.getfocus('focusBarCode')
				else this.getfocus('focusCheckPlanName')
			},

			//第二个分段器的点击事件
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex //获取当前选中的index
				}
			},

			//焦点初始化，让页面所有的焦点同时只能存在一个
			initfocus() {
				this.focusCheckPlanName = false //单号焦点
				this.focusBarCode = false //条码焦点
				this.focusNewKw = false //新库位焦点
				this.focusQty = false //盘点数量焦点
			},

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

			//选中盘点明细的某一行带出库位明细
			onSelectMatTb(e) {
				let matCode = e.row["MATERIALSPECNAME"] //获取物料编号
				this.getKwDetailList(matCode) //调用点中当前行的方法
			},


			//扫描单号-----------回车搜索
			serachCheckPlan() {
				if (this.checkPlanName != "") {
					this.getCheckPlanList() //获取材料信息			
				} else {
					this.$showMessage("单号不能为空")
					this.getfocus('focusCheckPlanName') //焦点继续保持到单号输入框
					return
				}
			},

			//扫描条码回车搜索
			searchByBarcode() {
				if (this.checkPlanName != "") {
					if (this.barCode != "") {
						this.getListByCode() //获取该条码的全部信息		
					} else {
						this.$showMessage("条码不能为空")
						this.getfocus('focusBarCode') //重新聚焦
						return
					}
				} else {
					this.$showMessage("单号不能为空")
					this.currentChoose = 0
					this.getfocus('focusCheckPlanName')
				}
			},

			//获取盘点明细
			getCheckPlanList() {
				let _param = this.queryParam;
				_param.queryID = 'getCheckPlanList';
				_param.version = 'PDA01';
				_param.BINDV.CHECKPLANNAME = this.checkPlanName;
				this.$MyRequest('/common/query', {
					param: JSON.stringify(_param)
				}).then(res => {
					
					console.log("res+++++"+res)
					
					if (res.data.status === 'success') {
						this.requestData = res.data.DATA //接返回的数据
						this.checkPlanDescription = this.requestData[0]["PLANTYPENAME"]
						this.$playSuccess()
					} else {
						this.$showMessage(res.data.message)
						this.$playFail()
					}
				}).catch(err => {
					this.$showMessage(err)	
				})
			},

			//获取库位明细
			getKwDetailList(matCode) {
				let _param = this.queryParam;
				_param.queryID = 'getCheckCordListByMaterialSpec';
				_param.version = 'PDA01';
				_param.BINDV.MATERIALSPECNAME = this.matCode;
				this.$MyRequest('/common/query', {
					param: JSON.stringify(_param)
				}).then(res => {
					console.log("res+++++"+res)
					if (res.data.status === 'success') {
						this.matDetailData = res.data.DATA //接返回的数据
						this.$playSuccess()
					} else {
						this.$showMessage(res.data.message)
						this.$playFail()
					}
				}).catch(err => {
					this.$showMessage(err)	
				})
			},

			//通过单个条码搜索信息
			getListByCode() {
				let _param = this.queryParam;
				_param.queryID = 'getCheckCordListByMaterialPacking';
				_param.version = 'PDA01';
				_param.BINDV.MATERIALPACKINGNAME = this.barCode;
				_param.BINDV.CHECKPLANNAME =this.checkPlanName;
				this.$MyRequest('/common/query', {
					param: JSON.stringify(_param)
				}).then(res => {
					console.log("res+++++"+res)
					if (res.data.status === 'success') {
						this.materialCode = res.data.DATA[0]["MATERIALSPECNAME"] //物料编码
						this.materialDescription = res.data.DATA[0]["DESCRIPTION"] //物料描述
						this.QTY = res.data.DATA[0]["MATERIALQUANTITY"] //账面数量
						this.Kw = res.data.DATA[0]["SYSLOCATION"] //库位
						this.getfocus('focusQty')
						this.$playSuccess()
					} else {
						this.$showMessage(res.data.message)
						this.$playFail()
					}
				}).catch(err => {
					this.$showMessage(err)	
				})
			},

        
			//盘点结果发送
			sendCheckedPlan(kw) {
						let count = this.barCode.split("|").length;
						//标准标签格式中 | 出现次数为5
						//SN|物料号|数量|供应商|制造日期|过期日
						if (count != 6) {
							this.showToast('标签不符合规范请确认', 'error');
							return;
						}
						let boxId = qrCodeArr[0];
						
						//发送请求
						this.$MyRequest('/pdaExecuteBpel', {
						    bpelName: "PDAUpdateCheckRecord",
						    bpelParam: {
						        CHECKPLANNAME:  this.checkPlanName, 
						        SITENAME: this.siteName,
								MATERIALPACKINGNAME:boxId,
								ACTLOCATION:kw,
								MATERIALACTQUANTITY: this.checkQty
						    }
						}).then(res => {
						    if (res.data.RETURNCODE === "0") {
								this.$showMessage("操作成功")
						        this.barCode=""//清空条码
						        this.newKw=""//清空库位
						        this.checkQty=""//清空盘点数量
						        //只读输入框的清空
						        this.materialCode = ""
						        this.materialDescription = ""
						        this.QTY = ""
						        this.Kw = ""
						        //下面重聚焦
						        this.getfocus('focusBarCode')
						    } else {
						        this.$showMessage(res.data.RETURNMSG)
								return
						    }
						}).catch(err => {
						    this.$showMessage(err.RETURNMSG)
						})
			},

			//清除按钮
			clear() {
				this.barCode = ""
				this.QTY = ""
				this.Kw = ""
				this.materialCode = ""
				this.materialDescription = ""
				this.newKw = ""
				this.checkQty = ""
				this.getfocus('focusBarCode') //重新聚焦
			},

			//确认按钮的提交事件
			submit() {
				if (this.checkQty < 0 || this.checkQty=="") {
					this.$showMessage("盘点数量不能为空或负")
					this.checkQty = "" //清空盘点数量
					this.getfocus('focusQty') //重新聚焦
					return
				} else {
					if (this.newKw == "") {
						let oldkw = this.Kw //当新库位为空的时候传旧的库位编码进去
						this.sendCheckedPlan(oldkw) //调用方法
					} else {
						this.sendCheckedPlan(this.newKw) //传新的库位编码
					}
				}
			},


		}
	}
</script>

<style lang="scss">

</style>
