<template>
  <div class="login_bg">
    <div class="login_content">
      <h2 style="text-align: center">邮箱注册</h2>
      <el-form
        size="medium"
        :model="registerForm"
        :rules="rules"
        ref="registerForm"
        :inline="true"
        label-width="100px"
        class="login_form">
        <el-form-item prop="email" label="邮箱">
          <el-input
            v-model="registerForm.email"
            style="width: 300px;background:#fff"
            placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item prop="code" label="验证码">
          <el-input
            v-model="registerForm.code"
            style="width: 180px"
            placeholder="请输入验证码"></el-input>
          <el-button style="margin-left: 10px" @click="verCode">
            获取验证码
          </el-button>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input
            type="password"
            v-model="registerForm.password"
            style="width: 300px;background:#fff"
            placeholder="请输入密码"
            autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="checkPass" label="确认密码">
          <el-input
            type="password"
            v-model="registerForm.checkPass"
            style="width: 300px;background:#fff"
            placeholder="请再次输入密码"
            autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="companyName" label="公司名称">
          <el-input
            v-model="registerForm.companyName"
            style="width: 300px;background:#fff"
            placeholder="请输入公司名称"></el-input>
        </el-form-item>
        <el-form-item prop="phoneNumber" label="手机号码">
          <el-input
            v-model="registerForm.phoneNumber"
            style="width: 300px;background:#fff"
            placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <el-form-item prop="job" label="职务">
          <el-input
            v-model="registerForm.job"
            style="width: 300px;background:#fff"
            placeholder="请输入职务"></el-input>
        </el-form-item>
        <div style="margin-left: 120px">
          <el-button size="medium" type="primary" @click="onRegister">
            立即注册
          </el-button>
        </div>
        <div style="margin-top: 20px;font-size: 14px">
          已有账号？
          <router-link to="/">马上登录</router-link>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { get, post } from '../utils/axios'
export default {
  name: 'register',
  components: {},
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.registerForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      registerForm: {},
      rules: {
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change'],
          },
        ],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        checkPass: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur' },
        ],
        companyName: [
          { required: true, message: '请输入公司名称', trigger: 'blur' },
        ],
        phoneNumber: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
        ],
        job: [{ required: true, message: '请输入职务', trigger: 'blur' }],
      },
      showPwd: false,
    }
  },
  methods: {
    verCode() {
      if (this.registerForm.email) {
        get('user/getEmailcode', {
          email: this.registerForm.email,
        }).then((res) => {
          this.$message.success(res.message)
        })
      }
    },
    onRegister() {
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          post('user/register', {
            ...this.registerForm,
          }).then((res) => {
            this.$message.success(res.message)
            if (res.message == '操作成功') {
              this.registerForm = {}
              this.$router.push('/')
            }
          })
        }
      })
    },
  },
}
</script>
<style scoped>
.login_bg {
  width: 100%;
  height: 100%;
  position: relative;
  background: url(../assets/register.jpg) center / cover no-repeat;
}
.login_content {
  padding: 18px;
  background: rgba(255, 255, 255, 0.7);
  position: absolute;
  top: 50%;
  left: 75%;
  height: 600px;
  width: 600px;
  border-radius: 6px;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  background-position: top right, center;
  background-repeat: no-repeat;
}

.login_form {
  padding: 40px;
  border-radius: 6px;
}
</style>
