<template>
  <div class="bigbox">
    <div class="img">
      <div class="login">
        <div class="header">
          <h1>欢迎注册家政预约平台账户</h1>
        </div>
        <h1 class="logintitle">注册：</h1>
        <input class="topinp" type="text" placeholder="用户名" required v-model="username" />

        <br />
        <input type="text" placeholder="电子邮箱" v-model="email" />

        <input type="password" placeholder="密码" required v-model="password1" />

        <input type="password" placeholder="确认密码" @keyup.enter.native="regis" required v-model="password2" />
        <br />
        <div class="radio">
          <label class="lable">家政工作人员</label>
          <input class="rad" type="radio" value="1" v-model="usertype" />
          &nbsp;&nbsp;
          <label class="lable">雇主</label>
          <input class="rad" type="radio" value="2" v-model="usertype" />
        </div>
        <div v-if="vali">
          <div class="error" v-html="msg"></div>
        </div>
        <input type="submit" @click.prevent="regis" value="Register" />
      </div>
    </div>
  </div>
</template>
<script>
import { UserRegis } from "@/api";
import popmessage from "@/components/tip/index.js";
export default {
  name: "UserReg",
  data() {
    return {
      username: "",
      password1: "",
      password2: "",
      email: "",
      vali: "",
      msg: "",
      errormsg: {
        incommsg: "",
        corrmsg: "",
      },
      usertype: "",
    };
  },
  methods: {
    validate: function () {
      var pPattern =
        /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;

      var ePattern =
        /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
      this.errormsg.incommsg = "";
      this.errormsg.corrmsg = "";
      this.vali = false;
      this.msg = "";

      if (this.usertype == "") {
        this.vali = true;
        this.errormsg.incommsg = "请选择角色！<br/>";
      }
      if (this.password2 == "") {
        this.vali = true;
        this.errormsg.corrmsg = "请输入确认密码!<br/>";
      } else {
        if (!pPattern.test(this.password2)) {
          this.vali = true;
          this.errormsg.corrmsg =
            "密码最少6位，包括至少1个大写字母，<BR/>1个小写字母，1个数字，1个特殊字符<br/>";
        } else if (this.password1 != this.password2) {
          this.vali = true;
          this.errormsg.corrmsg = "密码不一致!<br/>";
        }
      }
      if (this.password1 == "") {
        this.vali = true;
        this.errormsg.corrmsg = "请输入密码!<br/>";
      } else {
        if (!pPattern.test(this.password1)) {
          this.vali = true;
          this.errormsg.corrmsg =
            "密码最少6位，包括至少1个大写字母，<br/>1个小写字母，1个数字，1个特殊字符<br/>";
        }
      }
      if (this.email == "") {
        this.vali = true;
        this.errormsg.incommsg = "请完善信息!<br/>";
      } else {
        if (!ePattern.test(this.email)) {
          this.vali = true;
          this.errormsg.corrmsg = "请输入正确邮箱！</br>";
        }
      }
      if (this.username == "") {
        this.vali = true;
        this.errormsg.incommsg = "请完善信息!<br/>";
      } else {
        if (this.username.length < 4) {
          this.vali = true;
          this.errormsg.corrmsg = "账号长度不得少4于位!<br/>";
        }
      }
      if (this.errormsg.incommsg == "") {
        this.msg = this.errormsg.corrmsg;
      } else {
        this.msg = this.errormsg.incommsg;
      }
      return this.vali;
    },

    regis() {
      /*测试账号 */
      if (!this.validate()) {
        let parm = {
          userName: this.username,
          password: this.password1,
          email: this.email,
          userType: this.usertype,
        };
        UserRegis(parm).then((response) => {
          if (response.data.code === 200) {
            this.username = "";
            this.email = "";
            this.password1 = "";
            this.password2 = "";
            this.usertype = "";
            popmessage({ type: "success", str: "注册成功" });
            this.$router.replace("/loginview");
          }else{
            this.username = "";
            this.email = "";
            this.password1 = "";
            this.password2 = "";
            this.usertype = "";
            popmessage({ type: "error", str: response.data.msg});
            this.$router.replace("/userreg");
          }
        });
      }
    },
  },
};
</script>

<style scoped>
img {
  width: 100%;
}

.img {
  height: 41rem;
  width: 77rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url("../../assets/2.png");
  background-size: contain;
  z-index: -999;
}

.login {
  position: relative;
  width: 35rem;
  height: 30rem;
  right: 0rem;
  top: 7rem;
  left: 40rem;
}

.header h1 {
  color: #272727;
  font-weight: 700;
  font-size: 1.5rem;
  border-bottom: 1px solid #e7e0e0;
  margin-top: -0.65rem;
  padding-bottom: 1rem;
}

input {
  width: 55%;
  height: 2.5rem;
  margin-top: 0.9rem;
}

.logintitle {
  font-size: 1.2rem;
  margin-bottom: 1.2rem;
}

.regis {
  font-size: 1.2rem;

  cursor: pointer;
}

input[type="submit"] {
  width: 13rem;
  background-color: #3e81b8;
  color: white;
  font-weight: bold;
}

input[type="submit"]:hover {
  background: #2e2d2d;
  color: #fff;
}

.topinp {
  margin-top: 0px;
}

.error {
  color: #a54141;
  height: 100%;
  width: 56%;
  margin: 0 auto;
  margin-bottom: 0px;
  font-size: 0.9333rem;
  text-align: left;
}

.radio {
  margin: 0 auto;
  width: 55%;
  margin-top: 1.3333rem;
  box-sizing: border-box;
  margin-bottom: 0.5333rem;
}

.rad {
  margin-top: -2px;
  margin-bottom: 1px;
  width: 1.2rem;
  height: 1.2rem;
  vertical-align: middle;
}

.lable {
  display: inline-block;
}
</style>
