<template>
  <div class="forgetCode">
    <h1>找回启服通密码</h1>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item prop="name">
        <el-input v-model="ruleForm.name" placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item prop="verificationCode"
        ><el-input
          v-model="ruleForm.verificationCode"
          placeholder="请输入验证码"
        ></el-input
        ><el-button @click="getVerificationCode">{{ btnInnerText }}</el-button>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="ruleForm.password"
          placeholder="请输入密码"
          show-password
        ></el-input>
      </el-form-item>
      <el-button type="primary" @click="submitForm()">确定</el-button>
      <p>
        <span @click="$router.push('/user/login')">登陆</span
        ><span @click="$router.push('/user/register')">注册</span>
      </p>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        name: "",
        verificationCode: "",
        password: ""
      },
      btnInnerText: "获取验证码",
      flag: true,
      timeNum: 60,
      timer: null,
      rules: {
        name: [{ required: true, message: "请输入账号", trigger: "blur" }],
        verificationCode: [
          { required: true, message: "请输验证码", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  methods: {
    //获取验证码
    getVerificationCode() {
      if (this.flag) {
        this.flag = false;
        this.btnInnerText = this.timeNum + "秒之后重新获取";
        this.timer = setInterval(() => {
          this.timeNum--;
          this.btnInnerText = this.timeNum + "秒之后重新获取";
          if (this.timeNum <= 0) {
            clearInterval(this.timer);
            this.btnInnerText = "重新获取验证码";
            this.timeNum = 10;
            this.flag = true;
          }
        }, 1000);
      }
    },

    //提交表单
    submitForm() {
      if (
        this.ruleForm.name &&
        this.ruleForm.password &&
        this.ruleForm.password
      ) {
        console.log(123);
      }
    }
  }
};
</script>

<style lang="scss">
.forgetCode {
  width: 555px;
  height: 511px;
  background: #fff;
  padding: 50px 112px 0;
  h1 {
    width: 100%;
    margin: 0 0 39px;
    text-align: center;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    line-height: 25px;
  }
  .el-form {
    .el-form-item {
      .el-form-item__content {
        margin-left: 0 !important;
        display: flex;
      }
    }
  }
  p {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 20px;
    margin-top: 60px;
    text-align: center;
  }
  .el-input {
    input {
      width: 100%;
      height: 42px;
      border-radius: 0;
    }
  }
  .el-form {
    .el-form-item {
      margin-top: 30px;
      button {
        border-radius: 0;
        border: 1px solid #108ee9;
        color: #108ee9;
        margin-left: 10px;
        width: 150px;
        height: 41px;
        margin-top: 0;
        background: #fff;
      }
    }
    button {
      width: 100%;
      height: 42px;
      margin-top: 20px;
      border-radius: 0;
      background: #3071fe;
      border: 1px solid #3071fe;
    }
    p {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      line-height: 20px;
      text-align: center;
      margin-top: 30px;
      span {
        color: #108ee9;
        cursor: pointer;
        margin: 0 20px;
      }
    }
  }
}
</style>
