import { defineComponent, onMounted, ref } from 'vue';
import styles from './index.module.less';
import img1 from '../images/music-room/img1.png';
import img2 from '../images/music-room/img2.png';
import img3 from '../images/music-room/img3.png';
import img4 from '../images/music-room/img4.png';
import downloadText from '../images/music-room/download_text.png';
import request from '@/helpers/request';
import { browser } from '@/helpers/utils';
import { showToast } from 'vant';
import wxBg from '@common/assets/wx_bg.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(
          'https://kt.colexiu.com/edu-app/open/appVersionInfo/queryLatestByPlatform',
          {
            params: {
              platform: 'android-kt',
              status: 'history'
            }
          }
        );
        studentAndroidUrl.value = studentRes.data?.downloadUrl;
      } catch (e) {
        console.log(e);
      }
    });

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

      let urlIos = '';
      let urlAndroid = '';
      if (location.origin.indexOf('m.colexiu.com') > -1) {
        urlIos =
          'https://apps.apple.com/us/app/%E9%9F%B3%E4%B9%90%E6%95%B0%E5%AD%97%E8%AF%BE%E5%A0%82/id6452725878';
        urlAndroid = studentAndroidUrl.value; // 'https://oss.dayaedu.com/appstore/clx-student-domain.apk'
      } else {
        urlIos = 'https://www.pgyer.com/dzRRNN';
        urlAndroid = studentAndroidUrl.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.musicRoom}>
        <div class={styles.section1}>
          <div class={[styles.title]}>
            <span>教学资源</span>
          </div>
          <div class={styles.content}>
            教学资源即拿即用，原创资源共享，使您优秀的教学方式影响更多人
          </div>

          <img src={img1} class={'w100'} />
        </div>

        <div class={styles.section2}>
          <div class={[styles.title]}>
            <span>课后作业</span>
          </div>
          <div class={styles.content}>
            练习、评测两种作业模式混合练习，让学生的作业不再枯燥。学生演奏问题精准呈现，老师因地制宜
          </div>

          <img src={img2} class={'w100'} />
        </div>

        <div class={styles.section3}>
          <div class={[styles.title]}>
            <span>家校互通</span>
          </div>
          <div class={styles.content}>
            班级群聊、老师联系人即时沟通，在家练习遇到困难随时请教，不限时间、不限地点，老师就在你身边
          </div>

          <img src={img3} class={'w100'} />
        </div>

        <div class={styles.section4}>
          <div class={[styles.title, styles.title1]}>
            <span>自定义教材</span>
          </div>
          <div class={styles.content}>
            自定义教材内容，让老师潜心研究的校本设计转化为现实可执行的课堂教学内容，海量共享资源辅助校本课程设计
          </div>

          <img src={img4} class={'w100'} />
        </div>
        <div class={[styles.section5]}>
          <img src={downloadText} class={styles.stitle} />
          <div class={styles.btnGroup}>
            <div class={[styles.btn]} onClick={() => onDownload()}></div>
          </div>
        </div>

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