<template>
    <ui-page-layout class="bg-white" :showLeft="false" title="注册">

        <div>
            <img class="w-full h-520rem " src="/imgs/h5-login-banner.png" />
        </div>
        <div class="h-58rem">

        </div>
        <div class="flex flex-col items-center  bg-white login overflow-hidden">


            <div  class="flex flex-col items-center">
                <ui-input v-model="regForm.nickname" class="!h-98rem !w-600rem mb-24rem" :placeholder="$t('请输入昵称')">
                    <div slot="prefix" class="flex items-center h-full ml-20rem">
                        <img slot="prefix" src="/imgs/user_icon.png" class="w-42rem h-auto" />
                    </div>
                </ui-input>
                <ui-input v-model="regForm.email"  class="!h-98rem !w-600rem mb-24rem" :placeholder="$t('请输入邮箱号码')">
                    <div slot="prefix" class="flex items-center h-full ml-20rem">
                        <img slot="prefix" src="/imgs/email_icon.png" class="w-37rem h-auto" />
                    </div>
                </ui-input>
                <ui-input v-model="regForm.verifyCode" class="!h-98rem !w-600rem mb-24rem " :placeholder="$t('请输入邮箱验证码')">
                    <div slot="prefix" class="flex items-center h-full ml-20rem">
                        <img src="/imgs/vcode_icon.png" class="w-40rem h-auto" />
                    </div>

                    <div slot="suffix" class="flex items-center h-full">
                        <div v-if="verifyCount <= 0" @click="handleSendVerifyCode" class="bg-primary rounded-full text-white flex justify-center items-center h-70rem w-200rem !text-size-30rem !font-light !px-0"
                            type="primary" round>{{
                                    $t("获取验证码")
                            }}</div>

                        <div v-else @click="handleSendVerifyCode" class="bg-primary rounded-full text-white flex justify-center items-center h-70rem w-200rem !text-size-30rem !font-light !px-0"
                             type="primary" round>{{
                            verifyCount
                            }}S</div>
                    </div>
                </ui-input>
                <ui-input type="password" v-model="regForm.password" class="!h-98rem !w-600rem mb-24rem" :placeholder="$t('请设置密码')">
                    <div slot="prefix" class="flex items-center h-full ml-20rem">
                        <img slot="prefix" src="/imgs/password_icon.png" class="w-40rem h-auto" />
                    </div>
                </ui-input>
            </div>


            <el-button @click="handleRegister" class="h-88rem w-600rem !rounded-full !text-size-24rem !font-normal" type="primary" round>{{
                    $t("注册")
            }}</el-button>

        </div>
    </ui-page-layout>
</template>

<script>
    export default {
        data() {
            return {
                activeName: "second",
                loginType: "email",
                regForm:{
                    nickname:'',
                    email:'',
                    verifyCode:'',
                    password:''
                },
                loginForm:{
                    loginType:'2',
                    email:'',
                    password:''
                },
                verifyCount:0,
                showPassword:false
            };
        },
        methods:{
            async handleSendVerifyCode(){

                if(this.verifyCount > 0){
                    return ;
                }
                let email = "";
                if(this.activeName === "first"){
                    email = this.loginForm.email;
                }

                if(this.activeName === "second"){
                    email = this.regForm.email;
                }

                if(!email){

                    this.$toast(this.$t('邮箱不能为空'));
                    return;
                }



                let resp = await this.$http.post(this.$api.mzUser.sendVerifyCode,this.$qs.stringify({email:email}));

                if(resp.data.status === 200){
                    this.$toast(this.$t('发送验证码成功'));

                    this.verifyCount = 60;
                    let inv = setInterval(()=>{
                        this.verifyCount--;
                        if(this.verifyCount <= 0){
                            clearInterval(inv);
                        }
                    },1000);

                }else{
                    this.$toast(this.$t('发送验证码失败'));
                }

            },
            async handleRegister(){

                let resp = await  this.$http.post(this.$api.mzUser.register,this.$qs.stringify(this.regForm));

                if(resp.data.status === 200){
                    this.$toast(this.$t('注册成功'));
                }else{
                    this.$toast(resp.data.desc);
                }

            },
            async handleLogin(){
                let resp = await  this.$http.post(this.$api.mzUser.login,this.$qs.stringify(this.loginForm));

                if(resp.data.status === 200){
                    this.$store.commit('UPDATE_LOGIN_INFO',resp.data.data.mzUser);
                    this.$toast(this.$t('登录成功'));

                    if(this.$route.query.routeBack){
                        this.$router.back();
                    }else{
                        this.$router.push('/home')
                    }

                }else{
                    this.$toast(resp.data.desc);
                }
            }
        },
        computed:{
            regValid(){
                return this.regForm.nickname && this.regForm.email && this.regForm.verifyCode  && this.regForm.password;
            }
        }
    };
</script>
  
<style>
.login .el-input__inner {
    background: #f7f7f7;
    font-size: 30rem;
    padding-left: 100rem !important;
}

.login .tab-pane {
    @apply flex flex-col items-center pt-10rem;
}

.login .el-tabs__nav {
    @apply !w-full;
}

.login .first>.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-scroll>.el-tabs__nav>.el-tabs__item {
    @apply text-size-24rem font-normal !w-1/2 text-center !rem-0;
}

.login .el-tabs .el-tabs__item.is-active {
    @apply !text-size-36rem font-normal;
}

.login .custom-tab {
    @apply flex-1 flex justify-center items-center bg-[#F7F7F7] text-size-30rem cursor-pointer;
}

.login .custom-tab.select {
    @apply bg-white text-primary;
}

.login .custom-tab:first-child {
    @apply border-r-1rem border-solid border-r-[#E7E7E7] rounded-l-full;
}

.login .custom-tab:nth-child(2) {
    @apply border-r-1rem border-solid border-r-[#E7E7E7] rounded-r-full;
}
</style>
  