import { postMessage } from '@/helpers/native-message'
import { defineComponent } from 'vue'
import { Button, Dialog, Image, Sticky, Toast } from 'vant'
import styles from './index.module.less'
import request from '@/helpers/request'
import { state } from '@/state'
import ColResult from '@/components/col-result'
import ColHeader from '@/components/col-header'
// import ColHeader from "@/components/col-header";

/**
 * 动态引入文件
 * @param fileName 文件名
 * @param path 文件路径
 */
export const getAssetsHomeFile = (fileName: string) => {
  const path = `./images/${fileName}`
  const modules = import.meta.globEager('./images/*')
  return modules[path].default
}

export default defineComponent({
  name: 'music-cert',
  data() {
    return {
      authStatus: null
    }
  },
  mounted() {
    postMessage({ api: 'setBarStatus', content: { status: 0 } })
    // 音乐人审核状态 0、未申请 UNPAALY、已申请 DOING、审核中 PASS、通过 UNPASS、不通过
    const musicianAuthStatus = state.user.data?.musicianAuthStatus
    if (musicianAuthStatus) {
      state.musicCertStatus =
        musicianAuthStatus === 'DOING' || musicianAuthStatus === 'PASS'
          ? true
          : false
    }
    // 如果申请过，则显示标题
    if (state.musicCertStatus) {
      postMessage({ api: 'setBarStatus', content: { status: 1 } })
    }

    // 如果没有达人认证，则需要先去认证
    if (!state.user.data?.entryFlag) {
      Dialog.alert({
        message: '您尚未完成达人认证，达人认证后才可开通音乐人权限哦！',
        confirmButtonColor: '#2DC7AA'
      }).then(() => {
        this.$router.replace('/teacherCert')
      })
    }
  },
  unmounted() {
    postMessage({ api: 'setBarStatus', content: { status: 1 } })
  },
  methods: {
    async onClick() {
      try {
        await request.post('/api-teacher/teacherAuthMusicianRecord/doApply', {})
        Toast('申请认证成功')
        state.musicCertStatus = true
        postMessage({ api: 'setBarStatus', content: { status: 1 } })
      } catch {}
    }
  },
  render() {
    return (
      <>
        {state.musicCertStatus ? (
          <>
            <ColHeader border={false} />
            <ColResult
              classImgSize="CERT"
              type="musicCert"
              style={{ paddingTop: '60px' }}
              tips={
                state.user.data?.musicianAuthStatus === 'PASS'
                  ? '您提交的音乐人认证已申请成功'
                  : '您已成功提交音乐人认证申请我们将在2个工作日内与您取得联系'
              }
            />
          </>
        ) : (
          <div class={styles['music-cert']}>
            <ColHeader
              background="transparent"
              backIconColor="white"
              color="#fff"
              border={false}
            />
            <div class={styles.certWrapper}>
              <div class={[styles['cert-section'], 'mb12']}>
                <div class={styles.title}>来成为酷乐秀音乐人吧！</div>

                <div class={styles.item}>
                  <div class={styles.content}>
                    <div class={styles.subTitle}>
                      <img src={getAssetsHomeFile('1.png')} />
                      <span>教学视频分享达人</span>
                    </div>
                    <div class={styles.subConent}>
                      发布您制作的教学视频内容，展现不同类型的学习方式
                    </div>
                  </div>
                  <img
                    src={getAssetsHomeFile('logo2.png')}
                    class={styles.logo}
                  />
                </div>

                <div class={styles.item}>
                  <div class={styles.content}>
                    <div class={styles.subTitle}>
                      <img src={getAssetsHomeFile('2.png')} />
                      <span>演奏Mlog达人</span>
                    </div>
                    <div class={styles.subConent}>
                      发布自己演奏的音乐Mlog，让学员深入了解您的专业技能，从而提升您的关注率
                    </div>
                  </div>
                  <img
                    src={getAssetsHomeFile('logo3.png')}
                    class={styles.logo}
                  />
                </div>

                <div class={styles.item}>
                  <div class={styles.content}>
                    <div class={styles.subTitle}>
                      <img src={getAssetsHomeFile('3.png')} />
                      <span>直播up达人</span>
                    </div>
                    <div class={styles.subConent}>
                      利用平台专为器乐演奏研发的直播教室，可进行一对一或开启直播间在线分内容，技巧等
                    </div>
                  </div>
                  <img
                    src={getAssetsHomeFile('logo1.png')}
                    class={styles.logo}
                  />
                </div>

                <div class={styles.item}>
                  <div class={styles.content}>
                    <div class={styles.subTitle}>
                      <img src={getAssetsHomeFile('4.png')} />
                      <span>乐谱歌单达人</span>
                    </div>
                    <div class={styles.subConent}>
                      上传您制作的MIDI乐谱，结合小酷Ai给音乐爱好者自主练习的途径
                    </div>
                  </div>
                  <img
                    src={getAssetsHomeFile('logo4.png')}
                    class={styles.logo}
                  />
                </div>
              </div>

              <Sticky position="bottom" offsetBottom={0}>
                <div class={styles['btn-group']}>
                  {/* <Button round block type="primary" disabled={this.authStatus === '1'} onClick={this.onClick}>立即认证</Button> */}
                  <div
                    class={[
                      styles.btn,
                      this.authStatus === '1' ? styles.disabled : null
                    ]}
                    onClick={this.onClick}
                  ></div>
                </div>
              </Sticky>
            </div>
          </div>
        )}
      </>
    )
  }
})
