<!--
  ~ 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="./work_print.css" />
  </head>

  <body>
    <div id="app">
      <div class="print_view">
        <div class="title t1">{{data.merchantName}}</div>
        <div class="title t2">交班小票</div>
        <div class="row">交班时间：{{data.startTime}}</div>
        <div class="row">收银员：{{data.staff}}</div>
        <div class="row">当班收入：{{data.totalAmount}}</div>
        <div class="row" v-for="(item,index) in data.payInfos" :key="index">
          &emsp;&emsp;{{item.payType }}：{{item.amount}}
        </div>
        <div class="row">会员数据</div>
        <div class="row" v-for="(item,index) in data.memberData" :key="index">
          &emsp;&emsp;{{item.deposit }}：{{item.amount}}
        </div>
        <div class="row">分类数据</div>
        <div
          class="row"
          v-for="(item,index) in data.productCategories"
          :key="index"
        >
          &emsp;&emsp;{{item.categoryName
          }}&emsp;{{item.num}}&emsp;{{item.amount}}
        </div>
        <div class="row">快捷收款金额：{{data.quickAmount}}</div>
        <div class="row">退款金额：{{data.returnAmount}}</div>
        <div class="row">总收入：{{data.totalAmount}}</div>
        <div class="row">备用金：{{data.imprest}}</div>
        <div class="row">应交金额：{{data.payable}}</div>
        <div class="row">上交金额：{{data.handIn}}</div>
        <div class="empty"></div>
        <div class="row">总订单数：{{data.orderNum}}</div>
        <div class="row">打印时间：{{data.printTime}}</div>
      </div>
    </div>
    <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);

              setTimeout(() => {
                ipcRenderer.send(
                  "printWorkStart",
                  JSON.stringify({ deviceName: data.value.deviceName })
                );
              }, 500);
            });
          });

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