<template>
	<view>
		<u-navbar back-text="返回" title="IQC检验" :background="background"></u-navbar>
		<u-form>
			<u-form-item :border-bottom="false">
				<p>单号 : </p>
				<u-input class="uni-input1"  v-model="billNo" placeholder="请扫描单号"
					:focus="focusBillNo" @confirm="serachMaterialList" />
			</u-form-item>
			</u-form-item>

			<u-form-item>
				<p>条码:</p>
				<u-input :border="true" v-model="barCode" placeholder="请扫描条码" :focus="focusBarCode"
					@confirm="getBarcodeInfo" />
			</u-form-item>

			<view class="uni-padding-wrap uni-common-mt">
				<uni-segmented-control :current="current" :values="items" :style-type="styleType"
					:active-color="activeColor" @clickItem="onClickItem"  />
			</view>

			<view v-if="current === 0">
				<uni-z-table :style="{'height': tabH+'px'}" :tableData="requestData" :columns="matColumns"
					:showBottomSum="true" :rowNumbers="true" :pagination="true">
				</uni-z-table>
			</view>

			<view v-if="current === 1">
			 <u-form>
				 <view > 
				 <u-form-item>物料编号:<u-input v-model="materialSpec"  :border="true"/></u-form-item>
				 <u-form-item>物料规格:<u-input  v-model="description" :border="true"/></u-form-item>
				 <u-form-item>原条码数:<u-input  v-model="materialQuantity" :border="true"/></u-form-item>
				 <u-form-item>不良品数:<u-input v-model="badQty":border="true"/></u-form-item>
				 <u-form-item>良品数:<u-input v-model="goodQty" :border="true"/></u-form-item>
				 <u-form-item class="item2">
					 <button type="primary" size="mini" @click="Print">打印</button>
					 <button type="warn" size="mini" @click="Splict">拆分</button>
				 </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>  
				 </view>
			 </u-form>
				  <uni-z-table :style="{'height': tabH+'px'}" :tableData="barCodeInfoList" :columns="barcodeColums"
				  	:showBottomSum="true" :rowNumbers="true" :pagination="true">
				  </uni-z-table>
			</view>
			
		</u-form>	
	</view>
</template>

<script>
	//导入蓝牙打印JS方法
	import {
		print
	} from '../../../../common/BluetoothPrint.js'
	export default {
		data() {
			return {
				items: ['材料列表', '条码操作' ], //分栏器的选项卡 
				tabH: 800, //表格的宽度
				ischecked: true, //默认出库
				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,
				colorIndex: 0,
				activeColor: '#007aff',
				styleType: 'text',
				//---------------------分割线上方都是引用的外部的组件使用的样式，下方才是是使用的数据
				barcodeData:[],//接扫条码后的数据
				materialSpec:"",
				description:"",
				badQty:0,
				goodQty:0,
				materialQuantity:"",//一开始的条码数量
				index:0,//蓝牙打印机默认的顺序
				scanedData:[],//已扫描列表
				billNo: "", //单据号	
				requestData: [], //材料列表
				rangedata:[],//蓝牙打印机的信息
				barCodeInfoList:[],//条码信息
				barCode: "", //条码
				focusBarCode: false, //条码的焦点是否被选中
				focusBillNo: true, //单号的焦点一来就默认选中
				ISRELEASE: "", //是否释放
				show:false,
				 
				//对应的材料列表的表格
				matColumns: [ 
					{
						title: '条码编号',
						field: "MATERIALPACKINGNAME",
						width: 280,
						sort: true,
						align: "center"
					},
					{
						title: '物料编号',
						field: "MATERIALSPECNAME",
						width: 280,
						sort: true,
						align: "left"
					},
					{
						title: '物料描述',
						field: "MATERIALDESCRIPTION",
						width: 300,
						sort: true,
						align: "left"
					},
					{
						title: '检验结果',
						field: "OQARESULT",
						width: 170,
						sort: true,
						align: "left"
					} 
				],
			  
			   //对应拆分后的表格
			    barcodeColums:[
						{
							title: '条码编号',
							field: "materialPackingName",
							width: 280,
							sort: true,
							align: "left"
						},
						{
							title: '物料编号',
							field: "materialSpecName",
							width: 280,
							sort: true,
							align: "left"
						},
						
						{
							title: '数量',
							field: "qty",
							width: 150,
							sort: true,
							align: "right"
						} 
				],			
			}
		},
		mounted() {
			this.tabH = this.$GetRemainingHeight(4, 0); //定义表格的高度
			//挂载页面的时候就查询下拉框的数据,这是无参请求所以没参数
			this.$MyRequest('/split/getbluetoothprinter', {}, 'GET').then(res => {
				console.log(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)
			});
			
		 
		},
		
		//监听数据变换，自动计算不良品和良品的值
		watch:{
			badQty:{
				immediate:true,
				handler(){
					this.goodQty=this.materialQuantity-this.badQty
				}
			},
			goodQty:{
				immediate:true,
				handler(){
					this.badQty=this.materialQuantity-this.goodQty
				}
			},
		},
		
		methods: {
			//picker选择器选择时
			bindPickerChange(e) {
				this.index = e.detail.value //获取到当前选择的index
			},
			//分栏器的点击事件
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex //获取当前选中的index
				}
			},
			//焦点初始化，让页面所有的焦点同时只能存在一个
			initfocus() {
				this.focusBillNo = false
				this.focusBarCode = false
			},
			//获取焦点的公共方法
			getfocus(nextfocus) {
				this.initfocus()
				this[nextfocus]
				this.$nextTick(() => { //vue是数据全部修改后才进行的视图更新，哪nextTick函数就是为了拿到最新的数据，还不懂的可以去百度
					this[nextfocus] = true
				})
			},
			
			//扫描单据号-----------回车搜索
			serachMaterialList() {
				if (this.billNo == "") {
					this.$showMessage("请先扫描单号");
					this.$playFail()
					this.getfocus('focusBillNo')
				} else {
					this.getMateriallist() //获取材料信息
				}
			},

			//扫描条码回车事件
			getBarcodeInfo() {
				if (this.billNo == "") {
					this.$showMessage("请先扫描单号");
					this.$playFail()
					this.getfocus('focusBillNo') //获取焦点
					return
				}
				if (this.barCode == "") {
					this.$showMessage("请扫描条码");
					this.$playFail()
					this.getfocus('focusBarCode')
					return
				}
				 this.getBarCodeInfo() //调用条码查询
			},
		
		//获取材料列表
		getMateriallist() {
			this.$MyRequest('/Iqc/getinfo', {
				billNo: this.billNo
			}).then(res => {
				console.log(res)
				if (res.data.success) {
					this.requestData = res.data.resultObj //接后端返回的物料参数，并展示在表格里面
					 this.$playSuccess()
					this.getfocus('focusBarCode')
				} else {
					this.$showMessage(res.data.message) //单号有问题的话重新聚焦在单号输入框
					this.$playFail()
					this.getfocus('focusBillNo')
				}
			}).catch(err => {
				this.$showMessage(err)
				this.billNo = ""
				this.getfocus('focusBillNo') //请求失败的话重新聚焦在单号输入框				
			})
		},
		
		//获取条码信息
		getBarCodeInfo(){
			this.$MyRequest('/Iqc/getbarcodeinfo',{
				materialPackingName:this.barCode
			}).then(res=>{
				console.log(res)
				if(res.data.success){
					this.barcodeData=res.data.resultObj
					this.materialSpec=res.data.resultObj[0]["MATERIALSPECNAME"]
					this.description=res.data.resultObj[0]["DESCRIPTION"]
					this.materialQuantity=res.data.resultObj[0]["MATERIALQUANTITY"]
					this.current=1
					setTimeout(()=>{
						this.onClickItem()
					},1000)
				}else{
					this.barCode=""
					this.$showMessage(res.data.message)
					this.getfocus('focusBarCode')
				}
			}).catch(err=>{
				this.barCode=""
				this.$showMessage(err)
				this.getfocus('focusBarCode')
			})
		},
		
		//拆分
		 Splict(){
			 this.$MyRequest('/Iqc/splict',{
				 materialPackingName:this.barCode,
				 newMaterialQuantity:this.badQty,
				 materialQuantity:this.materialQuantity,
				 materialSpecName:this.materialSpec
			 }).then(res=>{
				 console.log(res)
				 if(res.data.success){
					 this.barCodeInfoList=res.data.resultObj
				 }else{
					 this.$showMessage(res.data.message)
					 this.getfocus('focusBarCode')
				 }
			 }).catch(err=>{
				 this.$showMessage(err)
				 this.barCode=""
				 this.getfocus('focusBarCode')
			 })
		 },
		 //打印请求
		 	 Print() {
		 	 	let macaddress = this.rangedata[this.index].ENUMVALUE//mac地址，可以在打印机上看
		 	 //	console.log(macaddress)
		 	 	//先打印原条码
		 	 	let printStr = '! 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.materialSpec + '\n' +
		 	 		'SETBOLD 0\n' +
		 	 		'T 65 0 20 50 物料描述：\n' +
		 	 		'T 65 1 135 50 ' + this.description + '\n' +
		 	 		'T 65 1 20 80 供应商代码：\n' +
		 	 		'T 65 1 160 80 ' + this.barcodeData[0]["SUPPLIERNAME"] + '\n' +
		 	 		'T 65 0 20 110 供应商：\n' +
		 	 		'T 65 1 135 110 ' + this.barcodeData[0]["DESCRIPTION"] + '\n' +
		 	 		'T 65 0 20 140 制造日期：\n' +
		 	 		'T 65 1 135 140' + this.barcodeData[0]["MAKEDATE"] + '\n' +
		 	 		'T 65 0 20 170 有效期至：\n' +
		 	 		'T 65 1 135 170 ' + this.barcodeData[0]["EXPIRINGDATE"] + '\n' +
		 	 		'T 65 0 20 200 批次：\n' +
		 	 		'T 65 1 135 200 ' + this.barcodeData[0]["CHARGE"] + '\n' +
		 	 		'T 65 0 20 230 数量：\n' +
		 	 		'T 65 1 135 230 300' + this.goodQty+ '\n' +
		 	 		'T 65 0 20 260 SN：\n' +
		 	 		'T 65 1 135 260 ' + this.barCode + '\n' +
		 	 		'SETBOLD 2\n' +
		 	 		'SETBOLD 0\n' +
		 	 		'B QR 20 290 M 12 H 4\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, printStr);//common文件夹里的打印方法
		 },
		 
}
	}
</script>

<style>
.uni-input1{
	border:1px solid red;}
.item{
	border-bottom: solid 1rpx blue;
}
 .item2{
 	border-bottom: solid 1rpx blue;
 }	 

</style>
