<template>
    <div
            class="w-1200px ml-auto mr-auto mt-100px m-h-624px bg-white flex login overflow-hidden mb-0 shadow-2xl"
    >
        <div class="w-700px h-full">
            <img src="/imgs/login-banner.png" class="w-full object-cover"/>
        </div>

        <div class="flex-1 flex justify-center">
            <el-tabs
                    v-model="activeName"
                    @tab-click="handleClick"
                    class="w-410px mt-50px first"
            >
                <el-tab-pane :label="$t('登录')" name="first" class="tab-pane">
                    <div
                            class="w-400px h-38px rounded-full border-[#E7E7E7] border-1px border-solid mb-24px flex"
                    >
                        <div
                                @click="loginForm.loginType = '2'"
                                :class="`custom-tab ${loginType === 'email' ? 'select' : ''}`"
                        >
                            {{ $t("邮箱验证登录") }}
                        </div>
                        <div
                                @click="loginForm.loginType = '1'"
                                :class="`custom-tab ${loginType === 'account' ? 'select' : ''}`"
                        >
                            {{ $t("账号密码登录") }}
                        </div>
                    </div>
                    <div v-if="loginForm.loginType === '2'">
                        <ui-input v-model="loginForm.email" class="h-60px !w-400px mb-24px" :placeholder="$t('请输入邮箱号码')">
                            <div slot="prefix" class="flex items-center h-full ml-20px">
                                <img slot="prefix" src="/imgs/email_icon.png" class="w-30px h-auto"/>
                            </div>
                        </ui-input>
                        <ui-input
                                v-model="loginForm.verifyCode"
                                class="h-60px !w-400px mb-58px"
                                :placeholder="$t('请输入邮箱验证码')"
                        >
                            <div slot="prefix" class="flex items-center h-full ml-20px">
                                <img src="/imgs/vcode_icon.png" class="w-30px h-auto"/>
                            </div>

                            <div slot="suffix" class="flex items-center h-full">
                                <el-button
                                        v-if="verifyCount <= 0"
                                        @click="handleSendVerifyCode"
                                        class="h-40px w-120px !text-size-14px !font-normal !px-0"
                                        type="primary"
                                        round
                                >{{ $t("获取邮箱验证码") }}
                                </el-button
                                >
                                <el-button
                                        v-else
                                        class="h-40px w-120px !text-size-14px !font-normal !px-0"
                                        type="primary"
                                        :disabled="true"
                                        round
                                >{{ verifyCount}}S
                                </el-button
                                >
                            </div>
                        </ui-input>
                    </div>
                    <div v-if="loginForm.loginType === '1'" class="flex flex-col items-end">
                        <ui-input v-model="loginForm.email" class="h-60px !w-400px mb-24px" :placeholder="$t('请输入账号')">
                            <div slot="prefix" class="flex items-center h-full ml-20px">
                                <img slot="prefix" src="/imgs/email_icon.png" class="w-30px h-auto"/>
                            </div>
                        </ui-input>
                        <ui-input v-model="loginForm.password" :type="showPassword ? '' : 'password'" class="h-60px !w-400px mb-15px" :placeholder="$t('请输入账号密码')">
                            <div slot="prefix" class="flex items-center h-full ml-20px">
                                <img src="/imgs/password_icon.png" class="w-30px h-auto"/>
                            </div>
                            <div @click="showPassword=!showPassword" slot="suffix" class="flex items-center h-full mr-20px">
                                <img v-if="showPassword" src="/imgs/eye_icon.png" class="w-30px h-auto" />
                                <img
                                        v-else
                                        src="/imgs/eye_close_icon.png"
                                        class="w-30px h-auto cursor-pointer"
                                />
                            </div>
                        </ui-input>
                        <el-button
                                @click="$router.push('/change-pass')"
                                type="text"
                                class="!font-normal !mb-27px !p-0"
                        >
                            {{ $t("忘记密码") }}
                        </el-button>
                    </div>

                    <el-button
                            class="h-60px w-400px !rounded-50px !text-size-24px !font-normal"
                            type="primary"
                            @click="handleLogin"
                            round
                    >{{ $t("登录") }}
                    </el-button
                    >
                </el-tab-pane>
                <el-tab-pane class="tab-pane" :label="$t('注册')" name="second">
                    <div>
                        <ui-input v-model="regForm.nickname" class="h-60px !w-400px mb-24px" :placeholder="$t('请输入昵称')">
                            <div slot="prefix" class="flex items-center h-full ml-20px">
                                <img slot="prefix" src="/imgs/user_icon.png" class="w-30px h-auto"/>
                            </div>
                        </ui-input>
                        <ui-input  v-model="regForm.email" class="h-60px !w-400px mb-24px" :placeholder="$t('请输入邮箱号码')">
                            <div slot="prefix" class="flex items-center h-full ml-20px">
                                <img slot="prefix" src="/imgs/email_icon.png" class="w-30px h-auto"/>
                            </div>
                        </ui-input>
                        <ui-input
                                class="h-60px !w-400px mb-24px"
                                :placeholder="$t('请输入邮箱验证码')"
                                v-model="regForm.verifyCode"
                        >
                            <div slot="prefix" class="flex items-center h-full ml-20px">
                                <img src="/imgs/vcode_icon.png" class="w-30px h-auto"/>
                            </div>

                            <div slot="suffix" class="flex items-center h-full">
                                <el-button
                                        v-if="verifyCount <= 0"
                                        @click="handleSendVerifyCode"
                                        class="h-40px w-120px !text-size-14px !font-normal !px-0"
                                        type="primary"
                                        round
                                >{{ $t("获取邮箱验证码") }}
                                </el-button
                                >
                                <el-button
                                        v-else
                                        class="h-40px w-120px !text-size-14px !font-normal !px-0"
                                        type="primary"
                                        :disabled="true"
                                        round
                                >{{ verifyCount}}S
                                </el-button
                                >
                            </div>
                        </ui-input>
                        <ui-input v-model="regForm.password" :type="showPassword ? '' : 'password'" class="h-60px !w-400px mb-15px" :placeholder="$t('请输入账号密码')">
                            <div slot="prefix" class="flex items-center h-full ml-20px">
                                <img src="/imgs/password_icon.png" class="w-30px h-auto"/>
                            </div>
                            <div @click="showPassword=!showPassword" slot="suffix" class="flex items-center h-full mr-20px">
                                <img v-if="!showPassword" src="/imgs/eye_icon.png" class="w-30px h-auto"/>
                                 <img v-else src="/imgs/eye_close_icon.png" class="w-30px h-auto" />
                            </div>
                        </ui-input>

                        <el-button
                                class="h-60px w-400px !rounded-50px !text-size-24px !font-normal"
                                type="primary"
                                round
                                :disabled="!regValid"
                                @click="handleRegister"
                        >{{ $t("确定") }}
                        </el-button
                        >
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                activeName: "first",
                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.$message.warning(this.$t('邮箱不能为空'));
                     return;
                }



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

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

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

                }else{
                    this.$message.error(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.$message.success(this.$t('注册成功'));
                }else{
                    this.$message.error(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.$message.success(this.$t('登录成功'));

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

                }else{
                    this.$message.error(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: 16px;
    padding-left: 60px !important;
}
.login .tab-pane {
    @apply flex flex-col items-center pt-10px;
}
.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-24px font-normal !w-1/2 text-center !px-0;
}
.login .el-tabs .el-tabs__item.is-active {
    @apply !text-size-36px font-normal;
}
.login .custom-tab {
    @apply flex-1 flex justify-center items-center bg-[#F7F7F7] text-size-16px cursor-pointer;
}
.login .custom-tab.select {
    @apply bg-white text-primary;
}
.login .custom-tab:first-child {
    @apply border-r-1px border-solid border-r-[#E7E7E7] rounded-l-full;
}
.login .custom-tab:nth-child(2) {
    @apply border-r-1px border-solid border-r-[#E7E7E7] rounded-r-full;
}
</style>