<template>
  <div style="padding: 20px 20px 50px;">
    <el-input
      v-model="otp"
      maxlength="6"
      class="center"/>
    <div>
      <el-button
        :loading="loadingV"
        type="primary"
        class="login-button"
        @click="onVerify">
        VERIFY
      </el-button>
      <el-button
        :loading="loading"
        type="content"
        class="forgot-button"
        @click="sendOTP"
        v-if="resendTime == 0">
        SEND OTP
      </el-button>
      <el-button
        type="content"
        class="forgot-button"
        disabled
        v-else>
        {{resendTime}} s
      </el-button>
    </div>
  </div>
</template>

<script>
  import api from '@/http/api/user'
  export default {
    name: "",
    props: {
      isReset: {
        type: Boolean,
        default: false
      },
      loginInfo: {
        type: Object,
        default: {}
      },
      resetInfo: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        otp: "",
        loading: false,
        loadingV: false,
        resendTime: 0
      };
    },
    mounted() {
      
    },
    methods: {
      sendOTP() {
        this.loading = true;
        api.sendOTP({
          email: this.loginInfo.email,
          type: this.isReset ? "reset" : "login"
        }).then(res => {
          this.resendTime = res.data.resendTime || 60
          this.$message({
            type: 'success',
            message: "Send OTP successfully!"
          })
          setTimeout(() => {
            this.contantTimer();
          }, 500);
        }).catch(err => {
          this.$message({
            type: 'error',
            message: err
          })
        }).finally(() => {
          this.loading = false;
        })
      },
      onVerify() {
        if (this.otp) {
          this.loadingV = true;
          if (this.isReset) {
            this.onUpdatePassword();
          } else {
            this.$emit("onLogin", this.otp)
          }
        } else {
          this.$message({
            type: 'error',
            message: "Please input otp"
          })
        }
      },
      onUpdatePassword() {
        api.updatePassword({
          email: this.loginInfo.email,
          password: this.resetInfo.password,
          otp: this.otp
        }).then(res => {
          this.$emit("onReset", true)
        }).catch(err => {
          this.$message({
            type: 'error',
            message: err
          })
        }).finally(() => {
          this.loadingV = false;
        })
      },
      contantTimer() {
        if (this.resendTime > 0) {
          this.resendTime -= 1;
          setTimeout(() => {
            this.contantTimer();
          }, 1000)
        }
      }
    }
  }
</script>

<style scoped>
  .el-input.center >>> .el-input__inner {
    text-align: center;
  }
  .login-button {
    width:100%;
    color: #fff;
    padding: 15px;
    margin-top: 40px;
    margin-bottom: 20px;
    font-weight: bold;
  }
  
  .forgot-button {
    width:100%;
    padding: 15px;
    font-weight: bold;
    margin: 0 0 20px !important;
  }
</style>