<template>
  <t-dialog
    :footer="false"
    placement="center"
    @close="closeDialog"
    :visible="QrCodevisible"
    :draggable="true"
  >
    <div class="qr-box">
      <canvas
        class="qrcode"
        :id="id"
        :style="{ width: width, height: height }"
      ></canvas>
    </div>
  </t-dialog>
</template>

<script lang="ts" setup>
import QrCode from 'qrcode';
const props = defineProps({
  QrCodevisible: Boolean,
  QrCode: String,
  width: {
    type: String,
    default: '300px',
  },
  height: {
    type: String,
    default: '300px',
  },
  id: String,
});
const emit = defineEmits(['closeDialog']);
const getQrcode = () => {
  let canvas = document.querySelector(`#${props.id}`);
  QrCode.toCanvas(canvas, props.QrCode);
};
watch(
  () => props.QrCode,
  (v) => {
    if (v) {
      getQrcode();
    }
  }
);
const closeDialog = () => {
  emit('closeDialog', false);
};
</script>

<style lang="less" scoped>
@import '@/style/flex.less';
.qr-box {
  .dja();
}
.t-dialog {
  width: 335px;
}
.t-dialog__body {
  padding: 30px 0 0 0;
}
.QR-code {
  width: 262px;
  height: 262px;
  margin: 0 auto;
  img {
    width: 262px;
    height: 262px;
    display: block;
  }
}
</style>
