<template>
  <div class="forget-pswd login-box">
    <div class="login-body">
      <div class="login-title">
        <h1>忘记密码</h1>
      </div>
      <div class="login-form">
        <el-form
          ref="modalFormComp"
          :model="modalForm"
          :rules="forgetPswdRules"
        >
          <el-form-item prop="phone">
            <el-input
              v-model.trim="modalForm.phone"
              prefix-icon="el-icon-phone-outline"
              placeholder="请输入手机号"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item prop="code">
            <div class="vlcode">
              <div class="vlcode-right">
                <el-button
                  long
                  :type="isFetchingCode ? 'default' : 'info'"
                  @click="fetchSmsCode"
                  :disabled="isFetchingCode"
                  >{{ codeContent }}</el-button
                >
              </div>
              <div class="vlcode-left">
                <el-input
                  v-model.trim="modalForm.code"
                  prefix-icon="el-icon-message"
                  placeholder="请输入短信验证码"
                  clearable
                ></el-input>
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              v-model.trim="modalForm.password"
              prefix-icon="el-icon-lock"
              placeholder="请输入新密码"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item prop="repassword">
            <el-input
              type="password"
              v-model.trim="modalForm.repassword"
              prefix-icon="el-icon-lock"
              placeholder="请确认密码"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item></el-form-item>
          <el-form-item>
            <el-button
              class="login-submit-btn"
              size="large"
              type="info"
              :disabled="isSubmit"
              round
              @click="submit('modalFormComp')"
              >确认</el-button
            >
            <div class="login-link">
              <router-link :to="{ name: 'Login' }">返回登陆</router-link>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { phone, password, smscode } from "@/plugins/formRules";
import { modifyPwd } from "../api";
import fetchSmsMixins from "../fetchSmsMixins";

const nameWaitTime = "forgetPwd";

export default {
  name: "forget-pswd",
  mixins: [fetchSmsMixins],
  data() {
    const equalToPswd = (rule, value, callback) => {
      if (value !== this.modalForm.password) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      nameWaitTime,
      modalForm: {
        phone: "",
        code: "",
        password: "",
        repassword: "",
      },
      forgetPswdRules: {
        phone,
        code: smscode,
        password,
        repassword: [
          ...password,
          {
            validator: equalToPswd,
            trigger: "blur",
          },
        ],
      },
      isSubmit: false,
    };
  },
  mounted() {
    this.setWaitingTime();
  },
  methods: {
    async submit(name) {
      const valid = await this.$refs[name].validate();
      if (!valid) return;

      if (this.isSubmit) return;
      this.isSubmit = true;
      const data = await modifyPwd(this.modalForm).catch(() => {
        this.isSubmit = false;
      });

      if (!data) return;
      this.isSubmit = false;
      this.$message.success("重置密码成功！");
      this.$router.push({
        name: "Login",
      });
    },
  },
};
</script>
