<template>
	<div>
		<a-flex gap="middle" horizontal>
			<span class="ant-form-text">请输入打印的条码数量:</span>
			<a-form-item name="input-number" no-style>
				<a-input-number v-model:value="inputRef" :min="1" :max="30" />
			</a-form-item>

			<button @click="printCode">打印条形码</button>
		</a-flex>
		<div id="barcodes-container">
			<!-- 条形码将被动态插入到这里 -->
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import JsBarcode from 'jsbarcode'
	import printJS from 'print-js'
	import api from '@/api'

	const props = defineProps({
		// 接收父组件传递的条形码数量
		materialId: {
			type: Number,
			default: 0,
		},
	})
	const clearContent = () => {
		inputRef.value = 0
		const container = document.getElementById('barcodes-container')
		if (container) container.innerHTML = ''
	}
	// 向父组件暴露清空条形码容器的函数
	defineExpose({ clearContent })

	const inputRef = ref(0)

	watch(inputRef, (newVal) => {
		fetchAndPrintBarcodes(newVal)
	})

	const printCode = () => {
		const container = document.getElementById('barcodes-container')
		if (!container) {
			window.console.log('条形码容器未找到')
			return
		}
		// 设置页面大小以适应小纸张（40mm x 30mm）
		const widthInches = (40 * 0.0393701).toFixed(3) // 约1.575英寸
		const heightInches = (30 * 0.0393701).toFixed(3) // 约1.181英寸

		// 打印配置
		const printOptions: printJS.Configuration = {
			printable: 'barcodes-container',
			type: 'html',
			scanStyles: false,
			honorMarginPadding: false,
			targetStyles: ['*'],
			style: `
		        @page {
		          size: ${widthInches}in ${heightInches}in;
		          margin: 0;
		        }
		        body {
		          margin: 0;
		          padding: 0;
		          font-size: 6px;
		        }
		        #barcodes-container canvas {
		          display: block;
		          margin-bottom: 2mm; /* 调整条形码之间的间距 */
		        }
		      `,
			onLoadingStart: () => console.log('开始加载'),
			onLoadingEnd: () => console.log('加载完成'),
			onError: (err: unknown) => console.error('打印出错:', err),
		}

		// 显示条形码容器以便打印
		container.style.display = 'block'

		// 调用 printJS 进行打印
		printJS(printOptions)
	}
	// 定义一个函数来从后端获取条形码字符串并打印
	const fetchAndPrintBarcodes = (count: number) => {
		if (count <= 0) return
		// 清空之前的条形码容器
		const container = document.getElementById('barcodes-container')
		if (!container) throw new Error('条形码容器未找到')
		container.innerHTML = ''

		// 从后端获取条形码字符串数组
		api.materialApi.material.generateBarcodes(props.materialId, { count: count }, (res: Array<string>) => {
			res.forEach((barcodeString: string, index: number) => {
				const canvasId = `barcode-${index}`
				const canvasElement = document.createElement('canvas')
				// 设置画布大小
				canvasElement.width = 472 // 宽度接近 40mm
				canvasElement.height = 354 // 高度接近 30mm

				canvasElement.id = canvasId
				container.appendChild(canvasElement)
				// 使用JsBarcode生成条形码
				JsBarcode(`#${canvasId}`, barcodeString, {
					// format: "EAN13", // 或者根据需要选择其他格式
					width: 1, // 条形码线条宽度
					height: 70, // 条形码高度
					displayValue: true, // 显示条形码下方的文本
					fontOptions: 'bold', // 文本样式
					fontSize: 12, // 文本大小
					textMargin: 5, // 文本与条形码之间的间距
					margin: 10, // 条形码周围的空白边距
				})
			})
		})
	}

	// 如果需要在组件挂载时自动执行打印，请取消注释以下代码
	// onMounted(fetchAndPrintBarcodes);
</script>

<style scoped>
	/* 针对打印样式的样式 */
	@media print {
		#barcodes-container {
			display: block;
		}
	}
</style>
