<template>
  <div class="preview-content" ref="previewContentRef">
    <!-- 打印内容区域 -->
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { hiprint } from 'sv-print'
import pluginApiPdf from '@sv-print/plugin-api-pdf3'
import pluginApiImage from '@sv-print/plugin-api-image'
import pluginEleBwip from "@sv-print/plugin-ele-bwip-js";
import pluginTextAuto from '@sv-print/plugin-text-auto'
hiprint.register({
  authKey: '53616C7465645F5F286B418F99190EA3DC1F152B8B1B393ECD4C3D064C735A6A',
  plugins: [
    pluginApiPdf(), // 插件参数
    pluginApiImage(), // 插件参数
    pluginTextAuto({
      sizeList: [10, 9, 8, 7, 6, 5], // 适应最小字体选项
      maxIterations: 15, // 适应次数
      enablePrecision: true, // 启用精确适应
      precision: 0.5, // 适应精确step
      precisionCount: 10, // 适应精确次数
      lineHeightMode: 'auto', // 行高模式 auto | original | normal | unset
      overrideHidden: false, // 超出是否隐藏
      extendsCss: {
        // 扩展css
        'word-wrap': 'break-word' // 单词换行
      }
    }), // 插件参数
    pluginEleBwip({})
  ]
})
// Props
const props = defineProps<{
  template: any
  printData: any
  mutTemplateList: any
  isMut: boolean
  showLineInfo: boolean
}>()

// 预览内容区域引用
const previewContentRef = ref<HTMLElement | null>(null)
const processedHtml = ref('')
console.log(hiprint)

onMounted(async () => {
  let html = ''
  if (props.isMut) {
    // 多模板
    const templates = []
    for (const item of props.mutTemplateList) {
      // 创建模板对象
      const printTemplate = new hiprint.PrintTemplate({
        template: item.templateJson
      })
      templates.push({ template: printTemplate, data: item.printData })
      // 将html内容设置到预览区域
    }
    const mu_jqueryObj = await hiprint.getHtml({
      templates
    })
    html = mu_jqueryObj.html()
  } else {
    // 创建模板对象
    const printTemplate = new hiprint.PrintTemplate({
      template: props.template // 通过props接收模板json对象
    })
    // 获取预览 html
    const jqueryObj = await printTemplate.getHtml(props.printData)
    html = jqueryObj.html()
  }
  console.log(html)
  // 将html内容设置到预览区域
  if (previewContentRef.value) {
    // 创建虚拟DOM元素
    const virtualDiv = document.createElement('div')
    virtualDiv.innerHTML = html

    // 对html内容需要做个优化，查找html里所有的hiprint-printElement元素，看看有没有设置lineHeight，没有则设置lineHeight为1em
    // 在虚拟DOM中查找并修改元素
    const printElementsPanles = virtualDiv.querySelectorAll('.hiprint-printPanel')
    // 循环每个printElementsPanles元素，在元素的最前面塞入一个div，div需要展示4行数据内，分别是行号、料号、模板、份数
    // 行号、料号、模板、份数分别是printData对应下标的purchaseOrderItem、material、templateName、printCount
    let printDataArr = []
    if (props.isMut) {
      props.mutTemplateList.forEach((item) => {
        printDataArr.push(item.printData[0])
      })
    } else {
      printDataArr = [props.printData]
    }

    console.log('------printDataArr-----', printDataArr)
    printElementsPanles.forEach((element, index) => {
      const div = document.createElement('div')
      div.style.marginBottom = '10px'
      div.innerHTML = `
        <div style="font-size: 12px;color: #333">行号: ${printDataArr[index].purchaseOrderItem || '-'}</div>
        <div style="font-size: 12px;color: #333">料号: ${printDataArr[index].material || '-'}</div>
        <div style="font-size: 12px;color: #333">模板: ${printDataArr[index].barcodeTemplateName || '-'}</div>
        <div style="font-size: 12px;color: #333">份数: ${printDataArr[index].tagNumber || '-'}</div>
      `
      if (props.showLineInfo) {
        element.prepend(div)
      }
      element.querySelectorAll('.hiprint-printPaper').forEach((paper) => {
        paper.style.backgroundColor = '#f5f5f5'
      })
    })
    const printElements = virtualDiv.querySelectorAll('.hiprint-printElement')
    console.log('------printElements-----', printElements)
    printElements.forEach((element) => {
      // 获取计算后的样式
      const computedStyle = window.getComputedStyle(element)
      const lineHeight = computedStyle.lineHeight

      // 如果没有设置line-height或者line-height为normal，则设置为1em
      if (lineHeight === 'normal' || !element.style.lineHeight) {
        element.style.lineHeight = '1em'
      }
    })

    // 获取修改后的html内容
    processedHtml.value = virtualDiv.innerHTML

    // 将修改后的html内容设置到预览区域
    previewContentRef.value.innerHTML = processedHtml.value
  }

  // // 打印
  // await printTemplate.print(props.printData);
  // // 批量打印
  // await printTemplate.print([props.printData, props.printData, props.printData]);
  // // 直接打印(静默打印)
  // await printTemplate.print2(props.printData)

  // // 多模板操作
  // const printTemplate2 = new hiprint.PrintTemplate({
  //   template: props.template, // 通过props接收模板json对象
  // });
  // // 多模板预览
  // const jqueryObj2 = await hiprint.getHtml({
  //   templates: [
  //     { template: printTemplate, data: props.printData },
  //     // 批量
  //     { template: printTemplate2, data: [props.printData, props.printData, props.printData] },
  //   ],
  // });
  // const html = jqueryObj2.html();
  // // 多模板打印
  // await hiprint.print({
  //   templates: [
  //     { template: printTemplate, data: props.printData },
  //     // 批量
  //     { template: printTemplate2, data: [props.printData, props.printData, props.printData] },
  //   ],
  // });
  // // 多模板直接打印
  // await hiprint.print2(
  //   {
  //     templates: [
  //       { template: printTemplate, data: props.printData, options: {} },
  //       // 批量
  //       { template: printTemplate2, data: [props.printData, props.printData, props.printData], options: {} },
  //     ],
  //     options: { printer: "", landscape: true },
  //   },
  //   function (data) {
  //     console.log("printSuccess");
  //   },
  //   function (e) {
  //     console.log("printError");
  //   }
  // );
})
defineExpose({ processedHtml })
</script>

<style>
.preview-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
