import { defineComponent } from 'vue'
import styles from './index.module.less'
import { ElButton, ElIcon, ElTabPane, ElTabs, ElTooltip } from 'element-plus'
import Form from './components/form'
import QrcodeVue from 'qrcode.vue'
import QrLogin from './components/qr-login'
import TeacherAuth from './components/teacher-auth'
import { state } from '@/state'
import Login from './components/login'
import Register from './components/register'
import { CloseBold } from '@element-plus/icons-vue'
import RegisterSuccess from './components/register-success'

export const getAssetsHomeFile = (fileName: string) => {
  const path = `./images/${fileName}`
  const modules = import.meta.globEager('./images/*')
  return modules[path].default
}

export default defineComponent({
  name: 'Login',
  props: {
    onClose: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      qrCodeDownLoad: 'http://dev.colexiu.com/student/#/download',
      type: 'login' as
        | 'login'
        | 'qr-login'
        | 'register'
        | 'register-success'
        | 'teacher-auth',
      registerType: 'teacher' as 'teacher' | 'student',
      loginType: 'teacher' as 'teacher' | 'student'
    }
  },
  methods: {
    // onReset(type: 'login' | 'register') {
    //   if (type === 'login') {
    //     ;(this as any).$refs.teacherLogin &&
    //       (this as any).$refs.teacherLogin.onResetFields()
    //     ;(this as any).$refs.studentLogin &&
    //       (this as any).$refs.studentLogin.onResetFields()
    //   } else if (type === 'register') {
    //     ;(this as any).$refs.teacherRegister &&
    //       (this as any).$refs.teacherRegister.onResetFields()
    //     ;(this as any).$refs.studentRegister &&
    //       (this as any).$refs.studentRegister.onResetFields()
    //   }
    // }
  },
  watch: {
    type(val: string) {
      // 切换登录类型时需要清除定时器
      if (val != 'qr-login') {
        clearInterval(state.loginPopupTimer)
      }
    }
  },
  render() {
    return (
      <div class={[styles.loginSection, 'relative']}>
        <div
          class={['rounded-full flex absolute top-[22px] right-[22px] z-10']}
          onClick={() => {
            this.onClose()
          }}
        >
          <ElIcon size={16} color="#999999">
            <CloseBold />
          </ElIcon>
        </div>
        <div
          class={[
            styles.loginTabs,
            'px-14 pt-9 pb-12 bg-white relative',
            this.type === 'register-success' && styles.registerSuccessBg,
            this.type === 'teacher-auth' && styles.teacherAuthBg,
            this.type === 'qr-login' ? 'pb-4' : '',
            this.type === 'teacher-auth' ? 'px-6 pb-8' : ''
          ]}
        >
          {this.type === 'login' && (
            <Login
              onClose={this.onClose}
              onTypeChange={(type: any) => {
                this.type = type
              }}
            />
          )}

          {this.type === 'register' && (
            <Register
              onClose={this.onClose}
              onTypeChange={(type: any) => {
                this.type = type
              }}
            />
          )}

          {this.type === 'register-success' && (
            <RegisterSuccess
              onClose={this.onClose}
              onTypeChange={(type: any) => {
                this.type = type
              }}
            />
          )}

          {this.type === 'teacher-auth' && (
            <TeacherAuth
              onClose={() => {
                this.type = 'login'
                this.loginType = 'teacher'
                this.onClose()
              }}
            />
          )}
        </div>
      </div>
    )
  }
})
