import { defineComponent } from 'vue'
import styles from './index.module.less'
import successTips from '../images/success_tips.png'
import { Button, Icon } from 'vant'
import { browser } from '@/helpers/utils'
import { postMessage } from '@/helpers/native-message'

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

export default defineComponent({
  name: 'inviteSuccess',
  data() {
    return {
      wxStatus: false,
      androidUrl: '',
      navBarHeight: 0
    }
  },
  async mounted() {
    postMessage({ api: 'getNavHeight' }, res => {
      const { content } = res as any
      const dpi = content.dpi || 2
      if (content.navHeight) {
        const navHeight = content.navHeight / dpi
        this.navBarHeight = navHeight
      }
    })
    try {
      const { data } = await request.get(
        '/api-student/open/appVersionInfo/queryLatestByPlatform',
        {
          params: {
            platform: 'android-student',
            status: 'history'
          }
        }
      )
      this.androidUrl = data.downloadUrl
    } catch {
      //
    }
  },
  methods: {
    onBack() {
      if (browser().isApp) {
        postMessage({ api: 'goBack' })
      } else {
        this.$router.back()
      }
    },
    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 = this.androidUrl //  'https://oss.dayaedu.com/appstore/clx-student-domain.apk'
      } else {
        this.$toast('请用手机或移动设备打开')
      }
    }
  },
  render() {
    return (
      <div class={styles.inviteSuccess}>
        {browser().isApp && (
          <Icon
            name="arrow-left"
            class={styles.backIcon}
            style={{
              top: `calc(${this.navBarHeight}px + 12px)`
            }}
            onClick={this.onBack}
          />
        )}

        <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>
    )
  }
})
