<!--
  ~ Copyright (c) 2023. Author Hubert Formin <2399270194@qq.com>
  -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Print preview</title>
    <link rel="stylesheet" href="./tag_print.css" />
  </head>

  <body>
    <div id="app">
      <div class="print_view">
        <div class="ewm" id="ewm"></div>
        <div class="header">
          <img class="logo" :src="data.ticketLogo || './logo.png'" />
          <!-- <span class="title">{{data.ticket_logo}}</span> -->
        </div>
        <div class="number_wrap">
          <!-- <div class="num" v-if="data.outNumber">{{data.outNumber}}</div> -->
          <div class="info" v-if="data.masterId">座位号：{{data.masterId}}</div>
        </div>
        <div class="shop_info">
          <div class="name">{{data.name}}</div>
          <div class="text" v-if="data.skuName">【{{data.skuName}}】</div>
        </div>
        <div class="time">{{data.createdAt}}</div>
        <div class="tips">建议尽快享用，风味更佳 {{ data.count }}</div>
      </div>
    </div>
    <script src="./qrcode.js"></script>
    <script type="module">
      const { ipcRenderer } = require("electron");

      import {
        createApp,
        ref,
        onMounted,
      } from "../node_modules/vue/dist/vue.esm-browser.js";

      createApp({
        setup() {
          const data = ref({});

          onMounted(() => {
            ipcRenderer.on("getParams", (event, arg) => {
              data.value = JSON.parse(arg);
              // console.log(data.value);

              let size = 46;
              let qrcode = new QRCode(document.getElementById("ewm"), {
                text: data.value.outNumber,
                width: size,
                height: size,
                correctLevel: QRCode.CorrectLevel.H,
              });

              ipcRenderer.send(
                "printTagStart",
                JSON.stringify({ deviceName: data.value.deviceName })
              );

              // setTimeout(() => {
              //   ipcRenderer.send(
              //     "printTagStart",
              //     JSON.stringify({ deviceName: data.value.deviceName })
              //   );
              // }, 100);
            });
          });

          return {
            data,
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>
