<template>
	<view class="replenishment-manualPrint-wrap">
		<view class="replenishment-manualPrint-body">
			<view class="part-list">
				<!-- 补货产品 -->
				<partList :list="partList" title="补货产品" model="checkbox" fromPage="manualPrint" ref="partList" noDataText="暂无产品" @allChecked="allCheckedCallback"></partList>
			</view>
		</view>
		<view class="replenishment-manualPrint-footer">
			<view>
				<u-checkbox size="40" @change="allCheckeChange" v-model="allChecked" shape="circle">{{allChecked?'取消全选':'全选'}}</u-checkbox>
			</view>
			<view>
				<kk-printer ref="kkprinter" defaultText="开始打印" @startPrint="startPrint"></kk-printer>
			</view>
		</view>
	</view>
</template>

<script>
	import kkPrinter from '@/components/kk-printer/index.vue';
	import { shelfReplenishDetail, shelfReplenishDetailList, shelfReplenishPrintSign } from '@/api/shelfReplenish'
	import partList from '@/pages/common/partList.vue'
	export default {
		components: { partList, kkPrinter },
		data() {
			return {
				replenishBillSn: '',
				basicInfoData:null,
				partList: [],
				allChecked: false,
				printIndex: 0,
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.$config('primaryColor')
			})
		},
		onLoad(option) {
			this.replenishBillSn = option.sn
			this.getDetail()
			this.getPartList()
		},
		onUnload() {
			this.$refs.kkprinter.closeConnect()
		},
		methods: {
			// 查询详情
			getDetail(){
				shelfReplenishDetail({ sn: this.replenishBillSn }).then(res => {
					if(res.status == 200){
						this.basicInfoData = res.data || null
					}else{
						this.basicInfoData = null
					}
				})
			},
			// 查询列表
			getPartList(){
				const _this = this
				shelfReplenishDetailList({ replenishBillSn: this.replenishBillSn }).then(res => {
					if(res.status == 200 && res.data){
						res.data.map(item =>{
							item.confirmQty = item.confirmQty ? Number(item.confirmQty) : 0
							item.printQty = item.confirmQty ? Number(item.confirmQty) : 0
						})
						this.partList = res.data || []
					}else{
						this.partList = []
					}
				})
			},
			// 全选
			allCheckeChange(e){
				this.$refs.partList.allSelect(e.value)
			},
			allCheckedCallback(val){
				this.allChecked = val
			},
			textFormat(command,text,maxFontNums,left,top,lightHeight){
				const textLen = text.length
				console.log(textLen,maxFontNums)
				if(textLen > maxFontNums){
					const rows = Math.ceil(textLen/maxFontNums)
					console.log(rows)
					for(let i=0;i<rows;i++){
						top = top+i*lightHeight
						console.log(top)
						// 最后一行
						if(i==rows-1){
							const ltxt = text.substring(i*maxFontNums)
							const ltlen = ltxt.length
							command.setText(left+((maxFontNums-ltlen)/2)*lightHeight, top, "TSS24.BF2", 1, 1, ltxt)
						}else{
							command.setText(left, top, "TSS24.BF2", 1, 1, text.substring(i*maxFontNums,maxFontNums))
						}
					}
				}else{
					command.setText(left+((maxFontNums-textLen)/2)*lightHeight, top, "TSS24.BF2", 1, 1, text)
				}
				return top
			},
			printOnce(opt,tsc,blesdk,data){
				const _this = this
				const dealer = this.$store.state.vuex_userData
				console.log(opt,data,'opt')
				let top = 10 // 距离顶部10点像素
				const left = 10 // 距离左边10点
				const lightHeight = 24 // 行高3mm，1mm = 8点
				const pageW = 40 // 页签宽度mm
				const pageH = 30 // 页签高度mm
				const maxFontNums = Math.floor((pageW*8-left*2)/lightHeight) // 每行最多字体数
				let rightTop = 0
				let rightLeft = Math.floor(maxFontNums*0.7)*lightHeight
				// 初始化打印机
				const command = tsc.jpPrinter.createNew()
				command.init()
				command.setSize(pageW, pageH) // 标签纸张宽高，单位mm
				command.setGap(2) // 标签上下间距，单位mm
				command.setCls() // 清除缓冲区数据
				// 经销商文字高度，是否换行
				top = this.textFormat(command,dealer.orgName,maxFontNums,left,top,lightHeight)
				// 数字货架名称文字
				top = top+lightHeight+15
				top = this.textFormat(command,this.basicInfoData.shelfInfo.shelfName,Math.floor(maxFontNums*0.6),left,top,lightHeight)
				rightTop = top
				// 产品编码
				top = top+lightHeight+15
				command.setText(left, top, "TSS24.BF2", 1, 1, data.productCode)
				// 产品名称
				top = top+lightHeight+5
				top = this.textFormat(command,data.product.name,Math.floor(maxFontNums*0.6),left,top,lightHeight)
				// 时间
				top = top+lightHeight+15
				command.setText(left, top, "TSS24.BF2", 1, 1, this.$u.timeFormat(this.timestamp, 'yyyy-mm-dd hh:MM'))
				// 货位号
				command.setText(rightLeft, rightTop, "TSS24.BF2", 1, 1, data.shelfPlaceCode)
				// 二维码
				const qrtop = rightTop +lightHeight+15
				const qrcont = `dealerSn=${dealer.orgSn}&shelfSn=${data.shelfSn}&productCode=${data.productCode}&shelfPlaceCode=${data.shelfPlaceCode}&shelfPlaceSn=${data.shelfPlaceSn}`
				command.setQR(rightLeft, qrtop, "L", 3, "A", qrcont)
				command.setPagePrint(1,data.printQty) // 打印分数1，每个标签重发打印2次
				// -----------
				console.log("开始打印了",command.getData())
				blesdk.senBlData(
				opt.deviceId, 
				opt.serviceId, 
				opt.writeId, 
				command.getData(), 
				function(){
					const result =_this.$refs.partList.getAllChecked()
					_this.printIndex = _this.printIndex + 1
					if(_this.printIndex < result.length){
						_this.printOnce(opt,tsc,blesdk,result[_this.printIndex])
					}else{
						_this.printIndex = 0
						_this.$refs.kkprinter.onPrintSuccess()
					}
				});
			},
			// 打印
			startPrint(opt,tsc,blesdk){
				const result =this.$refs.partList.getAllChecked()
				if(result.length){
					 this.printOnce(opt,tsc,blesdk,result[this.printIndex])
				}else{
					this.toashMsg("请选择产品！")
					this.$refs.kkprinter.onPrintFail()
				}
			},
		}
	}
</script>

<style lang="less">
.replenishment-manualPrint-wrap{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	padding-bottom: 102upx;
	.replenishment-manualPrint-body{
		> view{
			padding: 10rpx 25rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
			border-radius: 25rpx;
			box-shadow: 2rpx 3rpx 5rpx #eee;
		}
	}
	.replenishment-manualPrint-footer{
		padding: 10upx 32upx 12upx;
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		box-shadow: 3px 1px 7px #eee;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}
</style>
