<template>
  <div>
    <div v-show="showFlag" style="text-align: center;padding-left: 100px;">
      <div id="qrCode" ref="qrCodeDiv"></div>
    </div>
    <div v-show="!showFlag">
      <a-spin />
    </div>

  </div>
</template>

<script>
import { saveCode } from '@/api/upms/code'
import QRCode from 'qrcodejs2'
export default {
  name: 'QRCode',
  props: {
    alt: {
      type: String,
      default: '请刷新'
    },
    src: { // 金额
      type: String,
      default: ''
    },
    logoSrc: { // 金额
      type: String,
      default: '@/assets/logo_2.png'
    },
    type: { // 1.表示设备
      type: Number,
      default: 1
    },
    width: {
      type: Number,
      default: 200
    },
    height: {
      type: Number,
      default: 200
    }
  },
  data () {
    return {
      showFlag: false,
      codeFlag: false
    }
  },
  watch: {
    src: function () {
      this.showCode()
    }
  },
  created () {
    this.showCode()
  },
  methods: {
    reloadCode () {
      saveCode({ type: this.type, codeId: this.codeId }).then(result => {
        console.log(1111, result)
        this.imageIsExist(result.data).then(res => {
          if (res) {
            this.$refs.imgCode.src = result.data
            this.showFlag = true
            this.codeFlag = true
          } else {
            this.showFlag = true
            this.codeFlag = false
          }
        })
      })
    },
    showCode () {
      console.log(333333)
      this.showFlag = false
      this.$nextTick(function () {
        document.getElementById('qrCode').innerHTML = ''
        // eslint-disable-next-line no-new
        new QRCode(this.$refs.qrCodeDiv, {
          text: this.src,
          width: this.width,
          height: this.height,
          colorDark: '#333333', // 二维码颜色
          colorLight: '#ffffff', // 二维码背景色
          src: this.logoSrc, // 二维码中间的图片
          background: '#ffffff', // 二维码的后景色
          foreground: '#3498db', // 二维码的前景色
          correctLevel: QRCode.CorrectLevel.L // 容错率，L/M/H
        })
      })
      this.showFlag = true
    }
  }

}
</script>

<style scoped>

</style>
