
<template>
    <div class="login-page" :class="{'no-loader':loader}">
        <div class='loader'>
            <div class='spinner-grow text-primary' role='status'>
              <span class='sr-only'>Loading...</span>
            </div>
          </div>
        <div class="container">
            <div class="row justify-content-md-center">
                <div class="col-md-12 col-lg-4">
                    <div class="card login-box-container">
                        <div class="card-body">
                            <div class="authent-logo">
                                <img src="../../assets/images/logo@2x.png" alt="">
                            </div>
                            <div class="authent-text">
                                <p>Welcome to IO!</p>
                                <p>Enter your details to create your account</p>
                            </div>
                            <form>
                                <div class="mb-3">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" :class="{'is-invalid': error.username}" id="floatingInput" placeholder="账号" v-model="form.username" @blur="verification_username">
                                        <label for="floatingInput">账号</label> 
                                        <div class="invalid-feedback" :class="{'d-none': !error.username}">
                                        {{ error.username }}
                                        </div>
                                      </div>
                                </div>
                                <div class="mb-3">
                                    <div class="form-floating">
                                        <input type="email" class="form-control" :class="{'is-invalid': error.email}" id="floatingInput1" placeholder="邮箱地址" v-model="form.email" @blur="verification_email">
                                        <label for="floatingInput">邮箱地址</label>
                                        <div class="invalid-feedback" :class="{'d-none': !error.email}">
                                        {{ error.email }}
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-3">
                                <div class="input-group">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" :class="{'is-invalid': error.validatecode}" id="floatingPassword" placeholder="验证码" v-model="form.validatecode" @blur="verification_validatecode">
                                        <label for="floatingPassword">验证码</label>
                                    </div>
                                    <button class="btn btn-primary ms-2" type="button" @click="GetCode"> {{ countdown > 0 ? `${countdown}秒后重试` : '获取验证码'  }}</button>
                                    <div class="invalid-feedback" :class="{'d-none': !error.validatecode}">
                                        {{ error.validatecode }}
                                    </div>
                                </div>
                            </div>

                                <div class="mb-3">
                                    <div class="form-floating">
                                        <input type="password" class="form-control" :class="{'is-invalid': error.password}" id="floatingPassword1" placeholder="密码" v-model="form.password" @blur="verification_password">
                                        <label for="floatingPassword">密码</label>
                                        <div class="invalid-feedback" :class="{'d-none': !error.password}">
                                        {{ error.password }}
                                        </div>
                                      </div>
                                </div>
                                <div class="mb-3 form-check">
                                  <input type="checkbox" class="form-check-input"   id="exampleCheck1" v-model="form.check" @blur="verification_check">
                                  <label class="form-check-label" for="exampleCheck1">我同意 <a href="#">条款与细则</a></label>
                                    <div class="invalid-feedback" :class="{'d-none': form.check}">
                                        {{ error.agrement }}
                                    </div>
                                </div>
                                <div class="d-grid">
                                <button type="submit" class="btn btn-primary m-b-xs" @click="submit">注册</button>
                            </div>
                              </form>
                              <div class="authent-login">
                                  <p>已经有了账号? <RouterLink to="/login">登录</RouterLink></p>
                              </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { SendValidateCode_api,registered_api } from '@/request/api'
export default {
    name: 'Register',
    data() {
        return {
            loader:false,
            form:{
                username: '',
                password: '',
                validatecode: '',
                email: '',
                check: false,
            },
            error: {
                username: '',
                password: '',
                validatecode: '',
                email: '',
                agrement :''
            },
            countdown: 0
        }
    },
    mounted() {
        this.loader=true
    },
    methods: {
        verification_username() {
            if (!this.form.username || this.form.username.length >20) {
               this.error.username = '账号不能为空或超过20个字符'
            }else {
                this.error.username = ''
            }
        },
        verification_email() {
             const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
            if (!this.form.email) {
                this.error.email = '邮箱不能为空'
            }else if (!emailPattern.test(this.form.email)) {
                this.error.email = '邮箱格式不正确'
            }else {
                this.error.email = ''
            }
        },
        verification_password() {
            if (!this.form.password || this.form.password.length < 6) {
                this.error.password = '密码不能为空或小于6个字符'
            }else {
                this.error.password = ''
            }
        },
        verification_validatecode() {
            if (!this.form.validatecode || this.form.validatecode.length != 5) {
                this.error.validatecode = '验证码错误'
            }else {
                this.error.validatecode = ''
            }
        },
        verification_check() {
            if (!this.form.check) {
                this.error.agrement = '请同意条款与细则'
            }else {
                this.error.agrement = ''
            }
        },
        async GetCode() {
            this.verification_email()
            if (!this.error.email) {
                let res=await this.$api.SendValidateCode(this.form.email)
                this.countdown = 60
                this.startCountdown()
                
                }
        },
        startCountdown() {
            const timer = setInterval(() => {
            if (this.countdown > 0) {
                this.countdown--;
            } else {
                clearInterval(timer);
            }
        }, 1000)
        },
        async submit() {
            this.verification_username()
            this.verification_email()
            this.verification_password()
            this.verification_validatecode()
            this.verification_check()
            if (!this.error.username && !this.error.email && !this.error.password && !this.error.validatecode && !this.error.agrement) {
                let res=await this.$api.register({
                            username: this.form.username,
                            password: this.form.password,
                            email: this.form.email,
                            verificationCode: this.form.validatecode
                            })
                if (res.code == 1000) {
                    this.$router.push('/login')
                }
            }
        }
        }
        }
</script>

<style scoped>
.invalid-feedback {
    display: block !important;
}
</style>