<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Print preview</title>
  <!-- 新增1：添加CSP策略，允许加载网络图片 -->
  <meta http-equiv="Content-Security-Policy"
    content="default-src *; img-src * data:; script-src 'self' 'unsafe-inline' 'unsafe-eval';" />
  <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">
        <!-- 新增2：添加@error回退，图片加载失败用默认 -->
        <img class="logo" :src="data.ticketLogo + '?t=' + new Date().getTime()"
          @error="e => e.target.src = './logo.png'" />
      </div>
      <div class="number_wrap">
        <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);
            let size = 46;
            let qrcode = new QRCode(document.getElementById("ewm"), {
              text: data.value.outNumber,
              width: size,
              height: size,
              correctLevel: QRCode.CorrectLevel.H,
            });
            // 新增3：延迟500ms打印，给网络图片加载时间
            setTimeout(() => {
              ipcRenderer.send("printTagStart", JSON.stringify({ deviceName: data.value.deviceName }));
            }, 500);
          });
        });
        return { data };
      },
    }).mount("#app");
  </script>
</body>

</html>