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_bg.png'
import teacher from './images/teacher_bg.png'
import manage from './images/manage_bg.png'
import OSticky from '@/components/o-sticky'

// 唤起前缀
// 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.colexiu.com') > -1) {
        if (state.type === 'student') {
          urlIos = 'https://itunes.apple.com/cn/app/id1626971695?mt=8'
          urlAndroid = 'https://appstore.ks3-cn-beijing.ksyuncs.com/clx-student-domain.apk'
        } else if (state.type === 'teacher') {
          urlIos = 'https://itunes.apple.com/cn/app/id1626971149?mt=8'
          urlAndroid = 'https://appstore.ks3-cn-beijing.ksyuncs.com/clx-teacher-domain.apk'
        } else if (state.type === 'manage') {
          urlIos = 'https://itunes.apple.com/cn/app/id1626971149?mt=8'
          urlAndroid = 'https://appstore.ks3-cn-beijing.ksyuncs.com/clx-teacher-domain.apk'
        }
      } else {
        if (state.type === 'student') {
          urlIos = 'https://www.pgyer.com/powy'
          urlAndroid = 'https://www.pgyer.com/70e7'
        } else if (state.type === 'teacher') {
          urlIos = 'https://www.pgyer.com/iO0m'
          urlAndroid = 'https://www.pgyer.com/N2U3'
        } else if (state.type === 'manage') {
          urlIos = 'https://www.pgyer.com/iO0m'
          urlAndroid = 'https://www.pgyer.com/N2U3'
        }
      }

      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.student,
          state.type === 'teacher' && styles.teacher,
          state.type === 'manage' && styles.manage
        ]}
      >
        {/* {state.type !== 'teacher' && state.type !== 'manage' && <Image src={student} />}
        {state.type === 'teacher' && <Image src={teacher} />}
        {state.type === 'manage' && <Image src={manage} />} */}

        <OSticky background="white" position="bottom">
          <div class={[styles.buttonGroup, 'btnGroup']}>
            <Button round size="large" color="#FF8057" class={styles.btn} onClick={onDownload}>
              {state.buttonText}
            </Button>
          </div>
        </OSticky>

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