import { defineComponent } from 'vue'
import styles from './index.module.less'
import teacher1 from '../../images/teacher_1.png'
import teacher2 from '../../images/teacher_2.png'
import musicCenter from '../../images/music_center.png'
import { ElButton, ElCol, ElRow } from 'element-plus'

export default defineComponent({
  name: 'teacher-auth',
  props: {
    onClose: {
      type: Function,
      default: () => {}
    }
  },
  methods: {
    onDetail(type = 'teacher' as 'teacher' | 'music') {
      this.onClose()
      if (type === 'teacher') {
        this.$router.push('/teacherAuth')
      } else if (type === 'music') {
        this.$router.push('/musicAuth')
      }
    }
  },
  render() {
    return (
      <>
        <h2 class="text-2xl font-semibold text-[#333] mb-6 flex flex-col items-center">
          酷乐秀达人认证
          <i class="w-12 h-1 bg-[#2DC7AA] inline-block leading-none rounded-sm mt-1"></i>
        </h2>

        <img src={musicCenter} class="w-[305px] m-auto" />

        <div class="text-center text-xl font-semibold text-[#333] py-8">
          完成酷乐秀认证能开启更多功能！
        </div>
        {/* <ElRow gutter={10}>
          <ElCol span={12} class="cursor-pointer">
            <div
              class="border-neutral-200 border-solid border rounded flex items-center p-4"
              onClick={() => {
                this.onDetail('teacher')
              }}
            >
              <img src={teacher1} class="w-16 h-[84px]" />
              <div class="pl-3">
                <p class="text-slate-700 text-[16px] font-semibold">达人认证</p>
                <p class="text-gray-400 text-[14px] leading-5 pt-1">
                  开启线上
                  <br />
                  教学之旅
                </p>
              </div>
            </div>
          </ElCol>
          <ElCol span={12} class="cursor-pointer">
            <div
              class="border-neutral-200 border-solid border rounded flex items-center py-4 pl-4 pr-0"
              onClick={() => {
                this.onDetail('music')
              }}
            >
              <img src={teacher2} class="w-16 h-[84px]" />
              <div class="pl-3">
                <p class="text-slate-700 text-[16px] font-semibold">音乐人认证</p>
                <p class="text-gray-400 text-[14px] leading-5 pt-1">
                  上传曲谱
                  <br />
                  获取收益
                </p>
              </div>
            </div>
          </ElCol>
        </ElRow> */}

        <div class="text-center">
          <ElButton
            type="primary"
            class="mt-4 w-40"
            round
            style={{ height: '48px' }}
            onClick={() => {
              this.onDetail('teacher')
            }}
          >
            立即认证
          </ElButton>
          <ElButton
            type="primary"
            class="mt-4 w-40"
            plain
            round
            style={{
              height: '48px',
              backgroundColor: '#fff',
              color: '#2DC7AA !important'
            }}
            onClick={() => {
              this.onClose()
            }}
          >
            下次再说
          </ElButton>
        </div>
      </>
    )
  }
})
