<template>
  <div>
    <el-button
      type="primary"
      style="display: block; margin-left: 40px"
      ref="printButton"
      v-print="'#printCanvas'"
    >
      打印
    </el-button>

    <div id="printCanvas" class="container">
      <img :src="srcImg" />

      <div class="date">{{ currentDate }}</div>
      <img :src="qcodeImg" class="qrcodeimg" ass />
      <div class="qrcodeSn">{{ sn }}</div>
    </div>
  </div>
</template>
<script setup>
import QRCode from 'qrcode';
import { ref, onMounted } from 'vue';

const canvasref = ref(null);

const qcodeImg = ref();

const props = defineProps(['url', 'id', 'nameplate']);
console.log(props.url);
const srcImg = ref(props.nameplate);
const sn = ref(props.id);
const printButton = ref(null);
const currentDate = ref('');
function getCurrentDate() {
  const date = new Date();
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  currentDate.value = `${year}-${month}-${day}`;
}
onMounted(() => {
  QRCode.toDataURL(props.url, (error, url) => {
    if (url) {
      qcodeImg.value = url;
    }
    if (error) console.error(error);
  });
  getCurrentDate(); // 获取当前日期
});
</script>
<style second>
.container {
  width: 30vw;
  height: calc(20vw);
  position: relative;
  img {
    width: 100%;
    height: 100%;
  }
  .qrcodeimg {
    width: 6vw;
    height: 6vw;
    position: absolute;
    bottom: 2.2vw;
    right: 1.5vw;
  }
  .qrcodeSn {
    position: absolute;
    bottom: 1.3vw;
    right: 1.9vw;
    color: #000;
    font-weight: bold;
  }
  .equipment {
    position: absolute;
    top: 231px;
    left: 281px;
    font-size: 20px;
    font-weight: 500;
    color: #000;
  }
  .date {
    position: absolute;
    top: 6.4vw;
    left: 8.5vw;

    font-size: 20px;
    font-weight: 500;
    color: #000;
  }
}
</style>
<style scoped>
@media print {
  @page {
    size: 90mm 60mm;
    margin: 0;
    padding: 0;
  }
  body {
    font-family: 'Arial', sans-serif;
    font-size: 12pt;
    color: #333;
    margin: 0;
    padding: 0;
  }

  .container {
    width: 90mm;
    height: 60mm;
    position: relative;
    .equipment {
      position: absolute;
      top: 24mm;
      left: 28mm;
      font-size: 6pt;
      font-weight: 500;
      color: #000;
    }
    .date {
      position: absolute;
      top: 71px;
      left: 25mm;

      font-size: 9pt;
      font-weight: 500;
      color: #000;
    }
    img {
      width: 85mm;
      height: 58mm;
    }

    .qrcodeimg {
      width: 17mm;
      height: 17mm;
      position: absolute;
      bottom: 33px;
      right: 10mm;
    }

    .qrcodeSn {
      position: absolute;
      bottom: 22px;
      right: 11mm;
      font-size: 6pt;
      color: #000;
      font-weight: bold;
    }
  }
  .containerTable {
    width: 60mm;
    border: 1px solid #000;
    background: #ccc;
    font-size: 12pt;
    color: #000;
    .item {
      border-top: 1px solid #000;
      padding-left: 10px;
      height: 5mm;
      line-height: 5mm;
    }
    .flexCss {
      text-align: center;
      display: flex;
      .flexleft {
        width: 30%;
        border-right: 1px solid #000;
      }
    }
    .footer {
      border-top: 1px solid #000;
      display: flex;
      .footerLeft {
        width: 70%;
        text-align: center;
        .smallsize {
          font-size: 2pt;
        }
      }
    }
  }
}
</style>
