<template>
  <a-modal
    title="二维码"
    :visible="visible"
    width="900px"
    :footer="null"
    @cancel="$emit('close')"
  >

    <a-button type="primary" icon="printer" @click="printQr">
      打印
    </a-button>

    <a-divider />

    <div class="qr-container" ref="printArea">

      <!-- 左侧信息 -->
      <table class="info-table">
        <tr>
          <td class="label">设备名称</td>
          <td>{{ info.deviceName }}</td>
        </tr>
        <tr>
          <td class="label">设备编号</td>
          <td>{{ info.deviceCode }}</td>
        </tr>
        <tr>
          <td class="label">设备型号</td>
          <td>{{ info.typeId }}</td>
        </tr>
        <tr>
          <td class="label">生产厂商</td>
          <td>{{ info.supplierId_dictText }}</td>
        </tr>
        <tr>
          <td class="label">线路</td>
          <td>成都27号线</td>
        </tr>
        <tr>
          <td class="label">安装位置</td>
          <td>{{ info.location_dictText }}</td>
        </tr>
      </table>

      <!-- 右侧二维码 -->
      <div class="qr-box">
        <canvas ref="qrcode"></canvas>
      </div>

    </div>

  </a-modal>
</template>

<script>
import QRCode from "qrcode"

export default {
  name: "DeviceQrModal",

  props: {
    visible: Boolean,
    info: {
      type: Object,
      required: true
    }
  },

  watch: {
    visible(val) {
      if (val) {
        this.$nextTick(() => {
          this.generateQr()
        })
      }
    }
  },

  methods: {

    /**
     * 生成二维码
     */
    async generateQr() {

      const canvas = this.$refs.qrcode

      const text =
        `设备型号: ${this.info.typeId}
设备编号: ${this.info.deviceCode}
设备名称: ${this.info.deviceName}
生产厂商: ${this.info.supplierId_dictText}
线路: 成都27号线
安装位置: ${this.info.location_dictText}`

      await QRCode.toCanvas(canvas, text, {
        width: 180,
        errorCorrectionLevel: "L",
        margin: 1,
        scale: 4
      })

    },

    /**
     * 打印
     */
    printQr() {

      const printHtml = this.$refs.printArea.outerHTML

      const win = window.open("", "", "width=900,height=600")

      win.document.write(`
        <html>
        <head>
          <title>打印二维码</title>
          <style>
            body{
              font-family: Arial;
              padding:20px;
            }
            table{
              border-collapse: collapse;
            }
            td{
              border:1px solid #ccc;
              padding:8px 12px;
            }
          </style>
        </head>
        <body>
          ${printHtml}
        </body>
        </html>
      `)

      win.document.close()

      win.print()

    }

  }

}
</script>

<style scoped>

.qr-container {
  display: flex;
  margin-top: 16px;
}

.info-table {
  width: 60%;
  border-collapse: collapse;
}

.info-table td {
  border: 1px solid #ccc;
  padding: 8px 12px;
}

.label {
  width: 120px;
  font-weight: bold;
  background: #fafafa;
}

.qr-box {
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>