import { ElTabPane, ElTabs } from 'element-plus'
import { defineComponent } from 'vue'
import Form from '../form'
import styles from './index.module.less'

export default defineComponent({
  name: 'register',
  props: {
    onClose: {
      type: Function,
      default: () => {}
    },
    onTypeChange: {
      type: Function,
      default: (type: any) => {}
    }
  },
  data() {
    return {
      loginType: 'TEACHER',
      tabType: 'login' as 'login' | 'qrLogin'
    }
  },
  render() {
    return (
      <>
        <ElTabs v-model={this.loginType}>
          <ElTabPane label="老师注册" name="TEACHER">
            {this.loginType === 'TEACHER' && (
              <Form
                type="register"
                loginType={this.loginType}
                key="teacher-register"
                ref="teacherRegister"
                onChange={(type: string) => {
                  this.onTypeChange(type)
                }}
                onClose={() => {
                  this.onClose()
                }}
              />
            )}
          </ElTabPane>
          <ElTabPane label="学员注册" name="STUDENT">
            {this.loginType === 'STUDENT' && (
              <Form
                type="register"
                loginType={this.loginType}
                key="student-register"
                ref="studentRegister"
                onChange={(type: string) => {
                  this.onTypeChange(type)
                }}
                onClose={() => {
                  this.onClose()
                }}
              />
            )}
          </ElTabPane>
        </ElTabs>
        <div class={[styles.scanTxt, 'text-center']}>
          已有账号，
          <span
            class="cursor-pointer text-[#2DC7AA]"
            onClick={() => {
              this.onTypeChange('login')
            }}
          >
            马上登录
          </span>
        </div>
      </>
    )
  }
})
