<template>

  <el-dialog v-model="isView" title="预览" :close-on-press-escape="false" :show-close="false">
    <div id="printInfo" ref="printRef">
      <div class="content" v-for=" (pageData,index) in pageDatas"
           :style="{pageBreakAfter: 'always',width: cmToPx(pageWidth)+'px',height: cmToPx(pageHeight)+'px',marginBottom:'4px'}">
        <div v-for="i in nodes" class="node" :style="{left:i.position?.x+'px',top: i.position?.y+'px'}">
          <template v-if="i.type === 'text'">
            <TextNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
                      :pageSize="{width:  cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></TextNode>
          </template>
          <template v-if="i.type === 'image'">
            <ImageNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
                       :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"></ImageNode>
          </template>
          <template v-if="i.type === 'barCode'">
            <BarCodeNode :index="index" v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
                         :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"></BarCodeNode>
          </template>
          <template v-if="i.type === 'QRCode'">
            <QRCodeNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
                        :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"></QRCodeNode>
          </template>
          <template v-if="i.type === 'dateTime'">
            <TimeNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
                      :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"></TimeNode>
          </template>
          <template v-if="i.type === 'select'">
            <SelectNode :isView="true" :isPrint="isPrint" :pageData="pageData"
                        :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"
                        v-bind="i"></SelectNode>
          </template>
          <template v-if="i.type === 'inputNode'">
            <InputNode :isView="true" :isPrint="isPrint" :pageData="pageData"
                       :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"
                       v-bind="i"></InputNode>
          </template>

        </div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">

    <el-dropdown split-button type="primary" @click="printFun" @command="switchPrinter" style="margin-right: 8px;">
      {{ printName() }}
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item :command="-1">导出PDF</el-dropdown-item>
          <el-dropdown-item divided :command="0">本地打印</el-dropdown-item>
          <el-dropdown-item :divided="k===0" :command="i.id" v-for=" (i,k) in printers">{{ i.name }}</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
        <!--        <el-button type="primary" @click="printFun">打印</el-button>-->
        <!--        <el-button type="primary" v-print="printInfoObj">打印</el-button>-->
        <el-button @click="closePrint">关闭</el-button>
      </span>
    </template>
  </el-dialog>
  <div id="printArea" v-if="printPngList.length>0">
    <div
      v-for="(url, index) in printPngList"
      :key="index"
      class="print-page"
    >
      <img :src="url" class="print-image" />
    </div>
  </div>
</template>
<script setup>

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
import { options } from '@/views/print/tool.js';
import TextNode from '@/views/print/nodes/textNode.vue';
import ImageNode from '@/views/print/nodes/image.vue';
import BarCodeNode from './nodes/barCodeNode.vue';
import QRCodeNode from './nodes/QRCodeNode.vue';
import TimeNode from './nodes/timeNode.vue';
import SelectNode from './nodes/selectNode.vue';
import InputNode from './nodes/inputNode.vue';

const printType = ref(0);
const printers = ref([
  {
    id: 1,
    name: '网络打印机1'
  },
  {
    id: 2,
    name: '网络打印机2'
  },
  {
    id: 3,
    name: '网络打印机3'
  }
]);
const printPngList = ref([]);
const isView = ref(false);

const isPrint = ref(false);
const printRef = ref();
const pageWidth = ref(21);
const pageHeight = ref(29.7);
const pageDatas = ref([{}]);
const { cmToPx } = options;
const nodes = ref([]);
onMounted(() => {
  nodes.value = JSON.parse(localStorage.getItem('printNodes') || '[]');
});

const printInfoObj = {
  id: 'printInfo',
  preview: false,  // 是否开启预览
  beforeOpenCallback(vue) {
    console.log('触发打印工具打开前回调');
  },
  openCallback(vue) {
    console.log('触发打印工具打开的回调');
  },
  closeCallback() {
    console.log('触发关闭打印工具回调');
  },
  previewBeforeOpenCallback() {
    console.log('触发预览前回调');
  },
  previewOpenCallback() {
    console.log('触发预览的回调');
  }
};
const switchPrinter = (e) => {
  console.log(e);
  printType.value = e;
};
const printFun = (e) => {
  if (printType.value === -1) {
    isPrint.value = true;
    nextTick(() => {
      const element = printRef.value;
      let eles = element.querySelectorAll('.content');
      const pros = [];

      eles.forEach((ele, index) => {
        pros.push(
          html2canvas(ele).then(canvas => {
            const imgData = canvas.toDataURL('image/png');
            const pdf = new jsPDF();
            pdf.addImage(imgData, 'PNG', 0, 0);
            pdf.save(`${new Date().getTime()}-${index}.pdf`);
          })
        );
      });
      Promise.all(pros).then((values) => {
        isPrint.value = false;
      });
    });
  } else if (printType.value === 0) {
    isPrint.value = true;
    printPngList.value = [];
    nextTick(() => {
      const element = printRef.value;
      let eles = element.querySelectorAll('.content');
      const pros = [];

      eles.forEach((ele, index) => {
        pros.push(
          html2canvas(ele).then(canvas => {
            const imgData = canvas.toDataURL('image/png');
            printPngList.value.push(imgData);
          })
        );
      });
      Promise.all(pros).then((values) => {
        window.print();
        isPrint.value = false;
        printPngList.value = [];
      });
    });
  } else {
  }
};
const closePrint = () => {
  isView.value = false;
};
const openPrint = (pages, templateId) => {
  isView.value = false;
  nextTick(() => {
    nodes.value = JSON.parse(localStorage.getItem('printNodes') || '[]');
    isView.value = true;
    let pageData = [];
    if (Array.isArray(pages)) {
      pageData = pages;
    }
    if (typeof pages !== 'object' || pages === null) {
      pageData = [pages];
    }
    console.log(pageData);
    pageDatas.value = pageData || [];
  });
};
const printName = () => {
  if (printType.value === -1) {
    return '导出PDF';
  } else if (printType.value === 0) {
    return '本地打印';
  } else {
    let name = printers?.value?.find(e => e.id === printType?.value)?.name;
    return name || '';
  }
};
defineExpose({
  openPrint
  // closePrint
});
</script>
<style scoped>
.content {
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 1px solid #ccc;
}

.node {
  position: absolute;
}

</style>
<style>
.print-page {
  page-break-after: always;
  text-align: center;
  padding: 20px;
  background: white;
}

.print-image {
  max-width: 100%;
  height: auto;
}

/* 打印样式：仅显示图片区域 */
@media print {
  @page {


    margin: 0;

  }
  body * {
    visibility: hidden !important;
  }

  #printArea,
  #printArea * {
    visibility: visible !important;
  }

  #printArea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  .print-page {
    page-break-after: always;
  }
}
</style>
