import { defineComponent, onMounted, ref } from 'vue';
import styles from './index.module.less';
import request from '@/helpers/request';
import { browser } from '@/helpers/utils';
import { showToast } from 'vant';
import wxBg from '@common/assets/wx_bg.png';
import downloadText from '../images/co-person/download_text.png';

export default defineComponent({
  name: 'music-room',
  setup() {
    const wxStatus = ref(false);
    const studentAndroidUrl = ref('');
    const teacherAndroidUrl = ref('');

    onMounted(async () => {
      try {
        const studentRes = await request.get(
          '/api-website/open/appVersionInfo/queryLatestByPlatform',
          {
            params: {
              platform: 'android-student',
              status: 'history'
            }
          }
        );
        studentAndroidUrl.value = studentRes.data?.downloadUrl;

        const teacherRes = await request.get(
          '/api-website/open/appVersionInfo/queryLatestByPlatform',
          {
            params: {
              platform: 'android-teacher',
              status: 'history'
            }
          }
        );
        teacherAndroidUrl.value = teacherRes.data?.downloadUrl;
      } catch (e) {
        console.log(e);
      }
    });

    // 下载
    const onDownload = (type: string) => {
      if (browser().weixin || navigator.userAgent.indexOf('DingTalk') > -1) {
        wxStatus.value = true;
        return;
      }

      let urlIos = '';
      let urlAndroid = '';
      if (location.origin.indexOf('m.colexiu.com') > -1) {
        if (type === 'student') {
          urlIos = 'https://itunes.apple.com/cn/app/id1626971695?mt=8';
          urlAndroid = studentAndroidUrl.value; // 'https://oss.dayaedu.com/appstore/clx-student-domain.apk'
        } else {
          urlIos = 'https://itunes.apple.com/cn/app/id1626971149?mt=8';
          urlAndroid = teacherAndroidUrl.value; // 'https://oss.dayaedu.com/appstore/clx-teacher-domain.apk'
        }
      } else {
        if (type === 'student') {
          urlIos = 'https://www.pgyer.com/powy';
          urlAndroid = studentAndroidUrl.value; // 'https://www.pgyer.com/70e7'
        } else {
          urlIos = 'https://www.pgyer.com/iO0m';
          urlAndroid = teacherAndroidUrl.value; // '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('请用手机或移动设备打开');
      }
    };
    return () => (
      <div class={styles.coPerson}>
        <div class={styles.section1}>
          <div class={[styles.title]}>
            <span>演奏Mlog达人</span>
          </div>
          <div class={styles.content}>
            展示个人演奏风采，吸引学员约课。个人风采资料填写、演奏视频上传
          </div>

          <img
            src="https://oss.dayaedu.com/klx/1699439433898img1.png"
            class={'w100'}
          />
        </div>

        <div class={styles.section2}>
          <div class={[styles.title]}>
            <span>教学视频达人</span>
          </div>
          <div class={styles.content}>
            可自行创建上传演奏教学的课程组，学员可购买或免费观看课程。可查看已上传视频课，创建与设置视频课参数
          </div>

          <img
            src="https://oss.dayaedu.com/klx/1699439493307img2.png"
            class={'w100'}
          />
        </div>

        <div class={styles.section3}>
          <div class={[styles.title]}>
            <span>直播UP达人</span>
          </div>
          <div class={styles.content}>
            可开启演奏live直播，与粉丝互动。可自行创建收费课程的慕课，邀请学员购买或免费观看课程
          </div>

          <img
            src="https://oss.dayaedu.com/klx/1699439513817img3.png"
            class={'w100'}
          />
        </div>

        <div class={styles.section4}>
          <i class={styles.iconTip}></i>
          <div class={[styles.title]}>
            <span>乐谱歌单达人</span>
          </div>
          <div class={styles.content}>上传分享曲谱伴奏，可自由定价曲目</div>

          <img
            src="https://oss.dayaedu.com/klx/1699521877106img4.png"
            class={'w100'}
          />
        </div>

        <div class={[styles.section5]}>
          <img src={downloadText} class={styles.stitle} />
          <div class={styles.btnGroup}>
            <div
              class={[styles.btn, styles.btnIos]}
              onClick={() => onDownload('student')}></div>
            <div
              class={[styles.btn, styles.btnAndroid]}
              onClick={() => onDownload('teacher')}></div>
          </div>
        </div>

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