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

  <body>
    <div id="app">
      <div class="print_view">
        <div class="title t1">{{data.shop_name}}</div>
        <div class="title t2">
          结算单【{{data.orderInfo && data.orderInfo.masterId}}】
        </div>
        <div class="row">
          订单号:{{data.orderInfo && data.orderInfo.orderNo}}
        </div>
        <div class="row">交易时间:{{data.createdAt}}</div>
        <div class="row">收银员:【POS-1】1</div>
        <div class="line"></div>
        <table class="table">
          <tr>
            <td>品名</td>
            <td>单价</td>
            <td>数量</td>
            <td>小计</td>
          </tr>
          <tr v-for="item in data.carts" :key="item.id">
            <td>
              <div>{{item.name}}</div>
              <div class="sku">{{item.skuName}}</div>
            </td>
            <td>{{item.salePrice}}</td>
            <td>{{item.number}}</td>
            <td>{{item.totalAmount}}</td>
          </tr>
        </table>
        <div class="line"></div>
        <div class="row between">
          <span>合计:</span>
          <span>{{data.amount}}</span>
        </div>
        <!-- <div class="row between">
          <span>合计:</span>
          <span>30.00</span>
        </div> -->
        <div class="row between">
          <span>原价:{{data.amount}}，节省了0</span>
        </div>
        <div class="row between">
          <span>积分:</span>
          <span>0</span>
        </div>
        <div class="row between">
          <span>余额:</span>
          <span>0.00</span>
        </div>
        <div class="line"></div>
        <div class="row">备注:</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(
                  "printStart",
                  JSON.stringify({ deviceName: data.value.deviceName })
                );
              }, 500);
            });
          });

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