<template>
  <div class="n-qr"></div>
</template>

<script>
import {prop, loadQRCode} from '@uif/next/lib/utils/tools'

export default {
  name: 'n-qr',
  props: {
    // 二维码数据
    value: prop.string(),
    // 二维码大小
    size: prop.number(180),
    // 暗色
    dark: prop.string('#333333'),
    // 亮色
    light: prop.string('#ffffff')
  },
  watch: {
    value () {
      this.update()
    }
  },
  mounted () {
    this.update()
  },
  beforeDestroy () {
    this.destroy()
  },
  methods: {
    destroy () {
      this.qrCode.clear()
    },
    update () {
      if (this.qrCode) {
        this.qrCode.makeCode(this.value)
      } else {
        loadQRCode().then(QRCode => {
          this.qrCode = new QRCode(this.$el, {
            text: this.value,
            width: this.size,
            height: this.size,
            colorDark: this.dark,
            colorLight: this.light,
            correctLevel: QRCode.CorrectLevel.H
          })
        })
      }
    }
  }
}

</script>
