<template>
	<view>
		<u-navbar back-text="返回" title="拆分" :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 class="item">
				<view>打印机:</view>
				<picker @change="bindPickerChange" :value="index" mode="selector" :range="rangedata"
					:range-key="'DESCRIPTION'">
					<view class="uni-input" v-if="show">
						{{rangedata[index].DESCRIPTION}}
					</view>
				</picker>
			</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>
				<button type="warn" size="mini" @click="PrintBarCode">打印</button>
				<button type="warn" size="mini" @click="testprint">测试打印</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, //物料数拆
				//双向绑定的数据
				siteName: "", //数据库表的主键需要工厂
				barCode: "", //条码
				materialName: "", //物料名称
				materialSpc: "", //物料编码
				oldQty: "", //原条码数量
				userId: "",
				Qty: "", //物料数拆对应的数量onReady
				show: false, //必须要使用这个v-if判断，因为template标签渲染完模板的时候，从后端取的打印机数据rangedata获取了
				//但是没法获取rangedata[index].DESCRIPTION这个里面的DESCRIPTION，加了这个判断后后端返回的数据rangedata取到以后再操作dom树渲染picker组件
			}
		},

		created() {
			//挂载页面的时候就查询下拉框的数据,这是无参请求所以没参数
			this.$MyRequest('/split/getbluetoothprinter', {}, 'GET').then(res => {
				if (res.data.success) {
					this.rangedata = res.data.resultObj //接数据，是一个对象数组
					this.show = true //设置为true展示picker组件
				} else {
					console.log(this.data.message)
				}
			}).catch(err => {
				this.$showMessage(err)
			});
			let that = this
			uni.getStorage({
				key: "sitename",
				success(res) {
					that.siteName = res.data
				}
			})
			uni.getStorage({
				key: "userid",
				success(res) {
					that.userId = res.data
				}
			})
		},

		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() {
				if (this.Qty >= this.oldQty) {
					this.$showMessage("拆分数量不能大于原条码数量")
					this.Qty = "" //清空数量
					this.getfocus('focusMaterialQty') //重聚焦
				} else {
					this.splict()
					setTimeout(() => {
						this.save() //2s后保存拆分后的条码
					}, 2000)
				}
			},


			//拆分请求
			splict() {
				this.$MyRequest('/split/getsplitbarcode', {
					materialPackingName: this.barCode, //条码编号
					materialQuantity: this.oldQty, //旧条码的数量
					siteName: this.siteName, //工厂名
					newMaterialQuantity: 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/splitsave', {
					siteName: this.siteName, //工厂
					sourcePackingName: this.barCode, //老条码
					sourceNewQty: this.matData[0]["qty"], //老条码的新数量
					splitPackingName: this.matData[1]["materialPackingName"], //新条码的数量
					splitQty: this.matData[1]["qty"], //新条码数量
					userid: this.userId //操作人
				}).then(res => {
					if (res.data.success) {
						console.log(res)
						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)
				})
			},

			//打印请求
			PrintBarCode() {
				let macaddress = this.rangedata[this.index].ENUMVALUE //mac地址，可以在打印机上看 
				console.log(macaddress)
				//先打印原条码
				let printStr1 = '! 0 200 200 400 1\n' +
					'PAGE-WIDTH 560\n' +
					'PW 848\n' +
					'TONE 0\n' +
					'SPEED 0\n' +
					'GAP-SENSE\n' +
					'NO-PACE\n' +
					'POSTFEED 0\n' +
					'LEFT\n' +
					'T 65 1 20 20 物料编码：\n' +
					'SETBOLD 2\n' +
					'T 65 1 135 20 ' + this.materialSpc + '\n' +
					'SETBOLD 0\n' +
					'T 65 0 20 50 物料描述：\n' +
					'T 65 1 135 50 ' + this.materialName + '\n' +
					// 'T 65 1 20 80 供应商代码：\n' +
					// 'T 65 1   190 80 ' + this.printData[0]["SUPPLYCODE"] + '\n' +
					'T 65 0 20 110 供应商：\n' +
					'T 65 1 135 110 ' + this.printData[0]["SUPPLIERNAME"] + '\n' +
					'T 65 0 20 140 制造日期：\n' +
					'T 65 1 135 140' + this.printData[0]["MAKEDATE"] + '\n' +
					'T 65 0 20 170 有效期至：\n' +
					'T 65 1 135 170 ' + this.printData[0]["EXPIRINGDATE"] + '\n' +
					'T 65 0 20 200 批次：\n' +
					'T 65 1 135 200 ' + this.printData[0]["CHARGE"] + '\n' +
					'T 65 0 20 230 数量：\n' +
					'T 65 1 135 230 ' + this.printData[0]["MATERIALQUANTITY"] + '\n' +
					'T 65 0 20 260 SN：\n' +
					'T 65 1 135 260 ' + this.barCode + '\n' +
					'SETBOLD 2\n' +
					'SETBOLD 0\n' +
					'B QR 400 200 M 5 U 2\n' +
					'MA,' + this.barCode + '\n' +
					'ENDQR\n' +
					/* 'B 128 2 1 50 50 560 ' + this.barCode + '\n' +
					'T 65 1 200 620 ' + this.barCode + '\n' + */
					'FORM\n' +
					'PRINT\n';
				print(macaddress, printStr1);

				//新条码
				let printStr2 = '! 0 200 200 640 1\n' +
					'PAGE-WIDTH 640\n' +
					'PW 848\n' +
					'TONE 0\n' +
					'SPEED 0\n' +
					'GAP-SENSE\n' +
					'NO-PACE\n' +
					'POSTFEED 0\n' +
					'LEFT\n' +
					'T 65 1 20 20 物料编码：\n' +
					'SETBOLD 2\n' +
					'T 65 1 135 20 ' + this.materialSpc + '\n' +
					'SETBOLD 0\n' +
					'T 65 0 20 50 物料描述：\n' +
					'T 65 1 135 50 ' + this.materialName + '\n' +
					'T 65 1 20 80 供应商代码：\n' +
					'T 65 1   190 80 ' + this.printData[1]["SUPPLYCODE"] + '\n' +
					'T 65 0 20 110 供应商：\n' +
					'T 65 1 135 110 ' + this.printData[1]["SUPPLIERNAME"] + '\n' +
					'T 65 0 20 140 制造日期：\n' +
					'T 65 1 135 140' + this.printData[1]["MAKEDATE"] + '\n' +
					'T 65 0 20 170 有效期至：\n' +
					'T 65 1 135 170 ' + this.printData[1]["EXPIRINGDATE"] + '\n' +
					'T 65 0 20 200 批次：\n' +
					'T 65 1 135 200 ' + this.printData[1]["CHARGE"] + '\n' +
					'T 65 0 20 230 数量：\n' +
					'T 65 1 135 230 300' + this.printData[1]["MATERIALQUANTITY"] + '\n' +
					'T 65 0 20 260 SN：\n' +
					'T 65 1 135 260 ' + this.printData[1]["MATERIALQUANTITY"] + '\n' +
					'SETBOLD 2\n' +
					'SETBOLD 0\n' +
					'B QR 20 290 M 12 H 4\n' +
					'MA,' + this.printData[1]["MATERIALQUANTITY"] + '\n' +
					'ENDQR\n' +
					'B 128 2 1 50 50 560 ' + this.printData[1]["MATERIALQUANTITY"] + '\n' +
					'T 65 1 200 620 ' + this.printData[1]["MATERIALQUANTITY"] + '\n' +
					'FORM\n' +
					'PRINT\n';
				//print(macaddress, printStr2) //mac地址，可以在打印机上看;
			},

			//测试打印
			testprint() {
				let macaddress = this.rangedata[this.index].ENUMVALUE
				let printStr4 = '! 0 200 200 760 1\n' +
					'PAGE-WIDTH 760\n' +
					'SPEED 0\n' +
					'GAP-SENSE\n' +
					'POSTFEED 0\n' +
					'CENTER\n'+
					'SETBOLD 3\n' +
					'T 65 1 0 30 标签测试\n'+	
					'LEFT\n'+
					'B QR 300 50 M 3 U 6\n'+
					'MA,QR B10001001\n'+
					'ENDQR\n'+
					'FORM\n'+
					'PRINT\n';
				print(macaddress, printStr4) //mac地址，可以在打印机上看;
			}//2维码的Y轴位置在350到500,X轴在500到600
		}
	}
</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>