import request from '@/helpers/request'
import { state } from '@/state'
import { ElButton, ElCol, ElDialog, ElRow } from 'element-plus'
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: 'musicAuth',
  data() {
    return {
      btnTxt: '立即认证',
      musicCertStatus: false as boolean, // 是否音乐认证
      popupStatus: false // 弹窗状态
    }
  },
  computed: {
    auth() {
      // 音乐人审核状态 UNPAALY、未申请 DOING、审核中 PASS、通过 UNPASS、不通过,可用值:UNPAALY,DOING,PASS,UNPASS
      let auth = state.user.data?.musicianAuthStatus
      let obj = {
        text: '立即认证',
        status: false
      }
      switch (auth) {
        case 'DOING':
          obj.text = '审核中'
          obj.status = true
          break
        case 'PASS':
          obj.text = '已认证'
          obj.status = true
      }
      return obj
    }
  },
  mounted() {
    // 音乐人审核状态 0、未申请 UNPAALY、已申请 DOING、审核中 PASS、通过 UNPASS、不通过
    let musicianAuthStatus = state.user.data?.musicianAuthStatus
    // console.log(state.user)
    if (musicianAuthStatus) {
      this.musicCertStatus =
        musicianAuthStatus === 'DOING' || musicianAuthStatus === 'PASS'
          ? true
          : false
    }
  },
  methods: {
    async onSubmit() {
      try {
        // 判断是否有登录
        if (state.user.status !== 'login') {
          state.loginPopupStatus = true
          return
        }

        // 判断是否有权限
        await request.post('/api-website/teacherAuthMusicianRecord/doApply', {})
        state.user.data.musicianAuthStatus = 'DOING'
        this.popupStatus = true
      } catch {}
    }
  },
  render() {
    return (
      <div
        class={[
          styles.musicAuth,
          'w-[1200px] mt-36 mb-[60px] bg-white min-h-full m-auto px-[138px] text-[#333]'
        ]}
      >
        <div class="w-[388px] pt-24 pb-28">
          <div class="text-[28px] font-semibold pb-5">音乐人认证是什么</div>
          <p class={[styles.txt]}>
            酷乐秀对有能力编曲的音乐人开通上传曲谱权限，开通
          </p>
          <p class={[styles.txt]}>
            后您可上传自己编曲的乐谱MIDI让平台学员进行练习，
          </p>
          <p class={[styles.txt, 'inline-block']}>并获取收益。</p>
        </div>
        <div class="pb-20">
          <h2 class="text-2xl pb-11 text-center font-semibold">认证权益</h2>
          <ElRow class="mb-16">
            <ElCol span={12} class="pr-3">
              <div class={[styles.col, 'flex items-center px-10']}>
                <img
                  class="w-[97px] h-[73px]"
                  src={getAssetsHomeFile('midi_upload.png')}
                />
                <div class="pl-10">
                  <div class="flex items-center font-[18px] pb-3">
                    <img
                      class="w-[30px] h-[22px] mr-1"
                      src={getAssetsHomeFile('num1.png')}
                    />
                    MP3文件上传
                  </div>
                  <p class="text-[14px] leading-6">
                    您可上传自己编曲的乐谱MP3，并自定义乐谱价格，为平台学员提供智能陪练练习。
                  </p>
                </div>
              </div>
            </ElCol>
            <ElCol span={12} class="pl-3">
              <div class={[styles.col, 'flex items-center px-10']}>
                <img
                  class="w-[97px] h-[73px]"
                  src={getAssetsHomeFile('midi_money.png')}
                />
                <div class="pl-10">
                  <div class="flex items-center font-[18px] pb-3">
                    <img
                      class="w-[30px] h-[22px] mr-1"
                      src={getAssetsHomeFile('num2.png')}
                    />
                    乐谱收益
                  </div>
                  <p class="text-[14px] leading-6">
                    您可对上传的乐谱自定义价格，学员可自行挑选乐谱购买，购买后您将获取学员购买收入。
                  </p>
                </div>
              </div>
            </ElCol>
          </ElRow>

          {state.user.data?.musicianAuthStatus !== 'PASS' && (
            <div class="text-center">
              <ElButton
                type="primary"
                class="rounded w-40 !h-[38px]"
                onClick={this.onSubmit}
                disabled={this.auth.status}
              >
                {this.auth.text}
              </ElButton>
            </div>
          )}
        </div>

        <ElDialog
          modelValue={this.popupStatus}
          onUpdate:modelValue={val => (this.popupStatus = val)}
          closeOnClickModal={false}
          closeOnPressEscape={false}
          showClose
        >
          <div class="p-8">
            <img src={getAssetsHomeFile('icon_music.png')} />
            <p class="text-center text-[#666] text-base -m-1 pb-6">
              您已成功提交音乐人认证申请
              <br />
              我们将在2个工作日内与您取得联系
            </p>

            <ElButton
              type="primary"
              class="w-full rounded-sm"
              style={{ height: '38px' }}
              onClick={() => {
                this.popupStatus = false
              }}
            >
              我知道了
            </ElButton>
          </div>
        </ElDialog>
      </div>
    )
  }
})
