<template>
	<view>
		<u-navbar back-text="返回" title="Box绑定" :background="background"></u-navbar>

		<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 class="item2">
				<p>物料编码:</p>
				<u-input class="input1" placeholder="物料编码" disabeled="true" :disabled="true" v-model="materialSpc" />
				<p>原条码数量:</p>
				<u-input placeholder="原条码数量" disabeled="true" :border="true" :disabled="true" v-model="oldQty" />
			</u-form-item>
			
			<u-form-item>
				内包扫码:
				<u-input placeholder="内包扫码" :border="true" :focus="focusDetailCode" v-model="DetailCode" 
					style="width: 170px;" />
			</u-form-item>

			<u-form-item>
				内包数量:
				<u-input placeholder="内包数量" :border="true" :focus="focusMaterialQty" v-model="Qty" type="number"
					style="width: 170px;" />
			</u-form-item>
			
			

			<u-form-item>
				<button type="primary" size="mini" @click="GetSplict">拆分</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>
</template>

<script>
 import {
		print
	} from '../../../../common/BluetoothPrint.js'
	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",
						width: 180,
						sort: true,
						align: "right"
					},
				],
				background: {
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				}, //返回按钮的样式
				//-----------------------------------上面是样式需要的数据,下面是真正需要的数据
				index: 0,
				printData: [], //要打印的内容
				matData: [], //后端传回来的绑定表格的数据
				rangedata: [], //后端传回来的下拉框数据，一个对象数组
				//printer: "", //下拉框选择的具体打印机
				//焦点和其他的一些数据
				ischecked: false, //开关的初始状态
				focusBarCode: true, //原条码
				focusMaterialQty: false, //物料数拆
				focusDetailCode: false,
				//双向绑定的数据
				siteName: "", //数据库表的主键需要工厂
				barCode: "", //条码
				materialName: "", //物料名称
				DetailCode : "",
				materialSpc: "", //物料编码
				oldQty: "", //原条码数量
				userId: "",
				Qty: "", //物料数拆对应的数量onReady
				show: false, //必须要使用这个v-if判断，因为template标签渲染完模板的时候，从后端取的打印机数据rangedata获取了
				//但是没法获取rangedata[index].DESCRIPTION这个里面的DESCRIPTION，加了这个判断后后端返回的数据rangedata取到以后再操作dom树渲染picker组件
			}
		},

		created() {},

		methods: {
			//picker选择器选择时
			bindPickerChange(e) {
				this.index = e.detail.value //获取到当前选择的index
				//console.log(this.index)
			},

			//焦点初始化，让页面所有的焦点同时只能存在一个
			initfocus() {
				this.focusBarCode = false
				this.focusMaterialQty = false
			},
			//获取焦点的公共方法
			getfocus(nextfocus) {
				this.initfocus()
				this[nextfocus]
				this.$nextTick(() => { //vue是数据全部修改后才进行的视图更新，使用nextTick函数就是为了拿到最新的dom节点数据，还不懂的可以去百度
					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() {
				console.log("this.Qty" + this.Qty)
				console.log("this.oldQty" + this.oldQty)
				if (parseFloat(this.Qty) > parseFloat(this.oldQty) ) {
					this.$showMessage("拆分数量不能大于原条码数量")
					this.Qty = "" //清空数量
					this.getfocus('focusMaterialQty') //重聚焦
					return
				} else {
					this.splict()
					setTimeout(() => {
						this.save() //2s后保存拆分后的条码
					}, 2000)
				}
			},


			//拆分请求
			splict() {
				this.$MyRequest('/split/getsplitbarcode', {
					materialPackingName: this.barCode, //条码编号
					materialQuantity: parseFloat(this.oldQty), //旧条码的数量
					siteName: this.siteName, //工厂名
					newMaterialQuantity: parseFloat(this.Qty), //新条码的数量
					materialSpecName: this.materialSpc, //物料编号
				}).then(res => {
					console.log(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)
				})
			},

			//拆分后的条码保存请求
			save() {
				this.$MyRequest('/split/detailBind', {
					siteName: this.siteName, //工厂
					sourcePackingName: this.barCode, //老条码
					sourceNewQty: parseFloat(this.matData[0]["qty"]), //老条码的新数量
					splitPackingName: this.DetailCode, //新条码的数量
					splitQty: parseFloat(this.matData[1]["qty"]), //新条码数量
					userid: this.userId //操作人
				}).then(res => {
					if (res.data.success) {
						console.log(res)
						this.DetailCode = ""
						this.getBarCodeInFo() 
						this.$showMessage(res.data.message)
						this.printData = res.data.resultObj //接后端的数据
					} else {
						this.$showMessage(res.data.message)
						//console.log(this.userid)
					}
				}).catch(err => {
					this.$showMessage(err)
				})
			},
		}
	}
</script>

<style>
	.input1 {
		border: 1px solid;
		display: inline;
	}

	.item {
		line-height: 50rpx;
		border-bottom: solid 1rpx blue;
	}

	.item2 {
		border-bottom: solid 1rpx blue;
	}

	p {
		font-size: 12px;
	}
</style>