<template>
  <div></div>
</template>

<script>
import {loadQrCode} from '@uif/admin/lib/utils/load'

export default {
  name: 'u-qr',
  props: {
    text: {
      type: String,
      default: ''
    },
    size: {
      type: Number,
      default: 180
    },
    dark: {
      type: String,
      default: '#333333'
    },
    light: {
      type: String,
      default: '#ffffff'
    }
  },
  data () {
    return {
    }
  },
  watch: {
    text () {
      this.change()
    }
  },
  created () {
  },
  mounted () {
    this.change()
  },
  beforeDestroy () {
    this.destroy()
  },
  methods: {
    change () {
      if (this.text && this.qrCode) {
        this.update()
      } else if (this.text) {
        this.create()
      }
    },
    create () {
      loadQrCode().then(QRCode => {
        this.qrCode = new QRCode(this.$el, {
          text: this.text,
          width: this.size,
          height: this.size,
          colorDark: this.dark,
          colorLight: this.light,
          correctLevel: QRCode.CorrectLevel.H
        })
      })
    },
    update () {
      this.qrCode.makeCode(this.text)
    },
    destroy () {
      this.qrCode.clear()
    }
  }
}

</script>
