import { browser } from '@/helpers/utils'
import { Button, Toast } from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'

export const getAssetsHomeFile = (fileName: string) => {
  const path = `./images/${fileName}`
  const modules = import.meta.globEager('./images/*')
  return modules[path].default
}

export default defineComponent({
  name: 'download',
  data() {
    const query = this.$route.query
    return {
      type: query.type || 'student',
      wxStatus: false
    }
  },
  mounted() {
    if (this.type === 'student') {
      document.title = '酷乐秀学院下载'
    } else if (this.type === 'teacher') {
      document.title = '酷乐秀下载'
    }
  },
  methods: {
    downLoadApp() {
      if (browser().weixin) {
        this.wxStatus = true
        return
      }

      if (
        browser().ios ||
        /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)
      ) {
        if (this.type == 'student') {
          window.location.href =
            'https://apps.apple.com/cn/app/%E7%AE%A1%E4%B9%90%E8%BF%B7/id1487054260'
        } else if (this.type == 'teacher') {
          window.location.href =
            'https://apps.apple.com/cn/app/%E7%AE%A1%E4%B9%90%E8%BF%B7/id1487054260'
        }
      } else if (/(Android)/i.test(navigator.userAgent)) {
        if (this.type == 'student') {
          window.location.href =
            'https://sj.qq.com/myapp/detail.htm?apkName=com.daya.studaya_android'
        } else if (this.type == 'teacher') {
          window.location.href =
            'https://sj.qq.com/myapp/detail.htm?apkName=com.daya.studaya_android'
        }
      } else {
        this.$toast('请用手机或移动设备打开')
      }
    }
  },
  render() {
    return (
      <div class={styles.downContainer}>
        <div class={styles.logo}>
          {this.type === 'student' ? (
            <img src={getAssetsHomeFile('logo.png')} alt="" />
          ) : (
            <img src={getAssetsHomeFile('teacher_logo.png')} alt="" />
          )}
        </div>
        <div class={styles.down}>
          <Button type="primary" round plain onClick={this.downLoadApp}>
            点击下载App
          </Button>
        </div>
        <div class={styles.mainImg}>
          {this.type === 'student' ? (
            <img src={getAssetsHomeFile('student_bg.png')} alt="" />
          ) : (
            <img src={getAssetsHomeFile('teacher_bg.png')} alt="" />
          )}
        </div>

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