<template>
	<el-dialog :model-value="state.show" @close="closeFun" width="90%">
		<div class="printInitBox" ref="printInitBoxRef">
			<div v-for="(itemMain,indexMain) of state.dataList" :key="indexMain">
				<div
					class="title"
					style="width: 100%; text-align: center; font-size: 30px; letter-spacing: 14px; font-weight: 500; padding: 8px 0; color: black !important"
				>
					{{ t('message.index.deliveryNote1') }}
				</div>
				<table
					style="width: 100%; border-collapse: collapse; border-right: 2px solid black; border-top: 2px solid black; border-left: 2px solid black"
				>
					<tbody style="border-collapse: collapse">
						<tr style="border-collapse: collapse; border-bottom: 2px solid black">
							<td style="text-align: center; vertical-align: middle" colspan="10">
								<div>{{ t('message.index.deliveryNoteNumber1') }}</div>
								<VueQr style="width: 130px; height: 130px" :text="itemMain[0].fBillNo" :size="130" />
							</td>
							<td
								colspan="12"
								style="min-height: 200px; text-align: center; vertical-align: middle; border-left: 2px solid black; border-right: 2px solid black"
							>
								<div style="text-align: left; padding: 16px">
									<div style="font-size: 16px; margin-bottom: 8px; color: #000000">
										<span class="span1">{{ t('message.index.deliveryNoteNumber') }}：</span>
										<span class="span2">{{ itemMain[0].fBillNo }}</span>
									</div>
									<div style="font-size: 16px; margin-bottom: 8px; color: #000000">
										<span class="span1">{{ t('message.index.supplierName') }}：</span>
										<span class="span2">{{ itemMain[0].supplierName }}</span>
									</div>
									<div style="font-size: 16px; margin-bottom: 8px; color: #000000">
										<span class="span1">{{ t('message.index.khmc') }}：</span>
										<span class="span2">{{ itemMain[0].fPurchaseOrgName }}</span>
									</div>
									<div style="font-size: 16px; margin-bottom: 8px; color: #000000">
										<span class="span1">{{ t('message.index.deliveryDate') }}：</span>
										<span class="span2">{{ itemMain[0].deliveryDate }}</span>
									</div>
									<div style="font-size: 16px; margin-bottom: 8px; color: #000000">
										<span class="span1">{{ t('message.index.invoiceNumber') }}：</span>
										<span class="span2">{{ itemMain[0].f_VHUB_Text }}</span>
									</div>
								</div>
							</td>
							<td style="text-align: center; vertical-align: middle" colspan="10">
								<div>{{ t('message.index.invoiceNumber1') }}</div>
								<VueQr style="width: 130px; height: 130px" :text="itemMain[0].f_VHUB_Text" :size="130" />
							</td>
						</tr>
						<tr style="border-collapse: collapse; border-bottom: 2px solid black">
							<td style="text-align: center; font-size: 18px; padding: 4px; color: black" colspan="2">#</td>
							<td style="text-align: center; font-size: 18px; padding: 4px; color: black; border-left: 2px solid black" colspan="5">
								{{ t('message.index.PO') }}
							</td>
							<td style="text-align: center; font-size: 18px; padding: 4px; color: black; border-left: 2px solid black" colspan="5">
								{{ t('message.index.partNumber') }}
							</td>
							<td style="text-align: center; font-size: 18px; padding: 4px; color: black; border-left: 2px solid black" colspan="5">
								{{ t('message.index.materialName') }}
							</td>
							<td style="text-align: center; font-size: 18px; padding: 4px; color: black; border-left: 2px solid black" colspan="2">
								{{ t('message.index.unit1') }}
							</td>
							<td style="text-align: center; font-size: 18px; padding: 4px; color: black; border-left: 2px solid black" colspan="3">
								{{ t('message.index.deliveryQTY') }}
							</td>
							<td style="text-align: center; font-size: 18px; padding: 4px; color: black; border-left: 2px solid black" colspan="4">
								{{ t('message.index.maxcessLot') }}
							</td>
							<td style="text-align: center; font-size: 18px; padding: 4px; color: black; border-left: 2px solid black" colspan="6">
								{{ t('message.index.supplierLot') }}
							</td>
						</tr>
						<tr style="border-collapse: collapse; border-bottom: 2px solid black" v-for="(item, index) of itemMain" :key="index">
							<td style="text-align: center; font-size: 18px; padding: 4px; color: black; width: 3%" colspan="2">
								{{ index + 1 }}
							</td>
							<td width="3%" style="text-align: center; font-size: 18px; padding: 4px; color: black; border-left: 2px solid black" colspan="5">
								{{ item.purchaseOrderFBillNo }}
							</td>
							<td style="text-align: center; font-size: 18px; padding: 4px; color: black; border-left: 2px solid black" colspan="5">
								{{ item.materialCode }}
							</td>
							<td style="text-align: center; font-size: 18px; padding: 4px; color: black; border-left: 2px solid black" colspan="5">
								{{ item.materialName }}
							</td>
							<td style="text-align: center; font-size: 18px; padding: 4px; color: black; border-left: 2px solid black" colspan="2">
								{{ item.unitName }}
							</td>
							<td style="text-align: center; font-size: 18px; padding: 4px; color: black; border-left: 2px solid black" colspan="3">
								{{ item.qty }}
							</td>
							<td style="text-align: center; font-size: 18px; padding: 4px; color: black; border-left: 2px solid black" colspan="4">
								{{ item.mssSupplierLot }}
							</td>
							<td style="text-align: center; font-size: 18px; padding: 4px; color: black; border-left: 2px solid black" colspan="6">
								{{ item.fSupplierLot }}
							</td>
						</tr>
					</tbody>
				</table>
				<table style="width: 100%; border-collapse: collapse; margin-top: 18px; border: none">
					<tbody style="width: 100%; border: none">
						<tr style="font-size: 18px; color: black; width: 100%; border: none">
							<td style="font-size: 18px; width: 10%; color: black; border: none">{{ t('message.index.shipper') }}：</td>
							<td style="font-size: 18px; width: 10%; color: black; border: none"></td>
							<td style="font-size: 18px; width: 10%; color: black; border: none"></td>
							<td style="font-size: 18px; width: 10%; color: black; border: none"></td>
							<td style="font-size: 18px; width: 10%; color: black; border: none"></td>
							<td style="font-size: 18px; width: 10%; color: black; border: none"></td>
							<td style="font-size: 18px; width: 10%; color: black; border: none"></td>
							<td style="font-size: 18px; width: 10%; color: black; border: none"></td>
							<td style="font-size: 18px; width: 10%; color: black; border: none">{{ t('message.index.receiver') }}：</td>
							<td style="font-size: 18px; color: black; width: 8.3%; border: none"></td>
						</tr>
					</tbody>
				</table>
				<table style="width: 100%; border-collapse: collapse; margin-top: 8px; border: none">
					<tbody style="width: 100%; border: none">
						<tr style="width: 100%; border: none">
							<td style="text-align: right; font-size: 18px; color: black; width: 6.67%; border: none">
								{{ t('message.index.year') }}
							</td>
							<td style="text-align: right; font-size: 18px; color: black; width: 6.67%; border: none">
								{{ t('message.index.month') }}
							</td>
							<td style="text-align: right; font-size: 18px; color: black; width: 6.67%; border: none">
								{{ t('message.index.day') }}
							</td>
							<td style="text-align: right; font-size: 18px; color: black; width: 6.67%; border: none"></td>
							<td style="text-align: right; font-size: 18px; color: black; width: 6.67%; border: none"></td>
							<td style="text-align: right; font-size: 18px; color: black; width: 6.67%; border: none"></td>
							<td style="text-align: right; font-size: 18px; color: black; width: 6.67%; border: none"></td>
							<td style="text-align: right; font-size: 18px; color: black; width: 6.67%; border: none"></td>
							<td style="text-align: right; font-size: 18px; color: black; width: 6.67%; border: none"></td>
							<td style="text-align: right; font-size: 18px; color: black; width: 6.67%; border: none"></td>
							<td style="text-align: right; font-size: 18px; color: black; width: 6.67%; border: none"></td>
							<td style="text-align: right; font-size: 18px; color: black; width: 6.67%; border: none"></td>
							<td style="text-align: right; font-size: 18px; color: black; width: 6.67%; border: none">
								{{ t('message.index.year') }}
							</td>
							<td style="text-align: right; font-size: 18px; color: black; width: 6.67%; border: none">
								{{ t('message.index.month') }}
							</td>
							<td style="text-align: right; font-size: 18px; color: black; width: 6.67%; border: none">
								{{ t('message.index.day') }}
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<div class="btnList">
			<el-button type="primary" @click="printElement">{{ t('message.index.print') }}</el-button>
		</div>
	</el-dialog>
</template>
<script setup lang="ts">
import { reactive, defineExpose, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import VueQr from 'vue-qr/src/packages/vue-qr.vue';
import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
import htmlToPdfmake from 'html-to-pdfmake';

pdfMake.vfs = pdfFonts.vfs;
pdfMake.fonts = {
	AlibabaPuHuiTi: {
		normal: import.meta.env.import.meta.env.VITE_API_URL + '/SimHei.ttf',
		bold: import.meta.env.import.meta.env.VITE_API_URL + '/SimHei.ttf',
		italics: import.meta.env.import.meta.env.VITE_API_URL + '/SimHei.ttf',
		bolditalics: import.meta.env.import.meta.env.VITE_API_URL + '/SimHei.ttf',
	},
};
const printInitBoxRef = ref();
const { t } = useI18n();
const state = reactive({
	show: false,
	dataList: [],
});
const closeFun = () => {
	state.show = false;
};
const splitArrayInto10Parts = (arr:any) => {
  let result:any = [];
  let resultMin:any = []
  if(arr.length > 10){
    arr.forEach((item:any) => {
      resultMin.push(item)
      if(resultMin.length === 10){
        result.push(resultMin)
        resultMin = []
      }
    })
  } else {
    result.push(arr)
  }
  return result;
}
const showFun = (list: any) => {
	state.dataList = splitArrayInto10Parts(list);
	state.show = true;
};
const printElement = () => {
	const html = printInitBoxRef.value.innerHTML;
	const options = {
		tableAutoSize: true,
		defaultStyles: {
			title: { fontSize: 14 },
		},
	};
	const content = htmlToPdfmake(html, options);
  var i = 0
	const docDefinition = {
		content: content,
		pageSize: 'A4', // 明确指定纸张类型
		pageOrientation: 'landscape', // 设置为横向
		pageMargins: [40, 10, 40, 40], // 调整页边距[左, 上, 右, 下]
		footer: function (currentPage: any, pageCount: any) {
			return { text: `${pageCount}-${currentPage}`, alignment: 'center' };
		},
		defaultStyle: {
			font: 'AlibabaPuHuiTi',
		},
    pageBreakBefore: (node:any) =>{
      if(node.style && node.style.indexOf('title') !== -1 ){
        i++
        console.log(i)
        if(i > 1){
          return true
        }
      }
    }
	};
	pdfMake.createPdf(docDefinition).print();
};
defineExpose({
	closeFun,
	showFun,
});
</script>
<style scoped lang="scss">
.printInitBox {
	.title {
		width: 100%;
		text-align: center;
		font-size: 30px;
		letter-spacing: 14px;
		font-weight: 500;
		padding: 8px 0;
		color: black !important;
	}

	.mainBox {
		width: 100%;
		border: 2px solid black;

		.codeBox {
			width: 100%;
			display: flex;

			.codeBoxItem {
				width: calc(100% / 3);
				min-height: 200px;
			}

			.codeBoxItem:nth-child(2) {
				border-left: 2px solid black;
				border-right: 2px solid black;
			}
		}
	}
}

.btnList {
	margin-top: 26px;
	display: flex;
	justify-content: center;
}
</style>
