import { state } from '@/state'
import { ElTabPane, ElTabs } from 'element-plus'
import { defineComponent } from 'vue'
import Form from '../form'
import QrLogin from '../qr-login'
import styles from './index.module.less'
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: () => {}
    },
    onTypeChange: {
      type: Function,
      default: (type: any) => {}
    },
    type: {
      type: String
    }
  },
  watch: {
    tabType(val: string) {
      // 切换登录类型时需要清除定时器
      if (val != 'qrLogin') {
        clearInterval(state.loginPopupTimer)
      }
    }
  },
  data() {
    return {
      loginType: 'TEACHER',
      tabType: 'login' as 'login' | 'qrLogin'
    }
  },
  render() {
    return (
      <div class={styles.loginTabs}>
        <ElTabs
          class={this.tabType === 'qrLogin' && styles.qrCodeStyle}
          v-model={this.tabType}
        >
          <ElTabPane label="手机登录" name="login">
            <Form
              type="login"
              loginType={this.loginType}
              onLoginTypeChange={(type: string) => {
                this.loginType = type
              }}
              onChange={(type: string) => {
                this.onTypeChange(type)
              }}
              onClose={() => {
                this.onClose()
              }}
            />
          </ElTabPane>
          <ElTabPane label="二维码登录" name="qrLogin">
            {this.tabType === 'qrLogin' && (
              <QrLogin
                loginType={this.loginType}
                onChange={(type: any) => {
                  // this.type = type
                }}
                onClose={() => {
                  this.onClose()
                }}
              />
            )}
          </ElTabPane>
        </ElTabs>
        {this.tabType === 'login' && (
          <div class={[styles.scanTxt, 'text-center']}>
            没有账号，
            <span
              class="cursor-pointer"
              onClick={() => {
                this.onTypeChange('register')
              }}
            >
              马上注册
            </span>
          </div>
        )}
      </div>
    )
  }
})
