<template>
	<view class="zd_container">
		<!-- 物料组桶 -->
		<nav-bar :title="title"></nav-bar>
		<view class="zd_content">
			<view class="zd_wrapper">
				<view class="zd-row border-bottom">
					<view class="zd-col-6">
						<span class="filter_label">桶号</span>
					</view>
					<view class="zd-col-18">
						<search-box v-model="val1" @handleChange="handleChange"/>
					</view>
				</view>
				<view class="zd-row border-bottom">
					<view class="zd-col-6">
						<span class="filter_label">桶自重</span>
					</view>
					<view class="zd-col-16">
						<NumberInput v-model="weight" />
					</view>
					<view class="zd-col-2"><span class="filter_unit">KG</span></view>
				</view>
				<view class="zd-row border-bottom">
					<view class="zd-col-6">
						<span class="filter_label">物料编码</span>
					</view>
					<view class="zd-col-13">
						<search-box v-model="materialData.material_code"/>
					</view>
					<button class="mini-btn" type="primary" @tap="toJump('material?title=物料维护')">查询</button>
				</view>
				<view class="zd-row border-bottom">
					<view class="zd-col-6">
						<span class="filter_label filter_input_disabled">物料名称</span>
					</view>
					<view class="zd-col-18">
						<input type="text" class="filter_input filter_input_disabled" v-model="materialData.material_name" disabled>
					</view>
				</view>
				<view class="zd-row border-bottom">
					<view class="zd-col-6">
						<span class="filter_label filter_input_disabled">物料类别</span>
					</view>
					<view class="zd-col-18">
						<input type="text" v-model="materialData.class_name" class="filter_input filter_input_disabled" disabled>
					</view>
				</view>
				<view class="zd-row border-bottom">
					<view class="zd-col-6">
						<span class="filter_label">批号</span>
					</view>
					<view class="zd-col-18">
						<input type="text" v-model="pcsn" class="filter_input">
					</view>
				</view>
				<view class="zd-row border-bottom">
					<view class="zd-col-6">
						<span class="filter_label filter_input_disabled">数量</span>
					</view>
					<view class="zd-col-18">
						<input type="number" v-model="num" class="filter_input filter_input_disabled" disabled>
					</view>
				</view>
				<view class="zd-row border-bottom">
					<view class="zd-col-6">
						<span class="filter_label">计量单位</span>
					</view>
					<view class="zd-col-18">
						<input type="text" class="filter_input" v-model="unit">
					</view>
				</view>
			</view>
		</view>
		<view class="zd-row submit-bar">
			<!-- <button class="zd-col-5 button-default" @tap="toEmpty">清空</button> -->
			<button class="zd-col-7 button-primary" :class="{'button-info': flag || !val1 || !weight || !pcsn || JSON.stringify(materialData) === '{}'}" :disabled="disabled" @tap="toZtPrint">组桶并打印</button>
			<button class="zd-col-7 button-primary" :class="{'button-info': flag || !val1 || !weight || !pcsn || JSON.stringify(materialData) === '{}'}" :disabled="disabled" @tap="_confirmBucketAssembly">确认组桶</button>
			<button class="zd-col-7 button-primary" :class="{'button-info': !val1 || !weight || !pcsn || JSON.stringify(materialData) === '{}'}" :disabled="disabled1" @tap="labelPrint">标签打印</button>
		</view>
	</view>
</template>

<script>
	import {getCLodop} from '@/utils/CLodopfuncs.js'
	import NavBar from '@/components/NavBar.vue'
	import SearchBox from '@/components/SearchBox.vue'
	import NumberInput from '@/components/NumberInput.vue'
	import {getDate} from '@/utils/utils.js'
	import {queryBuckInfo, queryRecordNoBucked, confirmBucketAssembly, printBucked} from '@/utils/getData3.js'
	export default {
		components: {
			NavBar,
			SearchBox,
			NumberInput
		},
		data() {
			return {
				title: '',
				val1: '',
				recordNo: '',
				materialData: {},
				weight: '',
				num: null,
				unit: 'KG',
				disabled: false,
				disabled1: false,
				pcsn: '',
				flag: false
			};
		},
		onLoad (options) {
			this.title = options.title
			this._queryRecordNoBucked()
		},
		onShow () {
			if (this.$store.getters.publicObj !== '') {
				this.materialData = this.$store.getters.publicObj
				this.$store.dispatch('setPublicObj', '')
			}
		},
		methods: {
			handleChange (e) {
				if (e) {
					this._queryBuckInfo(e)
				}
			},
			async _queryBuckInfo (e) {
				try {
					let res = await queryBuckInfo(e)
					if (res) {
						this.materialData = res.data
						this.pcsn = this.materialData.pcsn
						this.weight = this.materialData.bucket_weight
						this.num = this.materialData.qty
						// 调用此接口后并成功返回结构后，页面所有操作禁用，【标签打印】按钮可以正常使用。
						this.flag = true
					} else {
						this.materialData = {}
						this.flag = false
					}
				} catch (e) {
					this.materialData = {}
					this.flag = false
				}
			},
			async _queryRecordNoBucked () {
				try {
					let res = await queryRecordNoBucked()
					if (res) {
						this.recordNo = res.data.recordNo
					}
				} catch (e) {
				}
			},
			toJump (name) {
				uni.navigateTo({
					url: `/pages/hdyy/wbc/${name}`
				})
			},
			toEmpty () {
				this.val1 = ''
				this.index1 = ''
				this.materialData = {}
				this.pcsn = ''
				this.num = null
				this.unit = 'KG'
				this.disabled = false
				this.disabled1 = false
			},
			toZtPrint () {
				if (this.flag) {
					return
				}
				this._confirmBucketAssembly()
				this.labelPrint()
			},
			async _confirmBucketAssembly () {
				this.disabled = true
				if (this.flag || !this.val1 || !this.weight || !this.pcsn || JSON.stringify(this.materialData) === '{}') {
					this.disabled = false
					return
				}
				try {
					let res = await confirmBucketAssembly(this.val1, this.weight, this.num, this.pcsn, this.materialData.material_id)
					if (res) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
					this.disabled = false
				} catch (e) {
					this.disabled = false
				}
			},
			// async _printDelete (data) {
			// 	try {
			// 		let res = await printDelete(data)
			// 		if (res) {
			// 			// console.log('success')
			// 		}
			// 	} catch (e) {
			// 		// console.log('error')
			// 	}
			// },
			async labelPrint () {
				this.disabled1 = true
				this.flag = false
				if (!this.val1 || JSON.stringify(this.materialData) === '{}' || JSON.stringify(this.suppData) === '{}') {
					this.disabled1 = false
					return
				}
				let row = Object.assign({}, this.materialData, this.suppData, {pcsn: this.pcsn, create_time: this.date, qty: this.num, bucket_code: this.val1, bucket_weight: this.weight})
				try {
					let res = await printBucked(row, this.$store.getters.printUrl)
					if (res) {
						// uni.showToast({
						// 	title: res.message,
						// 	icon: 'none'
						// })
						this.toPrint(row)
					}
					this.disabled1 = false
				} catch (e) {
					this.disabled1 = false
				}
			},
			toPrint (row) {
				let iparr = this.$store.getters.printUrl.split(":")
				let printUrl = iparr[1].slice(2)
				let LODOP = getCLodop();
				if (!(LODOP.webskt && LODOP.webskt.readyState === 1)) {
				    uni.showToast({
						title: '当前配置ip：' + printUrl + '网络不通，请检查',
						icon: 'none',
						duration: 5000
					})
					this.disabled1 = false
				    return
				}
				LODOP.SET_SHOW_MODE('HIDE_DISBUTTIN_SETUP', 1)// 隐藏那些无效按钮
				// 打印纸张大小设置https://www.it610.com/article/2094844.html
				LODOP.PRINT_INIT('')
				LODOP.SET_PRINT_PAGESIZE(1, '94mm', '119mm', '')
				LODOP.ADD_PRINT_RECT('1mm', '3mm', '92mm', '117mm', 0, 1)
				LODOP.ADD_PRINT_TEXT('2.88mm', '35.4mm', '32.65mm', '5.95mm', '中 美 华 东 制 药')
				LODOP.ADD_PRINT_TEXT('6.56mm', '22.33mm', '62.02mm', '5.69mm', 'Zhongmei Huadong Pharmaceutical')
				LODOP.ADD_PRINT_TEXT('10.45mm', '13.86mm', '98mm', '7.01mm', '周 转 物 料 卡 Turnover Material Card')
				LODOP.SET_PRINT_STYLEA(0, 'FontSize', 11)
				LODOP.ADD_PRINT_TEXT('15.48mm', '5.13mm', '93.24mm', '5.69mm', '依据《状态标识牌的有关规定》（QA-SMP-B005）制定此记录')
				LODOP.SET_PRINT_STYLEA(0, 'FontSize', 8)
				LODOP.ADD_PRINT_TEXT('19.45mm', '5.13mm', '128.69mm', '7.01mm', 'Establish this record according to “SMP for status signboard”')
				LODOP.SET_PRINT_STYLEA(0, 'FontSize', 8)
				LODOP.ADD_PRINT_TEXT('22.89mm', '5.13mm', '27.62mm', '4.37mm', '(QA-SMP-B005)')
				LODOP.SET_PRINT_STYLEA(0, 'FontSize', 8)
				LODOP.ADD_PRINT_TEXT('26.86mm', '5.13mm', '66.78mm', '4.37mm', '记录编号 Record No.: ' + this.recordNo + '')
				LODOP.SET_PRINT_STYLEA(0, 'FontSize', 8)
				LODOP.ADD_PRINT_TEXT('31.64mm', '4.87mm', '87.95mm', '5.69mm', '物 料 名 称 Material Name: ' + row.material_name + '')
				LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
				LODOP.ADD_PRINT_TEXT('37.17mm', '4.74mm', '42.44mm', '5.69mm', '物 料 批 号 及 代 码')
				LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
				LODOP.ADD_PRINT_TEXT('40.9mm', '4.74mm', '86.1mm', '5.69mm', 'Material Batch No. and Code: ' + row.pcsn + '_' + row.material_code)
				LODOP.ADD_PRINT_TEXT('46.78mm', '4.47mm', '41.65mm', '5.69mm', '桶 号 Barrel No.: ' + row.bucket_code + '')
				LODOP.ADD_PRINT_TEXT('46.78mm', '48.13mm', '43.5mm', '5.69mm', '皮 重 Tare Weight: ' + row.bucket_weight + '')
				LODOP.ADD_PRINT_TEXT('51.81mm', '48.13mm', '44.03mm', '5.69mm', '总 重 Total Weight: ')
				LODOP.ADD_PRINT_TEXT('51.81mm', '4.47mm', '41.65mm', '5.69mm', '净 重 Net Weight: ')
				LODOP.ADD_PRINT_TEXT('56.83mm', '4.47mm', '86.62mm', '7.01mm', '操 作 日 期 Operation Date: ')
				LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
				LODOP.ADD_PRINT_TEXT('62.92mm', '4.47mm', '85.3mm', '7.01mm', '有 效 期 至 Expiry Date: ')
				LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
				LODOP.ADD_PRINT_TEXT('69.22mm', '5mm', '22.07mm', '5.69mm', '用 于 产 品')
				LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
				LODOP.ADD_PRINT_TEXT('73.71mm', '5mm', '11.22mm', '5.69mm', 'Used')
				LODOP.ADD_PRINT_TEXT('73.71mm', '17.44mm', '8.57mm', '5.69mm', 'in')
				LODOP.ADD_PRINT_TEXT('77.68mm', '5mm', '16.77mm', '5.69mm', 'Product')
				LODOP.ADD_PRINT_TEXT('69.45mm', '28.28mm', '23.65mm', '5.69mm', '名 称 Name: ')
				LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
				LODOP.ADD_PRINT_TEXT('76.23mm', '28.28mm', '31.86mm', '5.69mm', '规 格 Strength: ')
				LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
				LODOP.ADD_PRINT_TEXT('83.98mm', '5.27mm', '51.17mm', '5.69mm', '操 作 人 Operator: ')
				LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
				LODOP.ADD_PRINT_TEXT('92.21mm', '5.27mm', '48mm', '5.69mm', '复 核 人 Reviewer: ')
				LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
				LODOP.ADD_PRINT_TEXT('99.7mm', '5.27mm', '39.26mm', '5.69mm', '备 注 Remarks:')
				LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
				LODOP.ADD_PRINT_LINE(114, 11, 114, 360, 0, 0)
				LODOP.ADD_PRINT_LINE(136, 11, 136, 360, 0, 0)
				LODOP.ADD_PRINT_LINE(171, 11, 171, 360, 0, 0)
				LODOP.ADD_PRINT_LINE(209, 11, 209, 360, 0, 0)
				LODOP.ADD_PRINT_LINE(231, 11, 231, 360, 0, 0)
				LODOP.ADD_PRINT_LINE(254, 11, 254, 360, 0, 0)
				LODOP.ADD_PRINT_LINE(282, 97, 282, 360, 0, 0)

				LODOP.ADD_PRINT_LINE(309, 11, 309, 360, 0, 0)
				LODOP.ADD_PRINT_LINE(339, 11, 339, 360, 0, 0)
				LODOP.ADD_PRINT_LINE(370, 11, 370, 360, 0, 0)
				LODOP.ADD_PRINT_LINE(397, 11, 397, 360, 0, 0)
				LODOP.ADD_PRINT_LINE(309, 96, 254, 96, 0, 1)
				LODOP.ADD_PRINT_BARCODE('107.13mm', '22.99mm', '57.1mm', '10.74mm', '128A', row.bucket_code)

				LODOP.PRINT()// 打印
				// LODOP.PREVIEW()// 预览
				// LODOP.PRINT_DESIGN()
				uni.showToast({
					title: '操作成功',
					icon: 'none'
				})
				this.toEmpty()
				this.disabled1 = false
			}
		}
	}
</script>
<style lang="stylus">
.input-container {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 40rpx;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
//   border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  overflow: hidden;
  transition: border-color 0.3s;
}

.input-wrapper:focus-within {
  border-color: #007AFF;
}

.input-field {
  flex: 1;
  height: 80rpx;
//   padding: 0 24rpx;
  font-size: 28rpx;
  color: #333;
}

.placeholder {
  color: #999;
  font-size: 28rpx;
}

.picker {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
  border-left: 2rpx solid #e0e0e0;
}

.picker-trigger {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.picker-text {
  font-size: 24rpx;
  color: #666;
}

.custom-dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.custom-dialog {
  width: 600rpx;
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}

.dialog-title {
  padding: 30rpx;
  font-size: 32rpx;
  text-align: center;
  border-bottom: 1rpx solid #eee;
}

.dialog-body {
  padding: 40rpx;
}

.dialog-input {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  padding: 0 20rpx;
  text-align: center;
}

.dialog-footer {
  display: flex;
  border-top: 1rpx solid #eee;
}

.dialog-footer button {
  flex: 1;
  border-radius: 0;
  margin: 0;
}
</style>
