<template>
	<!-- 采购上架对应的采购收货打印页面-->
	<view class="content" style="padding:0rpx 20rpx 100rpx;min-height: calc(100vh - 120rpx);">
		<view class="tabs-box" v-if="isHave">
			<view @click="tabIndex = 1" :class="tabIndex == 1?'active1' :''"  style="padding: 10rpx 0px;">检验指引单</view>
			<view @click="tabIndex = 2" :class="tabIndex == 2?'active1' :''"  style="padding: 10rpx 0px;">上架指引单</view>
		</view>
		<view class="" :style="{'paddingTop':isHave?'100rpx': '30rpx'}">
			<view class="box" style="page-break-before:always;" v-if="tabIndex == 1">
				<view class="">
					<table border='1'>
						<thead>
							<tr class='top1'>
								<th>发货单号:</th>
								<th colspan='2'>{{data1.asnNumber}}</th>
							</tr>
							<tr>
								<th>物料代码</th>
								<th>供应商批次</th>
								<th>检验数量</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item,index) in showTableInspectDTOList" :key='index'>
								<td>{{item.itemCode}}</td>
								<td>{{item.supplierBatch}}</td>
								<td>{{item.sampleQty}}</td>
							</tr>
						</tbody>
					</table>
				</view>
			</view>
		</view>
		<com-empty-view v-if="data.length==0"></com-empty-view>
		<!-- 只用于展示页面 -->
		<view class="" v-if="tabIndex == 2">
			<view class="box" style="margin-bottom: 20rpx;" v-for='(item,index) in showTableSubList' :key='index'>
				<view class="top">
					<view class="mb-kw">
						目标库位：<view>{{item.toLocationCode}}</view>
					</view>
					<view class="mb-bo">
						<view class="mb-left">
							<view class="mb-text">
								物料号：<view>{{item.itemCode}}</view>
							</view>
							<view class="mb-text">
								托包装号：<view>{{item.packingNumber}}</view>
							</view>
						</view>
						<view class="mb-right">
							<view class="mb-text">
								数量：<view>{{item.qty}}{{item.uom}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="" style="position: fixed;width: 100%;bottom: 0rpx;left: 0px;">
			<button @click="printImage"
				style='background:rgb(60, 156, 255) !important ;color: white;margin-top: 80rpx;'> 打印<text v-if="tabIndex == 1">检验指引单</text><text v-if="tabIndex == 2&&isHave">上架指引单</text></button>
		</view>

	</view>
</template>

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

	export default {
		name: 'pointPutawayJob',
		data() {
			return {
				data: {
					sublist: []
				},
				newHtmlContent: '', //打印传入的html
				newHtmlContent1: '', //打印传入的html
				isLoadFinish: false,
				ids: '',
				tabIndex: 1,
				data1: '',
				currentPage: 1,
				pageSize: 3,
				showTableSubList: [],
				showTableInspectDTOList:[],
				
				currentPage1: 1,
				pageSize1: 20,
				number:'',
				isHave:false
			}
		},

		methods: {
			// #ifdef APP
			// 打印
			printImage() {
				if (this.tabIndex == 1) {
					testModule.doHTMLPrint(this.newHtmlContent1)
				} else {
					testModule.doHTMLPrint(this.newHtmlContent)
				}
			},
			// 读取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
			formatDate(val) {
				return dateFormat(val)
			},
			// 获取采购上架检验html
			getPointPutawayJobHtml() {
				this.$nextTick(async () => {
					let str = ''
					this.readFile(htmlFileUrl, (htmlContent) => {
						this.newHtmlContent = htmlContent
						this.data.sublist.forEach(item => {
							str += `<div class="box" style="page-break-before:always;" ><br />
								<div class="top">
									<div class="mb-kw">
										目标库位：<div>${item.toLocationCode}</div>
									</div>
									<div class="mb-bo">
									<div class="mb-left">
										<div class="mb-text">
											物料号：<div>${item.itemCode}</div>
										</div>
										<div class="mb-text">
											托包装号：<div>${item.packingNumber}</div>
										</div>
									</div>
									<div class="mb-right">
										<div class="mb-text">
											数量：<div>${item.qty}${item.uom}</div>
										</div>
									</div>
									</div>
								</div>
							`
						})
						this.newHtmlContent = this.newHtmlContent.replace(
							"mainBody", str); //替换物品代码
					});

				})
			},
			// 获取采购收货指引单html
			getPurchaseReceiptJobHtml() {
				this.$nextTick(async () => {
					let str2 = ''
					this.readFile(htmlFileUrl1, (htmlContent) => {
						this.newHtmlContent1 = htmlContent
						str2 = `<div class="box" style="page-break-before:always;" ><br />
									<div class="">
										<table border='1'>
											<thead>
												<tr  class='top'>
													<th>发货单号:</th>
													<th colspan='2'>${this.data1.asnNumber}</th>
												</tr>
												<tr>
													<th>物料代码</th>
													<th>供应商批次</th>
													<th>检验数量</th>
												</tr>
											</thead>
											<tbody>
												strBody
											</tbody>
										</table>
									</div>
								</div>
								`
						let str1 = ''
						this.data1.inspectDTOList.forEach(item => {
							str1 += `
										<tr>
											<td>${item.itemCode}</td>
											<td>${item.supplierBatch}</td>
											<td>${item.sampleQty}</td>
										</tr>	
									`
						})
						str2 = str2.replace("strBody", str1)
						console.log(335, str1)
						this.newHtmlContent1 = this.newHtmlContent1.replace(
							"mainBody", str2); //替换物品代码
					});

				})
			},
			getTableSubList() {
				if (this.data.sublist.length > this.pageSize) {
					const array = this.data.sublist.slice(
						(this.currentPage - 1) * this.pageSize,
						this.currentPage * this.pageSize
					)
					if(array.length>0){
						this.showTableSubList = [...this.showTableSubList, ...array]
						this.currentPage += 1
					}
				} else {
					this.showTableSubList = this.data.sublist
				}
				// console.log(233,this.showTableSubList)
			},
			getTableInspectDTOList() {
				if (this.data1.inspectDTOList.length > this.pageSize1) {
					const array = this.data1.inspectDTOList.slice(
						(this.currentPage1 - 1) * this.pageSize1,
						this.currentPage1 * this.pageSize1
					)
					if(array.length>0){
						this.showTableInspectDTOList = [...this.showTableInspectDTOList, ...array]
						this.currentPage1 += 1
					}
				} else {
					this.showTableInspectDTOList = this.data1.inspectDTOList
				}
				console.log(233,this.showTableInspectDTOList)
			}
		},
		watch: {
			isLoadFinish: {
				handler(newVal, oldVal) {
					if (newVal == true) {
						// 读取html文件将文件中的内容图换成当前页面的数据
					}
				},
				immediate: true

			}
		},

		onLoad(option) {
			if (option.data) {
				this.data = JSON.parse(decodeURIComponent(option.data));
				this.isHave = true
			}
			if (option.number) {
				this.number = option.number;
			}
		},
		async onShow() {
			await getJimuPutawayJobDetail({
				masterIds: this.data.ids
			}).then(res => {
				this.data.sublist = res.data
				this.getTableSubList()
			})
			// 获取采购收货指引单
			await queryInspectionFreeFlag({
				number: this.number
			}).then(async res1 => {
				this.data1 = res1.data
				this.getTableInspectDTOList()
			})
			this.getPointPutawayJobHtml()
			this.getPurchaseReceiptJobHtml()
		},
		onReachBottom() {
			if(this.tabIndex == 1){
				if(this.showTableInspectDTOList.length!=this.data1.inspectDTOList.length){
					this.getTableInspectDTOList()
				}
			}else{
				if(this.showTableSubList.length!=this.data.sublist.length){
					this.getTableSubList()
				}
			}
			
			
		}
	}
</script>

<style lang="scss">
	.box {
		font-size: 26rpx;
		/* display: flex; */
		/* padding: 20rpx; */
		border: 1px solid #dedede;

	}

	.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: 60rpx;
		line-height: 60rpx;
	}

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

	.right {
		width: 50%;

		border-top: 1px solid #b1b1b1;
	}

	.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;
	}

	.mb-kw {
		border-bottom: 1px solid #dedede;
		padding: 20rpx;
		font-size: 30rpx;

	}

	.mb-kw view {
		font-weight: bold;
		font-size: 46rpx;
		text-align: center;
	}

	.mb-bo {
		display: flex;
	}

	.mb-bo .mb-left {
		flex: 1
	}

	.mb-bo .mb-left .mb-text {
		padding: 20rpx;
	}

	.mb-bo .mb-left .mb-text:nth-child(1) {
		border-bottom: 1px solid #dedede;
	}

	.mb-bo .mb-left .mb-text view {
		font-weight: bold;
		font-size: 32rpx;
		text-align: center;
	}

	.mb-bo .mb-right {
		padding: 20rpx;
		width: 260rpx;
		border-left: 1px solid #dedede;
		display: flex;
		align-items: center;
	}

	.mb-bo .mb-right .mb-text {

		width: 100%;
	}

	.mb-bo .mb-right .mb-text view {
		font-weight: bold;
		font-size: 40rpx;
		text-align: center;
		width: 100%;
	}

	.top1 th {
		font-weight: bold;
		font-size: 16px;
		padding: 10px;
	}


	table {
		border-collapse: collapse;
		border: 1px solid #dedede;
		/* 设置表格的边框 */
		width: 100%
	}

	th {
		text-align: left;
		padding: 10px;
	}

	td {
		padding: 10px;

	}

	.tabs-box {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		border-bottom: 2rpx solid rgb(188, 188, 188);
		position: fixed;
		background: white;
		width: 100%;
		left: 0px;

		view {
			flex: 1;
			text-align: center;
			line-height: 60rpx;
			font-size: 30rpx;
		}

		.active1 {
			color: rgb(60, 156, 255) !important;
			font-weight: bold;
			border-bottom: 4rpx solid rgb(60, 156, 255);
		}
	}
</style>