import { Cell, Toast } from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'
import { postMessage } from '@/helpers/native-message'

// import QrCodeVue from 'qrcode.vue'
import QRCode from 'qrcode'
// import { toPng } from 'html-to-image'
import html2canvas from 'html2canvas'

import iconLogo from '@/common/images/icon_logo.png'
import iconTeacher from '@/common/images/icon_teacher.png'
import logo from '../../images/logo.png'
import { state } from '@/state'
import request from '@/helpers/request'

export default defineComponent({
  name: 'share',
  props: {
    teacherId: {
      type: Number
    }
  },
  data() {
    return {
      qrCode: '',
      copyQrCode: '',
      image: null as any
    }
  },
  async mounted() {
    try {
      this.qrCode =
        location.origin + '/student/#/inviteTeacher?id=' + this.teacherId
      const shortRes = await request.post('/api-teacher/sysConfig/shortURL', {
        requestType: 'form',
        data: {
          orginURL: this.qrCode
        }
      })

      this.copyQrCode = shortRes.data
    } catch (e) {
      //
    }

    const canvas = document.getElementById('canvas')
    QRCode.toCanvas(
      canvas,
      this.qrCode,
      {
        margin: 1
      },
      (error: any) => {
        if (error) console.log(error)
        console.log('success')
      }
    )

    this.$nextTick(async () => {
      const container: any = document.getElementById('share-preview-container')
      html2canvas(container, { allowTaint: true, useCORS: true }).then(
        canvas => {
          const url = canvas.toDataURL('image/png')
          this.image = url
        }
      )
    })
  },
  methods: {
    async shareShow() {
      const image = this.image
      if (image) {
        postMessage(
          {
            api: 'shareAchievements',
            content: {
              title: '我在酷乐秀使用小酷Ai练习乐器',
              desc: '酷乐秀小酷Ai帮助我自主练习乐器，真的太好用啦！每天都要坚持练习哦~',
              image,
              video: '',
              type: 'image',
              button: ['copy'],
              url: this.copyQrCode
            }
          },
          (res: any) => {
            if (res && res.content) {
              Toast(
                res.content.message ||
                  (res.content.status ? '分享成功' : '分享失败')
              )
            }
          }
        )
      }
    }
  },
  render() {
    return (
      <>
        <div
          class={styles.continue}
          onClick={() => {
            this.shareShow()
          }}
        >
          分享
        </div>
        <div class={styles.shareSection} id="share-preview-container">
          <div class={styles.section}>
            <Cell
              center
              border={false}
              style={{ padding: 0 }}
              v-slots={{
                icon: () => (
                  <img
                    src={
                      state.user.data.heardUrl
                        ? state.user.data.heardUrl +
                          '?time=' +
                          new Date().valueOf()
                        : iconTeacher
                    }
                    class={styles.img}
                    crossorigin="anonymous"
                  />
                ),
                title: () => (
                  <div>
                    <p class={styles.name}>{state.user.data.username}</p>
                    <p class={styles.titleTips}>酷乐秀入驻老师</p>
                  </div>
                )
              }}
            />
            <p class={[styles.txt, styles.teacherName]}>
              <span>{state.user.data.username}</span>邀请您加入酷乐秀
            </p>
            <p class={styles.txt}>来与我一起踏入音乐殿堂吧！</p>
          </div>

          <div class={[styles.section, styles.download]}>
            <div class={styles.logo}>
              <img src={logo} />
              <p>扫码下载酷乐秀开启学习之旅</p>
            </div>
            <div class={styles.qrcode}>
              {/* <QrCodeVue
                value={this.qrCode}
                style={{ width: '100%', height: '100%' }}
              /> */}
              <canvas id="canvas" class={styles.qrcodeCanvas}></canvas>
              <img src={iconLogo} class={styles.qrcodeLogo} />
            </div>
          </div>
        </div>
      </>
    )
  }
})
