<template>
	<div>
		<div id="pdfDom" class="container" ref="pdfContent">
			<div class="title">
				<span>光芯科技</span>
				<span>交接单</span>
			</div>
			<canvas id="barcode"></canvas>
			<p class="lineStyle">物料：{{ name }}</p>
			<p class="lineStyle">批次号：{{ batch }}</p>
			<p class="lineStyle">数量：{{ count }}</p>
		</div>
		<el-button type="primary" @click="toGetPdf1">打印 </el-button>
	</div>
</template>
<script>
import axios from "axios";
import config from "@/config";
import http from "@/utils/request";
import getPdf from "@/utils/htmlToPdf";
import PdfLoader from "@/utils/html2pdf";

import html2canvas from "html2canvas";
export default {
	data() {
		return {
			material_name: "玻璃片",
			batch: "20240723_001",
			count: "1000",
			date: "2023-01-01",
			sender: "切片-石小静",
			resave: "活化-白海军",
			visible: false,
		};
	},
	mounted() {
		var canvas = document.getElementById("barcode");
		var context = canvas.getContext("2d");
		context.clearRect(0, 0, 210, 270);
		JsBarcode("#barcode", "9780199532179", {
			format: "CODE128",
			displayValue: true,
			fontSize: 24,
			lineColor: "#000000",
		});
	},
	methods: {
		toGetPdf(val = false, download = false) {
			let that = this;
			this.$nextTick(() => {
				setTimeout(() => {
					let title = "交接单";
					getPdf(title, download).then((res) => {
						console.log("res", res);

						// 创建 FormData 对象
						let formData = new FormData();
						formData.append("file", res, "document.pdf"); // 添加文件到 FormData
						formData.append("printer_name", "GP-3150TN"); // 添加其他字段

						// 发送 POST 请求
						http.post("http://localhost:8080/prints/", formData)
							.then((response) => {
								console.log("postRes", response);
							})
							.catch((error) => {
								console.error("postError", error);
							});
					});
				}, 1000);
			});
		},
		/*  将base64转换为文件,接收2个参数，第一是base64，第二个是文件名字    最后返回文件对象 */
		dataURLtoFile(dataurl, filename) {
			var arr = dataurl.split(","),
				mime = arr[0].match(/:(.*?);/)[1],
				bstr = atob(arr[1]),
				n = bstr.length,
				u8arr = new Uint8Array(n);
			while (n--) {
				u8arr[n] = bstr.charCodeAt(n);
			}
			return new File([u8arr], filename, { type: mime });
		},

		toGetPdf1() {
			let str = [
				"SIZE 70 mm,90 mm",
				"GAP 2 mm,0 mm",
				"CLS",
				"WINTEXT 100,80,36,0,0,0,Simhei,光芯科技——交接单",
				'BARCODE 100,140,"128",108,0,0,2,4,"' + this.batch + '"',
				"WINTEXT 100,280,36,0,0,0,Simhei,物料：" + this.material_name,
				"WINTEXT 100,340,36,0,0,0,Simhei,批次：" + this.batch,
				"WINTEXT 100,400,36,0,0,0,Simhei,数量：" + this.count,
				"WINTEXT 100,460,36,0,0,0,Simhei,日期：" + this.date,
				"WINTEXT 100,520,36,0,0,0,Simhei,送料：" + this.sender,
				"WINTEXT 100,580,36,0,0,0,Simhei,收料：" + this.resave,
				"PRINT 1",
			];
			// 送料：工段-姓名
			// 收料：工段-姓名
			let obj = {};
			obj.printer_commands = str;
			obj.printer_name = "GP-3150TNS";
			http.post("http://localhost:8080/prints/", obj)
				// http.post("http://192.168.1.242:8080/prints/", obj)
				.then((response) => {
					console.log("postRes", response);
				})
				.catch((error) => {
					console.error("postError", error);
				});
		},
	},
};
</script>
<style scoped>
.container {
	width: 210px;
	height: 270px;
	padding: 10px 5px;
	border: 1px solid #dddddd;
	background-color: #ffffff;
}
.title {
	/* display: flex;
	justify-content: space-between; */
	font-size: 18px;
}
#barcode {
	/* position: absolute; */
	width: 200px;
	height: 100px;
}
.lineStyle {
	font-size: 14px;
	margin-bottom: 5px;
}
</style>
