import { defineComponent } from 'vue'
import styles from './index.module.less'
import successTips from '../images/success_tips.png'
import { Button } from 'vant'
import { browser } from '@/helpers/utils'

import wxBg from '../../down-load/images/wx_bg.png'

export default defineComponent({
  name: 'inviteSuccess',
  data() {
    return {
      wxStatus: false
    }
  },
  methods: {
    onDownload() {
      if (browser().weixin) {
        this.wxStatus = true
        return
      }
      if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        window.location.href =
          'https://itunes.apple.com/cn/app/id1626971695?mt=8'
      } else if (/(Android)/i.test(navigator.userAgent)) {
        window.location.href =
          'https://appstore.ks3-cn-beijing.ksyuncs.com/clx-student-domain.apk'
      } else {
        this.$toast('请用手机或移动设备打开')
      }
    }
  },
  render() {
    return (
      <div class={styles.inviteSuccess}>
        <img src={successTips} />

        <p class={styles.h2}>恭喜你注册成功</p>
        <p class={styles.tips}>下载酷乐秀APP开启器乐学习之旅！</p>

        {!browser().isApp && (
          <div class={'btnGroup'}>
            <Button
              type="primary"
              round
              class={styles.btnDownload}
              onClick={this.onDownload}
            >
              下载酷乐秀
            </Button>
          </div>
        )}

        {this.wxStatus && (
          <div
            class={styles.wxpopup}
            onClick={() => {
              this.wxStatus = false
            }}
          >
            <img src={wxBg} alt="" />
          </div>
        )}
      </div>
    )
  }
})
