import ColHeader from '@/components/col-header'
import request from '@/helpers/request'
import { setAuth } from '@/helpers/utils'
import { Button, NumberKeyboard, PasswordInput, Toast } from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'

export default defineComponent({
  name: 'invteCode',
  props: {
    phone: String,
    onLoginSuccess: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      smsCode: '',
      showKeyboard: true,
      countDownStatus: true,
      countDownTime: 120, // 倒计时时间
      countTimer: null as any
    }
  },
  watch: {
    smsCode(val: any) {
      if (val && val.length === 6) {
        this.onLogin()
      }
    }
  },
  async mounted() {
    this.$nextTick(async () => {
      await this.onSendSms()
    })
  },
  unmounted() {
    clearInterval(this.countTimer)
  },
  methods: {
    async onSendSms() {
      try {
        await request.post('/api-student/code/sendSmsCode', {
          requestType: 'form',
          data: {
            mobile: this.phone,
            type: 'LOGIN'
          }
        })
        this.onCountDown()
        setTimeout(() => {
          Toast('验证码已发送')
        }, 100)
      } catch {
        this.countDownStatus = true
      }
    },
    onCountDown() {
      this.countDownStatus = false
      this.countTimer = setInterval(() => {
        if (this.countDownTime > 0) {
          this.countDownTime--
        } else {
          this.countDownStatus = true
          clearInterval(this.countTimer)
        }
      }, 1000)
    },
    async onLogin() {
      try {
        let res = await request.post('/api-auth/smsLogin', {
          requestType: 'form',
          data: {
            clientId: 'student',
            clientSecret: 'student',
            phone: this.phone,
            smsCode: this.smsCode,
            isSurportRegister: true
          }
        })

        const { authentication } = res.data
        setAuth(authentication.token_type + ' ' + authentication.access_token)

        window.history.go(-1)
        this.onLoginSuccess()
      } catch {}
    }
  },
  render() {
    return (
      <>
        <div class={styles.loginCode}>
          <ColHeader border={false} background="transparent" title=" " isBack />

          <div class={styles.codeTips}>
            <p class={styles.txt}>输入验证码</p>
            <p class={styles.codeTxt}>
              已发送6位验证码至 <span>{this.phone}</span>
            </p>
          </div>

          <PasswordInput
            value={this.smsCode}
            focused={this.showKeyboard}
            length={6}
            onFocus={() => {
              this.showKeyboard = true
            }}
            gutter={10}
          ></PasswordInput>
          <NumberKeyboard
            v-model={this.smsCode}
            show={this.showKeyboard}
            maxlength={6}
            onBlur={() => {
              this.showKeyboard = false
            }}
          ></NumberKeyboard>

          <div class={styles.btnWrap}>
            <Button
              type="primary"
              round
              onClick={this.onSendSms}
              disabled={!this.countDownStatus}
            >
              重新发送 {!this.countDownStatus && <>({this.countDownTime})</>}
            </Button>
          </div>
        </div>
      </>
    )
  }
})
