<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="w-600rem h-56rem rounded-full border-[#E7E7E7] border-1rem border-solid mb-60rem flex">
        <div @click="loginForm.loginType = '2'" :class="`custom-tab ${loginForm.loginType === '2' ? 'select' : ''}`">
          {{ $t("邮箱验证登录") }}
        </div>
        <div @click="loginForm.loginType = '1'"  :class="`custom-tab ${loginForm.loginType === '1' ? 'select' : ''}`">
          {{ $t("账号密码登录") }}
        </div>
      </div>
      <div v-if="loginForm.loginType === '2'" class="flex flex-col items-center">
        <ui-input v-model="loginForm.email" class="!h-98rem !w-600rem mb-60rem" :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="loginForm.verifyCode" class="!h-98rem !w-600rem mb-60rem " :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>
      </div>
      <div v-if="loginForm.loginType === '1'" class="flex flex-col items-end">
        <ui-input v-model="loginForm.email" class="!h-98rem !w-600rem mb-60rem" :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="loginForm.password" type="password" class="!h-98rem !w-600rem mb-15rem" :placeholder="$t('请输入账号密码')">
          <div slot="prefix" class="flex items-center h-full ml-20rem">
            <img src="/imgs/password_icon.png" class="w-40rem h-auto" />
          </div>
          <div slot="suffix" class="flex items-center h-full mr-20rem">
            <!-- <img src="/imgs/eye_icon.png" class="w-30rem h-auto" /> -->
            <img src="/imgs/eye_close_icon.png" class="w-40rem h-auto cursor-pointer" />
          </div>
        </ui-input>
        <el-button @click="$router.push('/change-pass')" type="text" class="!font-normal !mb-27rem !p-0">
          {{ $t("忘记密码") }}
        </el-button>
      </div>

      <el-button @click="handleLogin" class="h-88rem w-600rem !rounded-full !text-size-24rem !font-normal" type="primary" round>{{
          $t("登录")
      }}</el-button>
      <div @click="$router.push('/register')" class="mt-30rem">
        <span class="text-[#B8B8B8]">
          {{$t('还没有账号， 点击')}}
        </span><span class="text-primary">
          {{$t('注册btn')}}
        </span>
      </div>

    </div>
  </ui-page-layout>
</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.$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>
