// print.js

export function printElement (elementToPrint) {
  // 创建一个新的浏览器窗口
  const printWindow = window.open('', '_blank', 'height=1024,width=768')
  // 设置新窗口的文档内容
  printWindow.document.write(`
    <html>
      <head>
        <title>Print</title>
        <style>
          @page {
            size: auto;
            margin: 0mm;
          }
          html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
          }
          #print-container {
            display: none
          }
          .img{
            width: 95%;
            height: 180px;
            object-fit: cover;
          }
          .reportMain {
            text-align: center;
            margin: 0 auto;
            font-size: 16px;
            color: #000;
            background-color: #fff;
            border-radius: 8px;

            .reportTitle {
              font-weight: bold;
            }

            .subTitle {
              display: flex;
              justify-content: space-between;
              margin-bottom: 1%;

              .subTitleItems {
                max-width: 30%;
              }
            }

            .inputsDiv {
              display: flex;
              justify-content: space-between;
              .inputsDivItem {
                display: flex;
                align-items: center;
                padding: 0 4px;
                white-space: nowrap;
                .inputsDivItemLabel {
                  padding: 0 4px;
                }
              }
            }

            .reportTable {
              width: 100%;
              border-collapse: collapse;
              table-layout:fixed;
              word-break:break-all;
              text-align: center;
            }
          }
          .reportMainForDisplay {
            text-align: center;
            margin: 10% auto;
            font-size: 16px;
            color: #000;
            background-color: #fff;
            border-radius: 8px;

            .reportTitle {
              font-weight: bold;
            }

            .subTitle {
              display: flex;
              justify-content: space-between;

              .subTitleItems {
                max-width: 30%;
              }
            }

            .inputsDiv {
              display: flex;
              justify-content: space-around;
              .inputsDivItem {
                display: flex;
                align-items: center;
                padding: 0 4px;
                white-space: nowrap;
                .inputsDivItemLabel {
                  padding: 0 4px;
                }
              }
            }

            .reportTable {
              width: 100%;
              border-collapse: collapse;
              table-layout:fixed;
              word-break:break-all;
            }
          }
          .reportMainNoPadding {
            text-align: center;
            margin: 0 auto;
            font-size: 16px;
            color: #000;
            background-color: #fff;
            border-radius: 8px;

            .reportTitle {
              font-weight: bold;
            }

            .subTitle {
              display: flex;
              justify-content: space-between;

              .subTitleItems {
                max-width: 30%;
              }
            }

            .inputsDiv {
              display: flex;
              justify-content: space-between;
              .inputsDivItem {
                display: flex;
                align-items: center;
                padding: 0 4px;
                white-space: nowrap;
                .inputsDivItemLabel {
                  padding: 0 4px;
                }
              }
            }

            .reportTable {
              width: 100%;
              border-collapse: collapse;
              table-layout:fixed;
              word-break:break-all;
            }
          }
          .tools{
            position: fixed;
            right: 2%;
            text-align: right;
            width: 60%;
            cursor: pointer;
            .toolsItem{
              width: 15%;
              margin-right: 3%;
              display: inline-block;
            }
          }
        </style>
      </head>
      <body>
        <!-- 将需要打印的元素内容复制到新窗口中 -->
        ${elementToPrint.innerHTML}
      </body>
    </html>
  `)
  // 延迟执行打印，以确保新窗口的内容已加载完成
  printWindow.document.close() // 关闭文档流，确保内容完全加载
  setTimeout(() => {
    printWindow.print() // 调用打印方法
    printWindow.close()
  }, 500) // 延迟500毫秒后执行打印
}
