<template>
  <div class="banner-container1">
    <div class="title-container">
      <h3 class="title">找回密码</h3>
    </div>
    <el-form
      label-width="100px"
      :model="passForm"
      :rules="submitRules"
      ref="passForm"
      class="grid-form-class login-form"
    >
      <div class="form-body">
        <div class="flex-css">
          <el-form-item label="账号" prop="loginId">
            <el-input
              class="nomal"
              type="text"
              v-model.trim="passForm.loginId"
              placeholder="请输入账号"
              autocomplete="off"
            />
          </el-form-item>
        </div>
        <div class="flex-css">
          <el-form-item label="验证码" prop="sms">
            <el-input
              style="width: 68%"
              type="text"
              v-model.trim="passForm.sms"
              placeholder="请输入验证码"
              autocomplete="off"
            />
            <el-button
              type="success"
              @click.prevent="handlesms()"
              style="width: 30%"
              :disabled="!show"
              size="mini"
            >
              <span v-show="show">获取验证码</span>
              <span v-show="!show" class="count">{{ second }}秒后重试</span>
            </el-button>
          </el-form-item>
        </div>
        <div class="flex-css">
          <el-form-item label="新密码" prop="pwd">
            <el-input
              v-model.trim="passForm.pwd"
              placeholder="请输入新密码"
              show-password
              auto-complete="new-password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </div>
        <div class="flex-css">
          <el-form-item label="确认新密码" prop="surePwd">
            <el-input
              v-model.trim="passForm.surePwd"
              placeholder="请确认新密码"
              show-password
              auto-complete="new-password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </div>
      </div>
      <div style="text-align: center; margin-top: 40px">
        <el-button @click="handleBack" type="info">返 回</el-button>
        <el-button type="primary" @click="handleSubmit">提 交</el-button>
      </div>
    </el-form>
  </div>
  <!-- </div>
  </div> -->
</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() {
      if (!this.passForm.loginId) {
        this.$message.warning("请填写账号");
      } 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.success("验证码已成功发送到您的手机，请注意查收");
          } 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.$emit("transfer", false);
                // 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.$emit("transfer", false);
      // this.$router.replace("login");
    }
  },
  mounted() {
    this.loginId = this.$route.params.username;
  }
};
</script>

<style lang="scss" scoped>
.banner-container1 {
  position: absolute;
  width: 440px;
  height: 418px;
  background: #ffffff;
  border-radius: 4px;
  left: 50%;
  transform: translateX(-50%);
  .title-container {
    text-align: center;
    .title {
      margin: 50px 0 10px;
      font-size: 20px;
      color: #14569d;
      letter-spacing: 0.3em;
    }
  }
  .login-form {
    margin: 30px 25px 0;
  }
}
</style>
