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/teacher/${fileName}`
  const modules = import.meta.globEager('../../../images/teacher/*')
  return modules[path].default
}

export default defineComponent({
  name: 'cert-info',
  computed: {
    auth() {
      // 音乐人审核状态 UNPAALY、未申请 DOING、审核中 PASS、通过 UNPASS、不通过,可用值:UNPAALY,DOING,PASS,UNPASS
      const auth = state.user.data?.entryStatus
      const obj = {
        text: '立即认证',
        status: false
      }
      switch (auth) {
        case 'DOING':
          obj.text = '审核中'
          obj.status = true
          break
        case 'PASS':
          obj.text = '已认证'
          obj.status = true
      }
      return obj
    },
    authStatus() {
      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]}>
        <div
          class={[
            styles.musicHeader,
            'w-[1080px] h-[393px] m-auto text-[#333]'
          ]}
        >
          <div class="w-[470px] pt-24 ml-[126px] box-border">
            <div class="text-[28px]  font-semibold pb-7">
              认证酷乐秀达人能为您带来什么？
            </div>
            <p class={[styles.txt]}>
              酷乐秀是一款为器乐学习者提供智能陪练及线上授课撮合的乐器教
            </p>
            <p class={[styles.txt]}>
              学平台，器乐老师可通过自身的专业知识为自己带来
              <span class="font-semibold">授课及曲谱销</span>
            </p>
            <p class={[styles.txt, 'inline-block']}>
              <span class="font-semibold">售收益</span>。
            </p>
          </div>
        </div>
        <div class="bg-[#FFFCF8]">
          <div class="w-[1080px] m-auto pt-[30px] pb-[50px]">
            <h2 class="text-[28px] pb-11 text-center font-semibold">
              <i class={styles.before}></i>
              认证权益
              <i class={styles.after}></i>
            </h2>

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

                    <div class="flex items-center font-[18px] font-semibold 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>
          </div>
        </div>
        {!this.authStatus && (
          <div class="pb-32 pt-9">
            <>
              <h2 class="text-2xl pb-10 text-center font-semibold">
                <i class={styles.before}></i>
                酷乐秀欢迎您的加入
                <i class={styles.after}></i>
              </h2>

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

              <div class="text-center">
                <ElButton
                  type="primary"
                  class="rounded w-72 !h-[48px]"
                  round
                  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>
    )
  }
})
