<template>
  <div class="wrapper">
    <div class="register">
      <div class="title">
        <div class="text">账号注册</div>
        <div class="close" @click="handleCloseLogin">×</div>
      </div>
      <el-form
        :model="form"
        status-icon
        :rules="rules"
        ref="registerForm"
        label-width="80px"
        class="register-form"
      >
        <el-form-item label="账号" prop="username">
          <el-input
            v-model="form.username"
            autocomplete="off"
            clearable
            placeholder="账号长度6-20个字符，只能包括字母、数字、下划线"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input
            v-model="form.phone"
            autocomplete="off"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickName">
          <el-input
            v-model="form.nickName"
            autocomplete="off"
            clearable
            placeholder="昵称长度8~10个字符"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="form.password"
            autocomplete="off"
            clearable
            placeholder="至少8位，至少含数字、大写字母、小写字母、特殊符其中三种"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input
            type="password"
            v-model="form.checkPass"
            autocomplete="off"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item class="submit-buttons">
          <el-button @click="resetForm('registerForm')">重置</el-button>
          <el-button
            :loading="loading"
            type="primary"
            @click="submitForm('registerForm')"
            class="submit"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { register } from "@/api/user";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        var pattern =
          /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\\W_!@#$%^&*`~()-+=]+$)(?![0-9\\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\\W_!@#$%^&*`~()-+=]{8,30}$/;
        if (!pattern.test(value)) {
          callback(
            new Error(
              "密码长度至少8位，至少含数字,大写字母,小写字母,特殊符其中三种"
            )
          );
        }
        if (this.form.checkPass !== "") {
          this.$refs.registerForm.validateField("checkPass");
        }
        callback();
      }
    };

    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var validateNickName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入昵称"));
      } else {
        var pattern = /[^\a-\z\A-\Z0-9\u4E00-\u9FA5]{6,10}/g;
        if (!pattern.test(value)) {
          callback(new Error("密码长度6~10位，只能包含中文、英文及数字"));
        }
      }
    };

    return {
      form: {
        username: "",
        password: "",
        checkPass: "",
        nickName: "",
      },
      isDisabled: true,
      second: 60,
      rules: {
        username: [
          { message: "请输入账号", trigger: "blur", required: true },
          {
            pattern: /^[0-9a-zA-Z|_]{6,20}$/g,
            message: "账号长度6-20个字符，只能包括字母、数字、下划线",
            trigger: "blur",
          },
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
            message: "请输入合法手机号/电话号",
            trigger: "blur",
          },
        ],
        password: [
          { validator: validatePass, trigger: "blur", required: true },
        ],
        checkPass: [
          { validator: validatePass2, trigger: "blur", required: true },
        ],
      },
      loading: false,
    };
  },
  watch: {
    "form.phone": {
      handler: function (value) {
        this.$refs["registerForm"].validateField("phone", (errorMessage) => {
          let valid = errorMessage == "";
          if (valid) {
            this.isDisabled = false;
          } else {
            this.isDisabled = true;
          }
        });
      },
      deep: true,
    },
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.loading = true;
          const { username, password, phone } = this.form;
          let params = {
            username,
            password,
            phone,
            status: 1,
          };
          let res = await register(params);
          if (res.code == "0") {
            this.$confirm("注册成功, 是否去登录?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "success",
            })
              .then(() => {
                this.$store.commit("app/OPEN_LOGIN_DIALOG", true);
              })
              .catch(() => {
                console.log("取消操作");
              });
          }
          this.loading = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleCloseLogin() {
      if (window.history.length <= 1) {
        this.$router.push({ path: "/" });
        return false;
      } else {
        this.$router.go(-1);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  width: 100%;
  background-image: url("@/assets/imgs/home/display-bg.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  padding: 60px 0 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  flex-direction: column;
  .register {
    width: 580px;
    background-color: #fff;
    border-radius: 16px;
    padding: 48px 32px;
    box-shadow: 0 4px 8px 0 rgb(7 17 27 / 10%);
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
      .text {
        font-weight: bold;
        font-size: 24px;
        color: #666;
      }
      .close {
        font-size: 34px;
        cursor: pointer;
        color: #ccc;
      }
    }
  }
}

::v-deep .el-input__inner {
  background: #e8f0fe;
  border: none;
}

::v-deep .submit-buttons {
  .el-form-item__content {
    display: flex;
    justify-content: flex-end;
    .el-button {
      border-radius: 8px;
      &:last-child {
        width: 160px;
        background-color: #2069c4;
        &:hover {
          filter: brightness(0.9);
        }
      }
    }
  }
}
</style>