<template>
  <el-form
    ref="registerRef"
    :model="registerForm"
    :rules="registerRules"
    class="register-form"
  >
    <h3 class="title">注册</h3>
    <el-form-item prop="username">
      <el-input
        v-model="registerForm.username"
        type="text"
        maxlength="11"
        auto-complete="off"
        placeholder="手机号"
      >
        <template #prefix
          ><svg-icon icon-class="user" class="el-input__icon input-icon"
        /></template>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input
        v-model="registerForm.password"
        type="password"
        auto-complete="off"
        placeholder="密码"
        @keyup.enter="handleRegister"
      >
        <template #prefix
          ><svg-icon icon-class="password" class="el-input__icon input-icon"
        /></template>
      </el-input>
    </el-form-item>
    <el-form-item prop="repeat_pass">
      <el-input
        v-model="registerForm.repeat_pass"
        type="password"
        auto-complete="off"
        placeholder="确认密码"
        @keyup.enter="handleRegister"
      >
        <template #prefix
          ><svg-icon icon-class="password" class="el-input__icon input-icon"
        /></template>
      </el-input>
    </el-form-item>
    <el-form-item prop="captcha" style="margin-bottom: 0">
      <el-input
        v-model="registerForm.captcha"
        auto-complete="off"
        placeholder="验证码"
        style="width: 65%"
        @keyup.enter="handleRegister"
      >
        <template #prefix
          ><svg-icon icon-class="validCode" class="el-input__icon input-icon"
        /></template>
      </el-input>
      <webGetCode v-model:username="registerForm.username" />
    </el-form-item>
    <el-form-item prop="isCheck" style="margin: 10px 0; height: 28px">
      <el-checkbox v-model="registerForm.isCheck">
        <span style="color: #999999">勾选即同意</span
        ><span style="color: #0054ff">《协议》</span>
      </el-checkbox>
    </el-form-item>
    <el-form-item style="width: 100%; margin-top: 35px">
      <el-button
        class="x_btns"
        :loading="loading"
        size="default"
        type="primary"
        style="width: 100%"
        @click.prevent="handleRegister"
      >
        <span v-if="!loading">注 册</span>
        <span v-else>注 册 中...</span>
      </el-button>
      <div style="float: right">
        <span
          class="x_blue pointer"
          @click="handleLogin"
          style="font-size: 16px"
          >登录</span
        >
      </div>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ElMessageBox } from "element-plus";
import { register } from "@/api/login";
import webGetCode from "@/components/webGetCode";
import md5 from "js-md5";

const props = defineProps({
  isLogin: Number,
});

const emit = defineEmits();

function handleLogin() {
  emit("update:isLogin", 1);
}

const router = useRouter();
const { proxy } = getCurrentInstance();
const registerRef = ref();
const registerForm = ref({
  username: "",
  password: "",
  repeat_pass: "",
  captcha: "",
  isCheck: true,
});

const equalToPassword = (rule, value, callback) => {
  if (registerForm.value.password !== value) {
    callback(new Error("两次输入的密码不一致"));
  } else {
    callback();
  }
};
const isCheck = (rule, value, callback) => {
  if (!value) {
    callback(new Error("请阅读并勾选"));
  } else {
    callback();
  }
};

const registerRules = {
  username: [
    { required: true, message: "手机号不能为空", trigger: "blur" },
    {
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
  ],
  password: [
    { required: true, trigger: "blur", message: "请输入您的密码" },
    {
      min: 5,
      max: 20,
      message: "用户密码长度必须介于 5 和 20 之间",
      trigger: "blur",
    },
  ],
  repeat_pass: [
    { required: true, trigger: "blur", message: "请再次输入您的密码" },
    { required: true, validator: equalToPassword, trigger: "blur" },
  ],
  //   captcha: [{ required: true, trigger: "change", message: "请输入验证码" }],
  isCheck: [{ required: true, validator: isCheck, trigger: "change" }],
};

const codeUrl = ref("");
const loading = ref(false);

function handleRegister() {
  registerRef.value.validate((valid) => {
    if (valid) {
      loading.value = true;
      let formData = Object.assign({}, registerForm.value);
      formData.password = md5(formData.password);
      formData.repeat_pass = md5(formData.repeat_pass);
      register(formData)
        .then((res) => {
          const username = formData.username;
          ElMessageBox.alert(
            "<font color='red'>恭喜你，您的账号 " +
              username +
              " 注册成功！</font>",
            "系统提示",
            {
              dangerouslyUseHTMLString: true,
              type: "success",
            }
          )
            .then(() => {
              handleLogin();
            })
            .catch(() => {});
        })
        .catch(() => {
          loading.value = false;
        });
    }
  });
}
</script>

<style lang="scss" scoped>
.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #333333;
  font-size: 20px;
  font-weight: bold;
}

.register-form {
  .el-input {
    height: 38px;
    input {
      height: 38px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}
.register-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.el-register-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
</style>
