<template>
	<view>
		<u-navbar back-text="返回" title="拆分" :background="background"></u-navbar>
	<!--	<table>
			<tr width="50%">
				<td>原条码:</td>
				<td>
					<u-input placeholder="请扫描原条码" :border="true" :focus="focusBarCode" v-model="barCode" />
				</td>
			</tr>

			<tr>
				<span class="span1">物料名称:</span>
				<td class="td1">
					<u-input placeholder="物料名称" :border="true" disabeled="true" :disabled="true"
						v-model="materialName" />
				</td>
			</tr>

			<tr>
				<td>物料编码:</td>
				<td>
					<u-input placeholder="物料编码" :border="true" :disabled="true" v-model="materialSpc" />
				</td>
				<td>原条码数量:</td>
				<td>
					<u-input placeholder="原条码数量" :border="true" :disabled="true" v-model="oldQty" />
				</td>
			</tr>

			<tr>
				<td>打印机:</td>
				<td>
					<uni-combox :candidates="XiaLaData" placeholder="请选择打印机" v-model="printer" :border="true" />
				</td>

				
				<td>物料数拆:</td>
				<td>
					<u-input placeholder="物料数量" :border="true" :focus="focusMaterialQty" v-model="Qty" />
				</td>
			</tr>

			<tr>	
				<td><switch :checked="ischecked" @change="changeischecked" /><td>物料数量拆</td></td>
				<td><button type="primary" size="mini" @click="splict">拆分</button></td>
				<td><button type="warn" size="mini" @click="print">打印</button></td>
			</tr>
		</table> -->
		<u-form class="firstform">
			<u-form-item>
				<p>原条码:</p>
				<u-input placeholder="请扫描原条码" :border="true" :focus="focusBarCode" v-model="barCode"
					@confirm="searchBarCodeInFo" />
			</u-form-item>

			<u-form-item>
				<p>物料名称:</p>
				<u-input placeholder="物料名称" :border="true" disabeled="true" :disabled="true" v-model="materialName" />
			</u-form-item>

			<u-form-item>
				<p>物料编码:</p>
				<u-input placeholder="物料编码" disabeled="true" :border="true" :disabled="true" v-model="materialSpc" />
				<p>原条码数量:</p>
				<u-input placeholder="原条码数量" disabeled="true" :border="true" :disabled="true" v-model="oldQty" />
			</u-form-item>
       
		
          <!-- <tabel>
			   <tr> 
			   <td>打印机:</td>
			   <td> <uni-combox :candidates="XiaLaData"
			        placeholder="请选择打印机" 
			       v-model="printer" 
			   	:border="true"
			   	  /></td>
				  <td>  
				      <span v-show="!ischecked">物料数拆:</span>
					  <span v-show="ischecked">条码数拆</span>   </td>
					 <td> <u-input placeholder="物料数量" :border="true" :focus="focusMaterialQty" 
					  v-model="Qty" type="number" style="width: 170px;"/>
					</td>
			   </tr>
		   </tabel>		-->
		<u-form-item>
				<p>打印机:</p>
				<uni-combox :candidates="XiaLaData" 
				     placeholder="请选择打印机" 
					:border="true"
					@input="whichprinter"
					v-model="printer"
					  />
			</u-form-item> 
			
			<u-form-item>
				<span v-show="!ischecked">物料数拆:</span>
				<span v-show="ischecked">条码数拆</span>
				<u-input placeholder="物料数量" :border="true" :focus="focusMaterialQty" 
				v-model="Qty" type="number" style="width: 170px;"/>
			</u-form-item>

			<u-form-item>
				<switch @change="changeischecked" :checked="ischecked" style="transform:scale(0.7)" />
				<span v-if="!ischecked">物料数量拆</span>
				<span v-show="ischecked">条码个数拆</span>
				<button type="primary" size="mini" @click="getsplict">拆分</button>
				<button type="warn" size="mini" @click="print">打印</button>
			</u-form-item>
		</u-form> 
		<uni-segmented-control :current="current" :values="items" :style-type="styleType" :active-color="activeColor"
			@clickItem="onClickItem" />

		<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>
</template>

<script>
	//:checked="ischecked"  物料数量拆
	export default {
		data() {
			return {
				items: ['拆分履历'], //'材料列表', 
				current: 0,
				activeColor: '#007aff', //分栏器的颜色
				styleType: 'button',
				tabH: 800,
				matColumns: [{
						title: '条码',
						field: "materialPackingName",
						width: 300,
						sort: true,
						align: "center"
					},
					{
						title: '物料编码',
						field: "materialSpecName",
						width: 220,
						sort: true,
						align: "right"
					},
					{
						title: '数量',
						field: "qty", //BXX2205240004002
						width: 180,
						sort: true,
						align: "right"
					},
				],
				background: {
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				}, //返回按钮的样式
				//-----------------------------------上面是样式需要的数据,下面是真正需要的数据
				XiaLaData: [], //下拉框绑定的数据
				matData: [], //后端传回来的绑定表格的数据
				rangedata: [], //后端传回来的下拉框数据，一个对象数组
				printer: "", //下拉框选择的具体打印机
				//焦点和其他的一些数据
				ischecked: false, //开关的初始状态
				focusBarCode: true, //原条码
				focusMaterialQty: false, //物料数拆
				//双向绑定的数据
				siteName: "", //数据库表的主键需要工厂
				barCode: "", //条码
				materialName: "", //物料名称
				materialSpc: "", //物料编码
				oldQty: "", //原条码数量
				Qty: "", //物料数拆对应的数量
			};
		},
		mounted() {
			//挂载页面的时候就查询下拉框的数据,这是无参请求所以没参数
			this.$MyRequest('/split/getprinter').then(res => {
				if (res.data.success) {
					this.rangedata = res.data.resultObj //接数据，是一个对象数组
					for (let i = 0; i < this.rangedata.length; i++) {
						let y = this.rangedata[i]["DESCRIPTION"] //取对象的描述字段
						this.XiaLaData.push(y) //放进下拉框绑定的数据中
					}
				} else {
					this.$showMessage(res.data.message)
				}
			}).catch(err => {
				this.$showMessage("请检查网络或联系开发人员" + err)
			})
		},

		methods: {
			//分栏器的选中数值，展示不同的表格
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},

			//开关按钮的选中状态
			changeischecked() {
				this.ischecked = !this.ischecked
			},

			//下拉框这里要获取到选取那个打印机
			whichprinter(e){
			 /* for(let i=0;i<this.XiaLaData.length;i++){
				  if(this.printer != this.XiaLaData[i])
				  this.printer=""
			     else this.printer=e
			  } */
		    	 console.log(this.printer)
			},
		
			//焦点初始化，让页面所有的焦点同时只能存在一个
			initfocus() {
				this.focusBarCode = false
				this.focusMaterialQty = false
			},
			//获取焦点的公共方法
			getfocus(nextfocus) {
				this.initfocus()
				this[nextfocus]
				this.$nextTick(() => { //vue是数据全部修改后才进行的视图更新，哪nextTick函数就是为了拿到最新的数据，还不懂的可以去百度
					this[nextfocus] = true
				})
			},

			//回车事件，获取条码的信息
			searchBarCodeInFo() {
				if (this.barCode == "") {
					this.$showMessage("条码不能为空")
					this.getfocus('focusBarCode') //重新聚焦到条码输入框
				} else {
					this.getBarCodeInFo() //获取条码信息
				}

			},

			//获取条码信息的请求
			getBarCodeInFo() {
				this.$MyRequest('/split/getlist', {
					materialPackingName: this.barCode
				}).then(res => {
					if (res.data.success) {
						this.materialName = res.data.resultObj[0]["DESCRIPTION"] //获取物料名称
						this.materialSpc = res.data.resultObj[0]["MATERIALSPECNAME"] //获取物料编码
						this.oldQty = res.data.resultObj[0]["MATERIALQUANTITY"] //获取物料原数量
						this.siteName = res.data.resultObj[0]["SITENAME"] //获取工厂名称，后续传回去
						this.getfocus('focusMaterialQty') //焦点移动到拆分数量的输入框
					} else {
						this.$showMessage(res.data.message)
					}
				}).catch(err => {
					this.$showMessage("请检查网络或者联系开发人员" + err)
				})
			},

			//拆分回车按钮
			getsplict() {
				if (this.Qty >= this.oldQty) {
					this.$showMessage("拆分数量不能大于原条码数量")
					this.Qty = "" //清空数量
					this.getfocus('focusMaterialQty') //重聚焦
				} else {
					this.splict()
				}
			},


			//拆分请求
			splict() {
				this.$MyRequest('/split/getsplitbarcode', {
					materialPackingName: this.barCode, //条码编号
					materialQuantity: this.oldQty, //旧条码的数量
					siteName: this.siteName, //工厂名
					newMaterialQuantity: this.Qty, //新条码的数量
					materialSpecName: this.materialSpc //物料编号
				}).then(res => {
					if (res.data.success) {
						this.matData = res.data.resultObj //接后端的数据
						console.log(this.matData)
					} else {
						this.$showMessage(res.data.message)
					}
				}).catch(err => {
					this.$showMessage("请检查网络或者联系开发人员" + err)
				})
			},

			//打印请求
			print() {
				this.$MyRequest('', {

				}).then(res => {

				}).catch(err => {

				})
			}

		}
	}
</script>

<style lang="scss">
	
</style>
