import { Button, showToast, Image } from 'vant'
import { defineComponent, onMounted, reactive } from 'vue'
import { useRoute } from 'vue-router'
import styles from './index.module.less'
import wxBg from './images/wx_bg.png'
import { browser } from '@/helpers/utils'
import student from './images/student-center.png'
import teacher from './images/teacher-center.png'
import manage from './images/manage-center.png'

// 唤起前缀
// BandMusicTeam:// 管乐团
// BandMusicTeamTeacher://
// BandMusicTeamManager://
export default defineComponent({
  name: 'download',
  setup() {
    const route = useRoute()

    const state = reactive({
      wxStatus: false,
      type: 'student',
      buttonText: '下载管乐团学生端'
    })

    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%E7%AE%A1%E7%90%86%E7%AB%AF/id1671473981?uo=4'
          urlAndroid = 'https://appstore.ks3-cn-beijing.ksyuncs.com/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 = 'https://appstore.ks3-cn-beijing.ksyuncs.com/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 = 'https://appstore.ks3-cn-beijing.ksyuncs.com/gyt-manager.apk'
        }
      } else {
        if (state.type === 'student') {
          urlIos = 'https://www.pgyer.com/2Wg2'
          urlAndroid = 'https://www.pgyer.com/9NBz'
        } else if (state.type === 'teacher') {
          urlIos = 'https://www.pgyer.com/v5yB'
          urlAndroid = 'https://www.pgyer.com/BQeE'
        } else if (state.type === 'manage') {
          urlIos = 'https://www.pgyer.com/DGrR'
          urlAndroid = 'https://www.pgyer.com/TEWv'
        }
      }

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

    onMounted(() => {
      const type: any = route.query.type
      state.type = type ? type : 'student'
      if (type === 'student') {
        state.buttonText = '下载管乐团学生端'
      } else if (type === 'teacher') {
        state.buttonText = '下载管乐团伴学端'
      } else if (type === 'manage') {
        state.buttonText = '下载管乐团管理端'
      }

      document.title = state.buttonText
    })
    return () => (
      <div class={[styles.downloadContainer]}>
        {state.type !== 'teacher' && state.type !== 'manage' && <Image src={student} />}
        {state.type === 'teacher' && <Image src={teacher} />}
        {state.type === 'manage' && <Image src={manage} />}

        <div class={styles.buttonGroup}>
          <Button round size="large" color="#FF8057" class={styles.btn} onClick={onDownload}>
            {state.buttonText}
          </Button>
        </div>

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