<template>
  <div
    class="w-1200px ml-auto mr-auto mt-100px m-h-624px bg-white flex forget overflow-hidden mb-0"
  >
    <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" class="w-410px mt-50px first">
        <el-tab-pane class="tab-pane" :label="$t('重置密码')" name="first">
          <div>
            <ui-input v-model="resetForm.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="resetForm.password" :type="showPassword ? '' : 'password'" class="h-60px !w-400px mb-24px" :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>
            <ui-input
                    v-model="resetForm.rePassword"
                    :type="showPassword ? '' : 'password'"
              class="h-60px !w-400px mb-24px"
              :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>
            <ui-input
                    v-model="resetForm.verifyCode"
              class="h-60px !w-400px mb-24px"
              :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"
                  class="h-40px w-120px !text-size-14px !font-normal !px-0"
                  type="primary"
                        @click="handleSendVerifyCode"
                  round
                  >{{ $t("获取邮箱验证码") }}</el-button
                >
                <el-button
                        v-else
                        class="h-40px w-120px !text-size-14px !font-normal !px-0"
                        type="primary"
                        disabled
                        round
                >{{ verifyCount }}S</el-button
                >
              </div>
            </ui-input>


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

<script>
export default {
  data() {
    return {
      activeName: "first",
      loginType: "email",
      showPassword:false,
      resetForm:{
         email:'',
         password:'',
         rePassword:'',
         verifyCode:'',
      },
      verifyCount:0
    };
  },
  computed:{
      resetFormValid(){
        return this.resetForm.email && this.resetForm.password && this.resetForm.rePassword && this.resetForm.verifyCode;
      }
  },
  created() {
    this.resetForm.email = this.$route.query.email;

  },
  methods:{
    async handleResetPwd(){
       if(!this.resetFormValid){
          return ;
       }

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

      if(resp.data.status === 200){
        this.$message.success(this.$t('重置成功'));
        this.$router.push('/login');
      }else{
        this.$message.error(resp.data.desc);
      }

    },
    async handleSendVerifyCode(){

      if(this.verifyCount > 0){
        return ;
      }

      let email = this.resetForm.email;

      if(!email){
        this.$message.warning('邮箱不能为空');
        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('发送验证码失败'));
      }

    },
  }
};
</script>

<style>
.forget .el-input__inner {
  background: #f7f7f7;
  font-size: 16px;
  padding-left: 60px !important;
}
.forget .tab-pane {
  @apply flex flex-col items-center pt-10px;
}
.forget .el-tabs__nav {
  @apply !w-full;
}

.forget
.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;
  width: 100%;
}
.forget  .el-tabs__active-bar{
  width: 100% !important;
}


.forget  #tab-first{
  width: 100% !important;
}
.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>
