<template>
  <el-row type="flex" justify="space-around" class="row">
    <div class="regtitle">
      <p>忘记密码</p>
    </div>
    <div class="regbox">
      <div class="regbox_form">
        <el-form
          label-width="120px"
          :model="passForm"
          :rules="submitRules"
          ref="passForm"
        >
          <el-form-item label="账号" prop="loginId">
            <el-input
              class="nomal"
              type="text"
              v-model.trim="passForm.loginId"
              placeholder="请输入账号"
            />
          </el-form-item>
          <el-form-item label="验证码" prop="sms">
            <el-input
              style="width: 40%"
              type="text"
              v-model.trim="passForm.sms"
              placeholder="请输入验证码"
            />
            <el-button
              plain
              type="primary"
              @click.prevent="handlesms()"
              style="width: 30%"
              :disabled="!show"
            >
              <span v-show="show">获取验证码</span>
              <span v-show="!show" class="count">{{ second }}秒后重试</span>
            </el-button>
          </el-form-item>
          <el-form-item label="新密码" prop="pwd">
            <el-input
              class="pass"
              v-model.trim="passForm.pwd"
              type="password"
              placeholder="请输入新密码"
              :show-password="isshow"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认新密码" prop="surePwd">
            <el-input
              class="pass"
              v-model.trim="passForm.surePwd"
              type="password"
              :show-password="isshow"
              placeholder="请确认新密码"
            ></el-input>
          </el-form-item>
          <div
            style="
              width: 90%;
              display: flex;
              justify-content: space-around;
              margin-left: 40px;
            "
          >
            <el-button
              type="primary"
              @click="handleSubmit"
              style="width: 20%; margin-top: 20px"
              >提交</el-button
            >
            <el-button
              plain
              type="success"
              @click="handleBack"
              style="width: 20%; margin-top: 20px"
              >返回</el-button
            >
          </div>
        </el-form>
      </div>
    </div>
  </el-row>
</template>

<script>
import { forgetpass, forgetpaSms } from "@/api/user";
import md5 from "md5";
import sha1 from "js-sha1";
export default {
  data() {
    var validatePass = async (rules, value, callback) => {
      const reg = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*.\/,;'])[\da-zA-Z~!@#$%^&*.\/,;']{8,16}$/;
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error("必须包含数字、英文字母、特殊符号且8-16位"));
      }
    };
    var validatesurePass = (rules, value, callback) => {
      if (value === this.passForm.pwd) {
        callback();
      } else {
        callback(new Error("请保持两次输入一致"));
      }
    };
    var validsms = (rules, value, callback) => {
      if (value.length != 6) {
        return callback(new Error("输入正确的验证码"));
      } else {
        return callback();
      }
    };
    return {
      isshow: true,
      show: true,
      passForm: {
        loginId: "",
        sms: "",
        pwd: "",
        surePwd: "",
      },
      submitRules: {
        loginId: {
          required: true,
          message: "账号/联系电话不能为空",
          trigger: "blur",
        },
        sms: [
          {
            required: true,
            message: "验证码不能为空",
            trigger: "blur",
          },
          {
            validator: validsms,
            trigger: "blur",
          },
        ],
        pwd: [
          {
            required: true,
            message: "请输入新密码",
            trigger: "blur",
          },
          {
            validator: validatePass,
            trigger: "blur",
          },
        ],
        surePwd: [
          {
            required: true,
            message: "请确认新密码",
            trigger: "blur",
          },
          {
            validator: validatesurePass,
            trigger: "blur",
          },
        ],
      },
      second: 60,
      pass: "",
      newpass: "",
    };
  },
  methods: {
    // 获取验证码
    handlesms() {
      // const loginId = this.loginId;
      // if (!loginId) {
      //   this.$message("请填写账号");
      // } else
      if (!this.passForm.loginId) {
        this.$message("请填写账号");
      } else {
        let url = "?loginId=" + this.passForm.loginId;
        forgetpaSms(url).then((res) => {
          if (res.success == true) {
            this.second = 60;
            this.show = false;
            //设置倒计时秒
            var auth_timetimer = setInterval(() => {
              this.second--;
              if (this.second <= 0) {
                this.show = true;
                clearInterval(auth_timetimer);
              }
            }, 1000);
            this.$message("验证码已成功发送到您的手机，请注意查收");
          } else {
            this.$message.error("获取验证码失败");
          }
        });
      }
    },
    // 发送
    handleSubmit() {
      this.$refs["passForm"].validate((valid) => {
        if (valid) {
          if (this.passForm.pwd) {
            this.pass = this.passForm.pwd;
            this.passForm.pwd = md5(sha1(this.passForm.pwd).toUpperCase()).toUpperCase();
          }
          if (this.passForm.surePwd) {
            this.newpass = this.passForm.surePwd;
            this.passForm.surePwd = md5(
              sha1(this.passForm.surePwd).toUpperCase()
            ).toUpperCase();
          }
          forgetpass(this.passForm)
            .then((res) => {
              if (res.success == true) {
                this.passForm.pwd = this.pass;
                this.passForm.surePwd = this.newpass;
                this.$message.success("新密码设置成功");
                this.$router.push("login");
              } else {
                this.$message.error("新密码设置失败");
                this.passForm.pwd = this.pass;
                this.passForm.surePwd = this.newpass;
              }
            })
            .catch(() => {
              this.passForm.pwd = this.pass;
              this.passForm.surePwd = this.newpass;
            });
        }
      });
    },
    // 返回
    handleBack() {
      this.$router.replace("login");
    },
  },
  mounted() {
    this.loginId = this.$route.params.username;
  },
};
</script>

<style scoped>
.row {
  width: 100%;
  height: 100vh;
  background: url('../../assets/bg.png') no-repeat;
  background-attachment: fixed;
  box-sizing: border-box;
  background-size: 100% 100%;
}
.regtitle {
  width: 30%;
  display: flex;
  align-items: center;
}
.regtitle p {
  margin: 0 auto;
  font-size: 25px;
  font-weight: bolder;
}
.regbox {
  width: 90%;
  display: flex;
  align-items: center;
  /* background: red; */
}
.regbox_form {
  width: 60%;
  max-height: 85%;
  margin: 0 auto;
  overflow-x: auto;
  /* background: #3f6cc7; */
}
.regbox_form ::v-deep .el-input {
  height: 40px;
}
.regbox_form ::v-deep .nomal .el-input__inner {
  width: 70%;
}
.regbox_form ::v-deep .pass {
  width: 70%;
}
</style>
