<template>
  <el-dialog :model-value="visible" :title="title" width="400px" @close="close">
    <div class="qrcode-container">
      <div class="sub-title">{{ subTitle }}</div>
      <canvas ref="qrcodeCanvas"></canvas>
    </div>
  </el-dialog>
</template>
  
  <script setup>
import { ref, watch, onMounted, nextTick } from "vue";
import QRCode from "qrcode";
import { set } from "@vueuse/core";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
  },
  qrCodeText: {
    type: String,
    required: true,
  },
  title: {
    type: String,
    default: "",
  },
  subTitle: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["update:visible", "close"]);
const qrcodeCanvas = ref(null);
const generateQrCode = async () => {
  console.log("Generating QR code with text:", props.qrCodeText);
  if (qrcodeCanvas.value && props.qrCodeText) {
    await QRCode.toCanvas(qrcodeCanvas.value, props.qrCodeText, {
      width: 200,
      margin: 2,
    });
  }
};

function close() {
  emit("close");
}
watch(
  () => props.qrCodeText,
  async () => {
    await nextTick();
    generateQrCode();
  }
);
onMounted(async () => {
  await nextTick();
  generateQrCode();
});
</script>
  
  <style scoped>
.qrcode-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0 10px 20px 10px;
}
.sub-title {
  font-size: 14px;
  padding-bottom: 10px;
  color: red;
}
</style>