<template>
  <div>
    <div ref="qrCodeRef"></div>
    <div v-if="download" class="btn" @click="downloadQrCode">
      <span class="crm-cursor">{{ $t('Raffle.RegistrationForm.item8') }}</span>
    </div>
  </div>
</template>

<script setup>
  import { ref, watch, onMounted, nextTick } from 'vue'
  import QRCode from 'qrcodejs2-fix'

  // Props
  const props = defineProps({
    text: {
      type: String,
      default: '',
    },
    width: {
      type: Number,
      default: 200,
    },
    height: {
      type: Number,
      default: 200,
    },
    colorDark: {
      type: String,
      default: '#333333',
    },
    colorLight: {
      type: String,
      default: '#ffffff',
    },
    logoImage: {
      type: String,
      default: '',
    },
    download: {
      type: Boolean,
      default: false,
    },
  })

  // Refs
  const qrCodeRef = ref(null)
  const qrcode = ref(null)

  // Methods
  const createQrCode = () => {
    if (!props.text) return

    // 先清空
    if (qrcode.value && qrCodeRef.value) {
      qrCodeRef.value.innerHTML = ''
    }

    // 生成二维码
    qrcode.value = new QRCode(qrCodeRef.value, {
      text: props.text,
      width: props.width,
      height: props.height,
      colorDark: props.colorDark,
      colorLight: props.colorLight,
      correctLevel: QRCode.CorrectLevel.H,
    })

    // 添加二维码中间的图片
    if (props.logoImage) {
      const logo = new Image()
      logo.setAttribute('crossOrigin', 'Anonymous')
      logo.src = props.logoImage
      logo.onload = () => {
        const qrImg = qrcode.value._el.getElementsByTagName('img')[0]
        const canvas = qrcode.value._el.getElementsByTagName('canvas')[0]
        qrcode.value._el.title = ''
        canvas.style.display = 'inline-block'
        const ctx = canvas.getContext('2d')
        // 设置logo的大小为二维码图片缩小的3.7倍
        ctx.drawImage(logo, (300 - 300 / 4.5) / 2, (300 - 300 / 4.5) / 2, 300 / 4.5, 300 / 4.5)
        qrImg.src = canvas.toDataURL()
        qrImg.style.display = 'none'
        qrCodeRef.value.appendChild(qrcode.value._el)
      }
    }
  }

  const downloadQrCode = () => {
    const canvasData = qrCodeRef.value.getElementsByTagName('canvas')
    if (canvasData.length > 0) {
      const a = document.createElement('a')
      const event = new MouseEvent('click')
      a.href = canvasData[0].toDataURL('image/png')
      a.download = 'qrcode.png'
      a.dispatchEvent(event)
    }
  }

  // Watchers
  watch(
    () => props.text,
    () => {
      nextTick(() => {
        createQrCode()
      })
    }
  )

  // Lifecycle
  onMounted(() => {
    createQrCode()
  })

  // 给父组件暴露方法
  defineExpose({
    download: downloadQrCode,
  })
</script>

<style scoped lang="scss">
  .btn {
    display: flex;
    justify-content: center;

    span {
      display: inline-block;
      margin: 10px 15px;
      padding: 6px 15px;
      border-radius: 2px;
      background-color: #6b7188;
      color: #ffffff;
      cursor: pointer;
      transition: background-color 0.3s ease;

      &:hover {
        background-color: #5a6074;
      }
    }
  }
</style>
