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 { 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 (
      <>
        <div class="text-[#1a1a1a] font-medium text-xl text-center after:w-4 after:h-[3px] after:rounded-sm after:bg-[#2DC7AA] after:block after:m-auto after:mt-2">
          酷乐秀认证
        </div>

        <div class="text-center text-gray-500 pt-4 pb-5">
          完成酷乐秀认证能开启更多功能！
        </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-medium">达人认证</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-medium">音乐人认证</p>
                <p class="text-gray-400 text-[14px] leading-5 pt-1">
                  上传曲谱
                  <br />
                  获取收益
                </p>
              </div>
            </div>
          </ElCol>
        </ElRow>

        <ElButton
          type="primary"
          class="w-full mt-4"
          style={{ height: '40px' }}
          onClick={() => {
            this.onClose()
          }}
        >
          下次再说
        </ElButton>
      </>
    )
  }
})
