<template>
  <div id="backgroud">
    <div class="register-head" style="padding-top: 20px"></div>
    <div class="model">
      <div class="location-title"><h1>注册</h1></div>

      <el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model.trim="ruleForm.username" type="text" placeholder="用户名" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" type="password" placeholder="密码" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input v-model="ruleForm.checkPass" type="password" placeholder="确认密码" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model.trim="ruleForm.mobile" placeholder="手机号" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model.trim="ruleForm.email" type="text" placeholder="邮箱" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item class="register-actions">
          <el-button class="enter-btn" type="primary" :disabled="!select" @click="submitForm('ruleForm')">
            立即注册
          </el-button>
          <el-button class="login-link-btn" type="text" @click="goLogin">去登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { Register } from '@/api/Userapi'

export default {
  name: 'Register',
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
        return
      }
      if (this.ruleForm.password !== '') {
        this.$refs.ruleForm.validateField('checkPass')
      }
      callback()
    }
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    const validateUsername = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'))
        return
      }
      callback()
    }

    return {
      select: true,
      ruleForm: {
        username: '',
        password: '',
        checkPass: '',
        mobile: '',
        email: ''
      },
      rules: {
        username: [{ required: true, validator: validateUsername, trigger: 'blur' }],
        password: [{ required: true, validator: validatePass, trigger: 'blur' }],
        checkPass: [{ required: true, validator: validatePass2, trigger: 'blur' }]
      }
    }
  },
  methods: {
    open(message) {
      this.$alert(message, '提示', {
        confirmButtonText: '确定'
      })
    },
    handleRegister() {
      Register({
        username: this.ruleForm.username,
        password: this.ruleForm.password,
        mobile: this.ruleForm.mobile,
        email: this.ruleForm.email,
        createdBy: 1
      }).then(data => {
        if (data && data.id) {
          this.open('注册成功')
          this.$router.push({ name: 'login' })
        } else {
          this.open(data.message || '注册失败')
        }
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.handleRegister()
        }
      })
    },
    goLogin() {
      this.$router.push({ name: 'login' })
    }
  }
}
</script>

<style>
@import "../../assets/css/Form.css";

.location-title {
  text-align: center;
}

.register-head {
  position: absolute;
}

.el-input {
  float: left;
  width: 80%;
}

.register-actions .el-form-item__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.login-link-wrap {
  width: 100%;
  margin-top: 8px;
  text-align: right;
}

.login-link-btn {
  padding-right: 0;
}
</style>
