import { defineComponent } from 'vue'
import styles from './index.module.less'
import logo from '@/common/images/logo.png'
import iconLogo from '@/common/images/icon_logo.png'
import QRCode from 'qrcode'

export default defineComponent({
  name: 'codeDownLoad',
  props: {
    shareUrl: {
      type: String,
      default: ''
    }
  },
  mounted() {
    // console.log(this.shareUrl, 'this.shareUrl')
    // const canvas = document.getElementById('canvas')
    const canvas = this.$refs.canvas
    QRCode.toCanvas(
      canvas,
      this.shareUrl,
      {
        margin: 1
      },
      (error: any) => {
        if (error) console.log(error)
        console.log('success')
      }
    )
  },
  render() {
    return (
      <>
        <div class={[styles.download, 'downloadCustom']}>
          <div class={styles.qrcode}>
            <canvas ref="canvas" class={styles.qrcodeCanvas}></canvas>
            <img src={iconLogo} class={styles.qrcodeLogo} />
          </div>
          <div class={styles.logo}>
            <p class={styles.tips}>
              温馨提示：保存图片到相册或长按识别二维码进入查看喔～
            </p>
            <img src={logo} />
            <p>扫码下载酷乐秀开启学习之旅</p>
          </div>
        </div>
      </>
    )
  }
})
