<template>
  <div style="width: 100%; height: 100vh; overflow: hidden">
    <div class="left">
      <div class="printTemplateList" v-for=" i in printTemplateList">
        <el-card @click="setNodes(i)" class="moduleCard" shadow="never"
                 :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                 :body-style="{padding:'4px 0'}">
          <template #header>
            <el-image style="width: 100%; height: 100%" :src="lineImg" fit="contain" />
          </template>
          <div class="moduleText">{{ i.templateName }}</div>
        </el-card>
      </div>
    </div>
    <div class="center">
      <div id="printInfo" ref="printRef">
        <div
          class="content"
          v-for="pageData 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"
                :page-size="{ width: cmToPx(pageWidth), height: cmToPx(pageHeight) }"
              ></ImageNode>
            </template>
            <template v-if="i.type === 'barCode'">
              <BarCodeNode
                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>
    </div>
    <div class="right">
      {{ pageDatas }}
      <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>
    </div>
  </div>
  <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';
import { useRoute } from 'vue-router';
import { isJSON } from '@/utils/scrin.js';
import { listPrintTemplateList } from '@/api/system/printTemplateList/index';
import lineImg from '@/views/boardGenerate/images/lineImg.png';
import { getSysPrintTemplateNodeList } from '@/api/system/printTemplateNode/index';

const printTemplateList = ref([]);
const route = useRoute();
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(true);

const jsonData = ref('');
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([]);
let printNode = `[
  {
    "id": "area_d14a13ad_1a78_4171_b54f_93d18abd528d",
    "type": "area",
    "dimensions": {
      "width": 794,
      "height": 1123
    },
    "computedPosition": {
      "x": 0,
      "y": 0,
      "z": 0
    },
    "handleBounds": {
      "source": null,
      "target": null
    },
    "selected": false,
    "dragging": false,
    "resizing": false,
    "initialized": false,
    "isParent": true,
    "position": {
      "x": 0,
      "y": 0
    },
    "data": {},
    "events": {},
    "name": "area"
  },
  {
    "id": "text_1902a5ff_d7fc_4750_b634_8a88868f3ddb",
    "type": "text",
    "dimensions": {
      "width": 94,
      "height": 19
    },
    "computedPosition": {
      "x": 151.1811023622047,
      "y": 37.79527559055118,
      "z": 1
    },
    "handleBounds": {
      "source": null,
      "target": null
    },
    "selected": false,
    "dragging": false,
    "resizing": false,
    "initialized": false,
    "isParent": false,
    "position": {
      "x": 151.1811023622047,
      "y": 37.79527559055118
    },
    "data": {
      "options": {
        "default": "供应商",
        "border": [
          {
            "type": "top",
            "isShow": false,
            "width": 1,
            "color": "#000",
            "borderType": "solid"
          },
          {
            "type": "right",
            "isShow": false,
            "width": 1,
            "color": "#000",
            "borderType": "solid"
          },
          {
            "type": "bottom",
            "isShow": false,
            "width": 1,
            "color": "#000",
            "borderType": "solid"
          },
          {
            "type": "left",
            "isShow": false,
            "width": 1,
            "color": "#000",
            "borderType": "solid"
          }
        ]
      },
      "outputData": {}
    },
    "events": {},
    "name": "text",
    "parentNode": "area_d14a13ad_1a78_4171_b54f_93d18abd528d",
    "extent": "parent",
    "style": {
      "width": "94px",
      "height": "19px"
    }
  },
  {
    "id": "text_899234fc_9ace_49c3_8127_fadeabcbd23d",
    "type": "text",
    "dimensions": {
      "width": 94,
      "height": 19
    },
    "computedPosition": {
      "x": 150.97637795275588,
      "y": 56.69291338582677,
      "z": 1
    },
    "handleBounds": {
      "source": null,
      "target": null
    },
    "selected": false,
    "dragging": false,
    "resizing": false,
    "initialized": false,
    "isParent": false,
    "position": {
      "x": 150.97637795275588,
      "y": 56.69291338582677
    },
    "data": {
      "options": {
        "default": "客户名称",
        "border": [
          {
            "type": "top",
            "isShow": false,
            "width": 1,
            "color": "#000",
            "borderType": "solid"
          },
          {
            "type": "right",
            "isShow": false,
            "width": 1,
            "color": "#000",
            "borderType": "solid"
          },
          {
            "type": "bottom",
            "isShow": false,
            "width": 1,
            "color": "#000",
            "borderType": "solid"
          },
          {
            "type": "left",
            "isShow": false,
            "width": 1,
            "color": "#000",
            "borderType": "solid"
          }
        ]
      },
      "outputData": {}
    },
    "events": {},
    "name": "text",
    "parentNode": "area_d14a13ad_1a78_4171_b54f_93d18abd528d",
    "extent": "parent",
    "style": {
      "width": "94px",
      "height": "19px"
    }
  },
  {
    "id": "text_8da299d4_a35b_4ba9_bfac_860c200b6cf3",
    "type": "text",
    "dimensions": {
      "width": 94,
      "height": 19
    },
    "computedPosition": {
      "x": 245.66929133858267,
      "y": 56.69291338582677,
      "z": 1
    },
    "handleBounds": {
      "source": null,
      "target": null
    },
    "selected": false,
    "dragging": false,
    "resizing": false,
    "initialized": false,
    "isParent": false,
    "position": {
      "x": 245.66929133858267,
      "y": 56.69291338582677
    },
    "data": {
      "options": {
        "field": "name",
        "default": "",
        "border": [
          {
            "type": "top",
            "isShow": false,
            "width": 1,
            "color": "#000",
            "borderType": "solid"
          },
          {
            "type": "right",
            "isShow": false,
            "width": 1,
            "color": "#000",
            "borderType": "solid"
          },
          {
            "type": "bottom",
            "isShow": false,
            "width": 1,
            "color": "#000",
            "borderType": "solid"
          },
          {
            "type": "left",
            "isShow": false,
            "width": 1,
            "color": "#000",
            "borderType": "solid"
          }
        ]
      },
      "outputData": {}
    },
    "events": {},
    "name": "text",
    "parentNode": "area_d14a13ad_1a78_4171_b54f_93d18abd528d",
    "extent": "parent",
    "style": {
      "width": "94px",
      "height": "19px"
    }
  },
  {
    "id": "text_5a3a87dd_1697_43a1_9678_f20421e1f3df",
    "type": "text",
    "dimensions": {
      "width": 396,
      "height": 19
    },
    "computedPosition": {
      "x": 245.66929133858267,
      "y": 37.79527559055118,
      "z": 1
    },
    "handleBounds": {
      "source": null,
      "target": null
    },
    "selected": false,
    "dragging": false,
    "resizing": false,
    "initialized": false,
    "isParent": false,
    "position": {
      "x": 245.66929133858267,
      "y": 37.79527559055118
    },
    "data": {
      "options": {
        "field": "DONGLONG HOME TEXTILE CO..,LTD.",
        "default": "DONGLONG HOME TEXTILE CO..,LTD.",
        "border": [
          {
            "type": "top",
            "isShow": false,
            "width": 1,
            "color": "#000",
            "borderType": "solid"
          },
          {
            "type": "right",
            "isShow": false,
            "width": 1,
            "color": "#000",
            "borderType": "solid"
          },
          {
            "type": "bottom",
            "isShow": false,
            "width": 1,
            "color": "#000",
            "borderType": "solid"
          },
          {
            "type": "left",
            "isShow": false,
            "width": 1,
            "color": "#000",
            "borderType": "solid"
          }
        ]
      },
      "outputData": {}
    },
    "events": {},
    "name": "text",
    "parentNode": "area_d14a13ad_1a78_4171_b54f_93d18abd528d",
    "extent": "parent",
    "style": {
      "width": "396px",
      "height": "19px"
    }
  },
  {
    "id": "text_e9bde955_7c37_44d0_8c37_265ad44fdd9d",
    "type": "text",
    "dimensions": {
      "width": 75,
      "height": 19
    },
    "computedPosition": {
      "x": 170.0787401574803,
      "y": 302.3622047244094,
      "z": 1
    },
    "handleBounds": {
      "source": null,
      "target": null
    },
    "selected": false,
    "dragging": false,
    "resizing": false,
    "initialized": false,
    "isParent": false,
    "position": {
      "x": 170.0787401574803,
      "y": 302.3622047244094
    },
    "data": {
      "options": {
        "field": "deviceName",
        "default": "",
        "border": [
          {
            "type": "top",
            "isShow": false,
            "width": 1,
            "color": "#000",
            "borderType": "solid"
          },
          {
            "type": "right",
            "isShow": false,
            "width": 1,
            "color": "#000",
            "borderType": "solid"
          },
          {
            "type": "bottom",
            "isShow": false,
            "width": 1,
            "color": "#000",
            "borderType": "solid"
          },
          {
            "type": "left",
            "isShow": false,
            "width": 1,
            "color": "#000",
            "borderType": "solid"
          }
        ]
      },
      "outputData": {}
    },
    "events": {},
    "name": "text",
    "parentNode": "area_d14a13ad_1a78_4171_b54f_93d18abd528d",
    "extent": "parent",
    "style": {
      "width": "75px",
      "height": "19px"
    }
  },
  {
    "id": "QRCode_94877b0d_0e26_4a8e_b159_8d99120725a0",
    "type": "QRCode",
    "dimensions": {
      "width": 189,
      "height": 189
    },
    "computedPosition": {
      "x": 415.74803149606294,
      "y": 264.56692913385825,
      "z": 1001
    },
    "handleBounds": {
      "source": null,
      "target": null
    },
    "selected": true,
    "dragging": false,
    "resizing": false,
    "initialized": false,
    "isParent": false,
    "position": {
      "x": 415.74803149606294,
      "y": 264.56692913385825
    },
    "data": {
      "options": {
        "default": "123123121"
      },
      "outputData": {}
    },
    "events": {},
    "name": "QRCode",
    "parentNode": "area_d14a13ad_1a78_4171_b54f_93d18abd528d",
    "extent": "parent"
  }
]`;
const messageFun = (event) => {
  console.log(event);
  // if (isJSON(event.data)) {
  // let data = JSON.parse(event.data);
  let data = event.data;
    if (data.type === 'print') {
      printFun();
    }
    if (data.type === 'JSONDATA') {
      console.log(88);
      if (typeof data.message === 'object' && data.message !== null && !Array.isArray(data.message)) {
        pageDatas.value = [data.message];
        // window.chrome?.webview?.postMessage('setDataFinally');
      } else if (Array.isArray(data.message)) {
        pageDatas.value = data.message;
        // window.chrome?.webview?.postMessage('setDataFinally');
      } else {
        // window.chrome?.webview?.postMessage('setDataFail');
      }
      console.log('message', data.message);
    }
    if (data.type === 'setTemplate') {
      nodes.value = JSON.parse(printNode || '[]');
    }
  // }
  console.log(event);
};
const setNodes = (data) => {
  // nodes.value = JSON.parse(printNode || '[]');

  getSysPrintTemplateNodeList({ templateInfoId: data.templateInfoId }).then(v => {
    nodes.value = v.data.map(vv => {
      return {
        id: vv.id,
        type: vv.type,
        name: vv.name,
        dimensions: {
          width: vv.width,
          height: vv.height
        },
        handleBounds: {
          source: null,
          target: null
        },
        position: {
          x: vv.x,
          y: vv.y
        },
        data: JSON.parse(vv.data)
      };
    });
  });
};
onMounted(() => {
  window.chrome?.webview?.addEventListener('message', messageFun);
  window.chrome?.webview?.postMessage('onMounted');
  const param = route.query.data;
  if (param) {
    let code = decodeURIComponent(param);
    if (!code) return;
    let data = JSON.parse(code);
    if (Array.isArray(data)) {
      pageDatas.value = data;
    }
    if (data !== null && typeof data === 'object' && !Array.isArray(data)) {
      pageDatas.value = [data];
    }
  }
  listPrintTemplateList().then(data => {
    console.log(data);
    printTemplateList.value = data.rows;
  });
});

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();
        // window.chrome?.webview?.postMessage('completed');
        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;
}

.left {
  display: inline-block;
  width: 550px;
  height: 100vh;
  overflow: auto;
  margin-right: 50px;
}

.center {
  display: inline-block;
  width: calc(100% - 200px - 600px);
  height: 100vh;
  overflow: auto;

  &::-webkit-scrollbar {
    display: none;
  }
}

.right {
  vertical-align: top;
  display: inline-block;
  width: 200px;
}
</style>
<style>
.print-page {
  page-break-after: always;
  text-align: center;
  padding: 20px;
  background: white;
}

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

/* 打印样式：仅显示图片区域 */
@media print {
  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>
