<template>
  <div :id="refs" :ref="refs"></div>
</template>

<script setup lang="ts">
import QRCode from 'qrcodejs2-fix';
import { ref, onMounted } from 'vue';

const qrcode = ref('');

const props = defineProps({
  refs: {
    type: String,
    required: true
  },
  text: {
    type: String,
    default: '',
  },
  width: {
    type: Number,
    default: 100,
  },
  height: {
    type: Number,
    default: 100,
  },
  typeNumber: {
    type: Number,
    default: 0
  },
  colorDark: {
    type: String,
    default: '#000000'
  },
  colorLight: {
    type: String,
    default: '#ffffff'
  }
});

const refs = ref(props.refs);
onMounted(async () => {
  if (qrcode.value) {
    document.getElementById(refs.value).innerHTML = '';
  }
  qrcode.value = new QRCode(refs.value, {
    text: props.text,
    width: props.width, // 图像宽度
    height: props.height, // 图像高度
    typeNumber: props.typeNumber, //	二维码类型（1~40，输入 0 以自动检测）
    colorDark: props.colorDark, // 前景色
    colorLight: props.colorLight, // 背景色
    correctLevel: QRCode.CorrectLevel.H
    //容错级别，可设置为：
    // QRCode.CorrectLevel.L
    // QRCode.CorrectLevel.M
    // QRCode.CorrectLevel.Q
    // QRCode.CorrectLevel.H
  });

  // makeCode(text)	设置二维码内容
  // clear()	清除二维码。（仅在不支持 Canvas 的浏览器下有效）
  // 使用 API
  // qrcode.clear();
  // qrcode.makeCode('new content');

});
</script>
