import { defineComponent, onMounted, reactive } from 'vue'
import styles from './success.module.less'
import iconSuccess from './images/icon-success.png'
import { Button, showToast } from 'vant'
import { browser } from '@/helpers/utils'
import { useRoute } from 'vue-router'
import wxBg from '../../download/images/wx_bg.png'
import request from '@/helpers/request'

export default defineComponent({
  name: 'apply-success',
  setup() {
    const route = useRoute()

    const state = reactive({
      wxStatus: false,
      type: 'student',
      androidUrl: '',
      buttonText: '下载管乐团学员端',
      t: 'apply' as any
    })

    state.t = route.query.t
    if (state.t === 'pay') {
      document.title = '报名成功'
    } else {
      document.title = '信息提交成功'
    }

    const onDownload = () => {
      if (browser().weixin) {
        state.wxStatus = true
        return
      }

      let urlIos = ''
      let urlAndroid = ''
      if (location.origin.indexOf('online.lexiaoya.cn') > -1) {
        if (state.type === 'student') {
          urlIos = 'https://apps.apple.com/cn/app/%E7%AE%A1%E4%B9%90%E5%9B%A2/id1671474346?uo=4 '
          urlAndroid = state.androidUrl // 'https://oss.dayaedu.com/appstore/gyt-student.apk'
        } else if (state.type === 'teacher') {
          urlIos =
            'https://apps.apple.com/cn/app/%E7%AE%A1%E4%B9%90%E5%9B%A2%E4%BC%B4%E5%AD%A6%E7%AB%AF/id1670584741?uo=4'
          urlAndroid = state.androidUrl // 'https://oss.dayaedu.com/appstore/gyt-teacher.apk'
        } else if (state.type === 'manage') {
          urlIos =
            'https://apps.apple.com/cn/app/%E7%AE%A1%E4%B9%90%E5%9B%A2%E7%AE%A1%E7%90%86%E7%AB%AF/id1671473981?uo=4'
          urlAndroid = state.androidUrl //'https://oss.dayaedu.com/appstore/gyt-manager.apk'
        }
      } else {
        if (state.type === 'student') {
          urlIos = 'https://www.pgyer.com/2Wg2'
          urlAndroid = state.androidUrl //'https://www.pgyer.com/9NBz'
        } else if (state.type === 'teacher') {
          urlIos = 'https://www.pgyer.com/v5yB'
          urlAndroid = state.androidUrl //'https://www.pgyer.com/BQeE'
        } else if (state.type === 'manage') {
          urlIos = 'https://www.pgyer.com/DGrR'
          urlAndroid = state.androidUrl // 'https://www.pgyer.com/TEWv'
        }
      }

      if (browser().ios || /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        urlIos && (window.location.href = urlIos)
      } else if (/(Android)/i.test(navigator.userAgent)) {
        window.location.href = urlAndroid
      } else {
        showToast('请用手机或移动设备打开')
      }
    }

    onMounted(async () => {
      let platform = 'android-student'
      if (state.type === 'student') {
        platform = 'android-student'
      } else if (state.type === 'teacher') {
        platform = 'android-teacher'
      } else if (state.type === 'manage') {
        platform = 'android-school'
      }

      try {
        const { data } = await request.get(
          '/api-student/open/appVersionInfo/queryLatestByPlatform',
          {
            params: {
              platform,
              status: 'history'
            }
          }
        )
        state.androidUrl = data.downloadUrl
      } catch {
        //
      }

      document.title = state.buttonText
    })
    return () => (
      <div class={styles.successContainer}>
        <img src={iconSuccess} class={styles.iconSuccess} />

        <h2>{state.t === 'pay' ? '报名成功' : '信息提交成功！'}</h2>

        <p class={state.t === 'pay' ? '' : styles.applyTip}>
          {state.t === 'pay'
            ? '您已完成乐团报名，请留意乐团开训通知'
            : '您已完成信息提交，请收到开团信息后，才为学生准备相应工具。'}
        </p>

        {state.t === 'pay' && (
          <Button class={styles.downloadBtn} onClick={onDownload}>
            立即下载管乐团APP
          </Button>
        )}

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