<template>
	<view class="content" style="padding:30rpx 20rpx 100rpx;min-height: calc(100vh - 120rpx);">
		<!-- 只用于展示页面 -->
		<view class="box" v-for="(item,index) in data" :key='index' style="margin-bottom: 20rpx;">
			<view class="left">
				<view class="left-item">
					<view class="label">物品代码</view>
					<view class="value bold-font" id="name1">{{item.itemCode}}</view>
				</view>
				<view class="left-item">
					<view class="label">物品名称</view>
					<view class="value" id="name2">{{item.itemName}}</view>
				</view>
				<view class="left-item">
					<view class="label">包装名称</view>
					<view class="value">{{item.packName}}</view>
				</view>
				<view class="left-item">
					<view class="label">包装号</view>
					<view class="value">{{item.packageCode}}</view>
				</view>
				<view class="left-item" v-if="item.productionLineCode&&item.productionLineCode.length>0">
					<view class="label">生产线</view>
					<view class="value">{{item.productionLineCode}}</view>
				</view>
				<view class="left-item" v-if="!(item.productionLineCode&&item.productionLineCode.length>0)">
					<view class="label">父包装号</view>
					<view class="value">{{item.parentNumber}}</view>
				</view>
				<view class="left-item" v-if="!(item.productionLineCode&&item.productionLineCode.length>0)">
					<view class="label">ASN</view>
					<view class="value">{{item.asnNumber}}</view>
				</view>
				<view class="left-item">
					<view class="label">数量</view>
					<view class="value bold-font">{{item.qty}}</view>
				</view>

			</view>
			<view class="right">
				<view class="image">
					<l-qrcode ref="qrcodeRef" useCanvasToTempFilePath @success="success($event,item)" :value="item.barcodeString"
						size="300rpx"></l-qrcode>
				</view>
				<view class="left-item">
					<view class="label">批次</view>
					<view class="value">{{item.batch}}</view>
				</view>
				<view class="left-item">
					<view class="label">物料类型</view>
					<view class="value">{{item.itemType}}</view>
				</view>
				<view class="left-item" v-if="!(item.productionLineCode&&item.productionLineCode.length>0)">
					<view class="label">供应商</view>
					<view class="value">{{item.supplierCode}}</view>
				</view>
				<view class="left-item">
					<view class="label">打印时间</view>
					<view class="value">{{item.printTimes}}</view>
				</view>
			</view>
		</view>
		<view class="" style="position: fixed;width: 100%;bottom: 0rpx;left: 0px;" v-show="isLoadFinish">
			<button @click="printImage"
				style='background:rgb(60, 156, 255) !important ;color: white;margin-top: 80rpx;'> 打印</button>
		</view>

	</view>
</template>

<script>
	// 打印页面的模板
	const htmlFileUrl = '/hybrid/html/point.html';
	import {
		pathToBase64
	} from "../../api/img-to-base64.js" //引入解压后的js文件，这里我重新命名了文件名
	// #ifdef APP
	var testModule = uni.requireNativePlugin("TestModule")
	// #endif

	export default {
		name: 'point',
		data() {
			return {
				timer: null,
				originData: [],
				data: [],
				newHtmlContent: '', //打印传入的html
				isLoadFinish: false,
				picIndex: 0,
				picUrl: []
			}
		},

		methods: {
			success(img,item) {
				item.barcodeBase641 = img
				uni.hideLoading()
				this.isLoadFinish = true
				// #ifdef APP
				plus.io.resolveLocalFileSystemURL(item.barcodeBase641, (entry) => {
					// 可通过entry对象操作test.html文件 
					entry.file((file) => {
						let fileReader = new plus.io.FileReader();
						fileReader.onloadend = (evt) => {
							console.log("文件路径" + evt.target.result)
							item.barcodeBase64 = evt.target.result
						}
						fileReader.readAsDataURL(file);
					});
				}, (e) => {
					console.log("失败" + e)
				});
				// #endif
			},
			setHtmlData() {
				let str = ''
				this.readFile(htmlFileUrl, (htmlContent) => {
					this.newHtmlContent = htmlContent
					this.data.forEach(item => {
						str += `<div class="box" style="page-break-before:always;"><br />
									<div class="left">
										<div class="left-item">
											<div class="label">物品代码</div>
											<div class="value bold-font" id="name1">${item.itemCode}</div>
										</div>
										<div class="left-item">
											<div class="label">物品名称</div>
											<div class="value" id="name2">${item.itemName}</div>
										</div>
										<div class="left-item">
											<div class="label">包装名称</div>
											<div class="value">${item.packName}</div>
										</div>
										<div class="left-item">
											<div class="label">包装号</div>
											<div class="value">${item.packageCode}</div>
										</div>`
						if (item.productionLineCode && item.productionLineCode.length > 0) {
							str += `
											<div class="left-item">
												<div class="label">生产线</div>
												<div class="value">${item.productionLineCode}</div>
											</div>
									`
						} else {
							str += `
											<div class="left-item">
												<div class="label">父包装号</div>
												<div class="value">${item.parentNumber}</div>
											</div>
											<div class="left-item">
												<div class="label">ASN</div>
												<div class="value">${item.asnNumber}</div>
											</div>
								`
						}
						str += `
										<div class="left-item">
											<div class="label">数量</div>
											<div class="value bold-font">${item.qty}</div>
										</div>
									</div>
									<div class="right">
										<div class="image">
											<img id='image1' src="${item.barcodeBase64}" alt="" />
										</div>
										<div class="left-item">
											<div class="label">批次</div>
											<div class="value">${item.batch}</div>
										</div>
										<div class="left-item">
											<div class="label">物料类型</div>
											<div class="value">${item.itemType}</div>
										</div>`
						if (!(item.productionLineCode && item.productionLineCode.length > 0)) {
							str += `
											<div class="left-item">
												<div class="label">供应商</div>
												<div class="value">${item.supplierCode}</div>
											</div>
									`
						}
						str += `
										
										<div class="left-item">
											<div class="label">打印时间</div>
											<div class="value">${item.printTimes}</div>
										</div>
									</div>
								</div>`
					})
					this.newHtmlContent = this.newHtmlContent.replace(
						"mainBody", str); //替换物品代码
				});
			},
			printImage() {
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				this.setHtmlData()
				let clearInt = setInterval(() => {
					if (!this.newHtmlContent.mainBody) {
						// #ifdef APP
						testModule.doHTMLPrint(this.newHtmlContent)
						// #endif
						clearInterval(clearInt)
						uni.hideLoading()
					}
				}, 1000)
			},

			// #ifdef APP
			// 读取html文件
			readFile(path, callback) {
				plus.io.resolveLocalFileSystemURL(path, function(entry) {
					entry.file(function(file) {
						var reader = new plus.io.FileReader();
						reader.onloadend = function(e) {
							callback(e.target.result);
						};
						reader.readAsText(file);
					}, function(e) {
						console.log("读取文件失败：" + e.message);
					});
				}, function(e) {
					console.log("获取图片资源失败：" + e.message);
				});
			}
			// #endif
		},

		onLoad(option) {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			if (option.points) {
				this.originData = JSON.parse(option.points);
			}
			this.data = this.originData
		},
	}
</script>

<style>
	.box {
		font-size: 24rpx;
		display: flex;

	}

	.left {
		border-top: 1px solid #b1b1b1;
		border-left: 1px solid #b1b1b1;
		flex: 1;
	}

	.left-item {
		display: flex;
	}

	.label {
		border-bottom: 1px solid #b1b1b1;
		border-right: 1px solid #b1b1b1;
		width: 140rpx;
		padding: 0px 10rpx;
		height: 100rpx;
		line-height: 100rpx;
	}

	.bold-font {
		font-weight: bold;
		font-size: 28rpx;
	}

	.value {
		border-bottom: 1px solid #b1b1b1;
		border-right: 1px solid #b1b1b1;
		padding: 0px 5px;
		height: 100rpx;
		flex: 1;
		width: 0px;
		display: flex;
		align-items: center;
		word-break: break-all;
	}

	.right {
		width: 300rpx;
	}

	.image {
		width: 100%;
		height: 301rpx;
		border-bottom: 1px solid #b1b1b1;
		border-top: 1px solid #b1b1b1;
		border-right: 1px solid #b1b1b1;
	}

	.image img {
		width: calc(100% - 4px);
		height: calc(100% - 4px);
		margin: 4rpx;
	}
</style>