<template>
  <div class="page">
    <main-page :isLogin="true">
      <template  v-slot:formBox>
        <el-form ref="ruleForm" size="large" class="form-box" :model="registerForm" :rules="rules">
          <div class="title-container">
            <h3 class="title">
              用户注册
            </h3>
          </div>
          <el-form-item prop="username">
            <el-input v-model="registerForm.username" placeholder="请输入用户名" type="text" auto-complete="new-password" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="registerForm.password" placeholder="请输入密码" type="password" auto-complete="new-password" />
          </el-form-item>
          <el-form-item prop="password2">
            <el-input v-model="registerForm.password2" placeholder="请输入确认密码" type="password" auto-complete="new-password"
              @keyup.enter.native="submit" />
          </el-form-item>
          <el-form-item class="btn-box">
            <el-button class="btn" :loading="loading" @click="submit">
              注册
            </el-button>
          </el-form-item>
        </el-form>
      </template>
    </main-page>
  </div>
</template>

<script>
  import mainPage from './components/main.vue'
  import {  registerUser } from "@/api/login";
  import { message } from '@/utils/common';

  export default {
    data(){
      return {
        registerForm: {
          username: "",
          password: "",
        },
        rules: {
          username: [
            { required: true, message: "请输入用户名", trigger: "blur" }
          ],
          password: [{ required: true, message: "请输入密码", trigger: "blur" }],
          password2: [{ trigger: "blur", validator: this.validPwd2 }]
        },
        loading: false,
      }
    },
    components: {
      mainPage
    },
    methods: {
      validPwd2(rule, value, callback) {
        if (value === "") {
          return callback(new Error("请输入确认密码"));
        } else if (value !== this.registerForm.password) {
          return callback(new Error("两次输入密码不一致！"));
        } else {
          callback();
        }
      },
      submit(){
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            let param = {
              username: this.registerForm.username,
              password: this.registerForm.password,
              markEnable: 1
            };
            this.loading = true;
            registerUser(param).then(res => {
              message("success", "注册成功", 3000)
              this.$router.push({
                path: '/userLogin'
              })
            }).finally(err => {
              this.loading = false
            })
          } else {
            return false;
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
.page{ 
  width: 100%;
  height: 100%;
  .form-box {
      position: absolute;
      right: 0;
      width: 85%;
      padding: 20px 60px;
      border:4px solid #0092ca;
      border-radius: 30px;
      box-shadow: 0 0 10px #0092ca inset;

      .el-form-item {
        margin-bottom: 35px;
      }

      .title-container {
        text-align: center;
        color: #0092ca;
        letter-spacing: 5px;
        font-size: 28px;
        .title {
          margin: 32px 0 40px;
        }
      }

      .btn-box {
        text-align: center;

        .btn {
          background-image: linear-gradient(to right,#00459e,#002577,#00459e);
          color: #fff;
          letter-spacing: 8px;
          border: none;
          width: 100%;
          opacity: 0.9;
          font-size: 18px;

          &:hover {
            opacity: 1;
          }
        }
      }
    }
}
</style>