<!DOCTYPE html>
<html>
<head>
  <title>请点击“打印”打印处方签</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
  <link href="../../node_modules/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" />
</head>
<style>
  html, body {
    height: 100%;
  }

  .container-fluid {
    height: 100%;
    padding: 5% 0;
  }

  .list-group {
    height: 80%;
    overflow: auto;
    margin-bottom: 10%;
  }

  .printer-btn-box {
    display: flex;
    justify-content: flex-end;
    padding: 0 3%;
  }

  .printer-btn {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  .active {
    height: 70px;
    font-size: 20px;
    background-color: #0099ff !important;
    border-color: #c6c9ce !important;
  }

  .list-group{
    font-size: 15px;
  }

  .list-group-item-action{
    color: #8e9699;
  }

  .printer-button {
    width: 65px;
    margin-right: 10px;
    background-color: #4495ec !important;
    border-color: #4495ec !important;
  }

  .printer-button:hover {
    background-color: #4495ec !important;
    border-color: #4495ec !important;
  }

  .cancel-button {
    width: 65px;
    color: #4495ec !important;
    background-color: #fff !important;
    border-color: #4495ec !important;
  }

  .cancel-button:hover {
    color: #4495ec !important;
    background-color: #fff !important;
    border-color: #4495ec !important;
  }

</style>

<body>
  <div class="container-fluid" id="div">
    <div class="list-group">

    </div>
    <div class="printer-btn-box">
      <div class="printer-btn">
        <button type="button" class="btn btn-success printer-button">打印</button>
        <button type="button" class="btn btn-danger cancel-button">取消</button>
      </div>
    </div>
  </div>
</body>

<script type="text/javascript">
  window.$ = window.jQuery = require('jquery');
  const ipcRenderer = require('electron').ipcRenderer;

  let printData = {
    printer: '',
    pdf_url: ''
  }
  $(function () {
    // 获取打印机数据,拼接打印机列表
    ipcRenderer.on('printerData', function (event, json_data) {
      let data = JSON.parse(json_data)
      let defaultPrinter = data.defaultPrinter;

      printData.pdf_url = data.pdf_url;

      // 绘制页面
      let html = [];
      for (const printer of data.listPrinter) {
        if (printer === defaultPrinter) {
          html.push(`<a href="#" class="list-group-item list-group-item-action active" data-name="${printer}">
                        <i class="bi bi-printer-fill"></i> &nbsp;${printer}
                     </a>
          `)
          printData.printer = printer;
          continue;
        }
        html.push(`<a href="#" class="list-group-item list-group-item-action" data-name="${printer}">
                      <i class="bi bi-printer-fill"></i> &nbsp;${printer}
                   </a>
        `)
      }
      $(".list-group").html(html.join(''));
    })

    // 绑定列表点击事件
    $(".list-group").on('click', 'a', function () {
      $(".list-group a").removeClass('active');
      $(this).addClass('active');
      printData.printer = $(this).data('name');
    })

    // 绑定打印点击事件
    $(".printer-button").click(function () {
      let data = JSON.stringify(printData);
      ipcRenderer.send('print', data)
    });

    // 绑定取消打印事件
    $(".cancel-button").click(function () {
      ipcRenderer.send('close_listPrinter');
    })
  })

</script>
