import { state } from '@/state'
import { scrollAnimation } from '@/util/scroll'
import { ElButton, ElCol, ElRow } from 'element-plus'
import { defineComponent } from 'vue'
import { teacherState } from '../../teacherState'
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: 'cert-info',
  computed: {
    auth() {
      // 音乐人审核状态 UNPAALY、未申请 DOING、审核中 PASS、通过 UNPASS、不通过,可用值:UNPAALY,DOING,PASS,UNPASS
      let auth = state.user.data?.entryStatus
      let obj = {
        text: '立即认证',
        status: false
      }
      switch (auth) {
        case 'DOING':
          obj.text = '审核中'
          obj.status = true
          break
        case 'PASS':
          obj.text = '已认证'
          obj.status = true
      }
      return obj
    },
    authStatus(): Boolean {
      const entryStatus = state.user.data?.entryStatus || 0
      return entryStatus === 'PASS' ? true : false
    }
  },
  data() {
    return {
      list: [
        {
          logo: getAssetsHomeFile('o1.png'),
          num: getAssetsHomeFile('num1.png'),
          title: '线上授课',
          desc: '认证成为酷乐秀老师后，可设置您的空闲时间为平台中的求学者进行1对1的线上课程指导。'
        },
        {
          logo: getAssetsHomeFile('o2.png'),
          num: getAssetsHomeFile('num2.png'),
          title: '个人风采展示',
          desc: '可发布自己的专业经历、获奖记录及音视频资料对求学者展示，让学员更加深入的了解您的专业技能，从而提高约课率。'
        },
        {
          logo: getAssetsHomeFile('o3.png'),
          num: getAssetsHomeFile('num3.png'),
          title: '曲谱上传',
          desc: '可上传您制作的MIDI乐谱为求学者提供学习曲目的途径，并从中获得收益。'
        },
        {
          logo: getAssetsHomeFile('o4.png'),
          num: getAssetsHomeFile('num4.png'),
          title: '收益提现',
          desc: '在您授课及上传曲谱销售后，经过平台核算，将您获得的收益发放至您的个人账户下，您可随时将自己获得的收益提现。'
        }
      ]
    }
  },
  render() {
    return (
      <div class={[styles.musicAuth, 'px-[138px]']}>
        <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]}>
            合的乐器教学平台，器乐老师可通过自身的专业知识为
          </p>
          <p class={[styles.txt, 'inline-block']}>
            自己带来<span class="font-medium">授课及曲谱销售收益</span>。
          </p>
        </div>
        <div class="pb-20">
          <h2 class="text-2xl pb-11 text-center font-semibold">认证权益</h2>

          <ElRow class="mb-24" gutter={28}>
            {this.list.map((item: any) => (
              <ElCol span={6} class="pr-3 !flex">
                <div class={[styles.col, 'flex items-center flex-col p-4']}>
                  <img class="w-[94px] h-[87px]" src={item.logo} />

                  <div class="flex items-center font-[18px] font-medium pb-3 pt-5">
                    <img class="w-[30px] h-[22px] mr-1" src={item.num} />
                    {item.title}
                  </div>
                  <p class="text-[14px] text-[#666] leading-6 text-justify">
                    {item.desc}
                  </p>
                </div>
              </ElCol>
            ))}
          </ElRow>
          {!this.authStatus && (
            <>
              <h2 class="text-2xl pb-10 text-center font-semibold">
                酷乐秀欢迎您的加入
              </h2>

              <p class="text-lg text-center mb-10">
                在艺术的殿堂中，为他人照亮前进的道路，用自己的经验和点拨，传播艺术的种子，获取硕果。
              </p>

              <div class="text-center">
                <ElButton
                  type="primary"
                  class="rounded w-40 !h-[38px]"
                  disabled={this.auth.status}
                  onClick={() => {
                    const currentY =
                      document.documentElement.scrollTop ||
                      document.body.scrollTop
                    scrollAnimation(currentY, 0)
                    teacherState.nextStatus = true
                  }}
                >
                  {this.auth.text}
                </ElButton>
              </div>
            </>
          )}
        </div>
      </div>
    )
  }
})
