<template>
  <div>
    <el-form
      ref="loginForm"
      :rules="loginRules"
      :model="loginForm"
      class="login-form"
      status-icon
      label-width="0"
    >
      <el-form-item prop="userName">
        <el-input
          v-model="loginForm.userName"
          size="small"
          auto-complete="off"
          maxlength="11"
          placeholder="请输入用户名"
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input
          v-model="loginForm.code"
          size="small"
          auto-complete="off"
          placeholder="请输入验证码"
        >
          <template slot="suffix">
            <el-button
              :disabled="title != '发送验证码'"
              @click="snedCodeFn"
              type="text"
              >{{ title }}</el-button
            ></template
          >
        </el-input>
      </el-form-item>
      <el-form-item prop="p1">
        <el-input
          v-model="loginForm.p1"
          size="small"
          type="password"
          show-password
          auto-complete="off"
          placeholder="请输入密码"
          clearable
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="p2">
        <el-input
          v-model="loginForm.p2"
          size="small"
          type="password"
          show-password
          auto-complete="off"
          placeholder="请再次输入密码"
          clearable
        >
        </el-input>
      </el-form-item>
    </el-form>
    <el-button
      size="small"
      type="primary"
      class="login-submit"
      :loading="loading"
      @click="submitFn"
      >提交
    </el-button>
  </div>
</template>

<script>
import { mobileUpdApi, userUpdApi } from "@/api/login";
export default {
  data() {
    let validatePhone = (rule, value, callback) => {
      var regA = /^1[3456789]\d{9}$/;
      if (!regA.test(value)) {
        callback(new Error("请输入正确的用户名格式！"));
      } else {
        callback();
      }
    };
    let validatePassword = (rule, value, callback) => {
      var regA = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!#$%^&*@])[\da-zA-Z!#$%^&*@]{8,16}$/; //密码必须是8位以上、必须含有字母、数字、特殊符号
      var regB = /(123|234|345|456|567|678|789|012)/; //不能有3个连续数字
      if (!regA.test(value)) {
        callback(
          new Error("密码必须是8~16位、必须含有大小写字母、数字、特殊符号")
        );
      } else if (regB.test(value)) {
        callback(new Error("不能有3个连续数字"));
      } else {
        callback();
      }
    };
    var validateCheckPass = (rule, value, callback) => {
      if (value !== this.loginForm.p1) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      loginForm: {
        userName: "",
        code: "",
        p1: "",
        p2: ""
      },
      loginRules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            required: true,
            trigger: "blur",
            validator: validatePhone
          }
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
        p1: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            required: true,
            trigger: "blur",
            validator: validatePassword
          }
        ],
        p2: [
          { required: true, message: "请再次输入密码", trigger: "blur" },
          {
            required: true,
            trigger: "blur",
            validator: validateCheckPass
          }
        ]
      },
      title: "发送验证码"
    };
  },
  methods: {
    async snedCodeFn() {
      const regex = /^1[3456789]\d{9}$/;
      if (!regex.test(this.loginForm.userName)) {
        return this.$message.error("请检查输入的用户名是否正确！");
      }

      const res = await mobileUpdApi(this.loginForm.userName);
      if (!res.data.data) {
        return this.$message.info(res.data.msg);
      } else {
        this.$message.success("发送成功");
        let count = 60;
        let timer = setInterval(() => {
          if (count === 0) {
            this.title = "发送验证码";
            clearInterval(timer);
          } else {
            count--;
            this.title = `${count}s后重新发送`;
          }
        }, 1000);
      }
    },
    submitFn() {
      this.$refs.loginForm.validate(async valid => {
        if (valid) {
          this.loading = true;
          try {
            const res = await userUpdApi(this.loginForm);
            if (res.data.code === 0) {
              this.$message.success("修改成功");
              this.loading = false;
              this.$emit("updSuccess");
            }
          } catch (err) {
            this.loading = false;
          }
          console.log("res", res);
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped></style>
