<template>
  <div class="login">

    <div class="login-form">
      <h2>找回密码</h2>
      <el-steps :space="300" :active="activeStep" align-center style="margin-bottom: 50px;margin-top: 20px;">
        <el-step title="安全验证"></el-step>
        <el-step title="重置密码"></el-step>
        <el-step title="设置成功"></el-step>
      </el-steps>

      <div v-if="activeStep===0" style="width: 350px;margin: 0 auto;">
        <el-form ref="aqyzForm" :model="aqyz.form" :rules="aqyz.rules" >
          <el-form-item prop="phonenumber">
            <el-input
              v-model="aqyz.form.phonenumber"
              type="text"
              auto-complete="off"
              placeholder="手机号"
            >
              <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
            </el-input>
          </el-form-item>
          <el-form-item prop="smsCode">
            <el-input
              v-model="aqyz.form.smsCode"
              auto-complete="off"
              placeholder="校验码"
              style="width: 60%"
              @keyup.enter.native="getCaptchaSms"
            >
              <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
            </el-input>
            <div class="login-code" @click="getAuthCode" v-if="aqyz.isAuthCode">
              发送获取校验码
            </div>
            <div class="login-code-disable" v-if="!aqyz.isAuthCode">
              {{ aqyz.msg }}
            </div>
          </el-form-item>
          <el-form-item style="width:100%;">
            <el-button
              :loading="aqyz.loading"
              size="medium"
              type="primary"
              style="width:100%;"
              @click.native.prevent="submitValidate"
            >
              <span v-if="!aqyz.loading">提交验证</span>
              <span v-else>验 证 中...</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <div v-if="activeStep===1" style="width: 350px;margin: 0 auto;">
        <el-form ref="resetPWForm" :model="resetPW.form" :rules="resetPW.rules" >
          <el-form-item prop="password">
            <el-input
              v-model="resetPW.form.password"
              type="password"
              auto-complete="off"
              placeholder="请输入新密码"
            >
              <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
            </el-input>

          </el-form-item>
          <el-form-item style="width:100%;">
            <el-button
              :loading="resetPW.loading"
              size="medium"
              type="primary"
              style="width:100%;"
              @click.native.prevent="submitReset"
            >
              <span v-if="!resetPW.loading">提交重置</span>
              <span v-else>提 交 中...</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <div v-if="activeStep===2" style="width: 350px;margin: 0 auto;">
        <el-result icon="success" subTitle="设置成功，请返回登录页重新登录">
          <template slot="extra">
            <router-link class="link-type" :to="'/login'">返回登录页</router-link>
          </template>
        </el-result>
      </div>

    </div>

    <!--  底部  -->
    <!--    <div class="el-login-footer">
          <span>Copyright © 2021-2022 konbai.work All Rights Reserved.</span>
        </div>-->
  </div>
</template>

<script>
import { getCaptchaSms, validateSmsCode, modifyPass } from "@/api/login";

export default {
  name: "Forgetpass",
  data() {
    return {
      activeStep: 0,
      // 安全验证
      aqyz:{
        // 是否可获取校验码
        isAuthCode: true,
        msg:'',
        form: {
          phonenumber: "",
          smsCode: "",
        },
        rules: {
          phonenumber: [
            { required: true, trigger: "blur", message: "请输入手机号" },
            {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              message: "请输入正确的手机号码",
              trigger: "blur"
            }
          ],
          smsCode: [{ required: true, trigger: "change", message: "请输入校验码" }]
        },
        loading: false,
      },
      // 重置密码
      resetPW:{
        form: {
          password: "",
        },
        rules: {
          password: [
            { required: true, trigger: "blur", message: "请输入新密码" },
          ],
        },
        loading: false,
      },
      redirect: undefined
    };
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  created() {
  },
  methods: {
    getAuthCode(){

      let regex = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
      if(this.aqyz.form.phonenumber && regex.test(this.aqyz.form.phonenumber)){
        getCaptchaSms({ phonenumber: this.aqyz.form.phonenumber }).then(res => {
          console.log(res);
          var time = 59;//定义时间变量 60s
          var timer = null;//定义定时器
          this.aqyz.isAuthCode=false;
          timer = setInterval(()=>{
            if(time==0){
              this.aqyz.isAuthCode=true;
              clearInterval(timer);//清除定时器
            }else{
              this.aqyz.msg=time+"S 重新发送";
              time--;
            }
          },1000);
        });
      }else {
        this.$alert(`请输入正确手机号码！`, `提示`, {
          type: 'warning'
        });
      }

    },
    // 提交验证
    submitValidate(){
      this.$refs["aqyzForm"].validate(valid => {
        if (valid) {
          this.aqyz.loading = true;
          validateSmsCode(this.aqyz.form).then(response => {
            console.log(response,123);
            this.resetPW.form.userId = response.data.userId;
            this.resetPW.form.userName = response.data.userName;
            this.aqyz.loading = false;
            this.activeStep = 1;
          }).finally(() => {
            this.aqyz.loading = false;
          });
        }
      });
    },
    // 提交重置
    submitReset(){
      this.$refs["resetPWForm"].validate(valid => {
        if (valid) {
          this.resetPW.loading = true;
          modifyPass(this.resetPW.form).then(response => {
            this.resetPW.loading = false;
            this.activeStep = 2;
          }).finally(() => {
            this.resetPW.loading = false;
          });
        }
      });
    },
    goLogin(){

    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/login-background.jpg");
  background-size: cover;
}
.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 800px;
  padding: 30px 30px 50px 30px;
  .el-input {
    height: 38px;
    input {
      height: 38px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.login-code {
  width: 38%;
  height: 38px;
  float: right;
  text-align: center;
  font-size: 14px;
  color: #ff5f00;
  border: 1px solid #ff5f00;
  border-radius: 6px;
}
.login-code-disable{
  width: 38%;
  height: 38px;
  float: right;
  text-align: center;
  font-size: 14px;
  color: #bfbfbf;
  border: 1px solid #bfbfbf;
  border-radius: 6px;
}
.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
</style>
