<template>
  <img :src="url">
</template>

<script lang="ts">
// eslint-disable-next-line @typescript-eslint/no-var-requires
const { AwesomeQR } = require('awesome-qr')
import { ComponentOptions } from 'awesome-qr/lib/awesome-qr'
import { defineComponent, PropType, ref } from 'vue'
type Options = {
  text: string
  size?: number
  margin?: number
  correctLevel?: number
  maskPattern?: number
  version?: number
  components?: ComponentOptions
  colorDark?: string
  colorLight?: string
  autoColor?: boolean
  backgroundImage?: string | Buffer
  backgroundDimming?: string
  gifBackground?: ArrayBuffer
  whiteMargin?: boolean
  logoImage?: string | Buffer
  logoScale?: number
  logoMargin?: number
  logoCornerRadius?: number
  dotScale?: number
}
export default defineComponent({
  name: 'SkQrCode',
  props: {
    options: Object as PropType<Options>,
  },
  emits: ['genQrCode'],
  setup(props, { emit }) {
    const url = ref<string | Buffer | ArrayBuffer>('')
    new AwesomeQR(props.options).draw().then(dataURL => {
      url.value = dataURL
      emit('genQrCode', dataURL)
    })
    return {
      url,
    }
  },
})
</script>
<style lang="scss" scoped>

</style>
