<template>
  <div id="register">
    <div class="registerDiv">
      <el-form ref="registerForm" :model="addAndEditFormData" :rules="addAndEditRules" class="registerForm">
        <h3 class="registerTitle">注册页面</h3>
        <el-form-item prop="account" label="账 号：">
          <el-input v-model="addAndEditFormData.account" placeholder="请输入账号" style="width: 75%"></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密 码：">
          <el-input v-model="addAndEditFormData.password" placeholder="请输入密码" show-password style="width: 75%">
          </el-input>
        </el-form-item>
        <el-form-item prop="confirmPassword" label="确认密码:">
          <el-input v-model="addAndEditFormData.confirmPassword" placeholder="请输入密码" show-password style="width:75%">
          </el-input>
        </el-form-item>
        <el-form-item prop="name" label="用户名：">
          <el-input v-model="addAndEditFormData.name" placeholder="请输入用户名" style="width:75%"></el-input>
        </el-form-item>
        <el-form-item prop="phone" label="电 话：">
          <el-input v-model="addAndEditFormData.phone" placeholder="请输入电话" style="width:75%"></el-input>
        </el-form-item>
        <el-form-item prop="classId" label=" 班 级：">
          <el-cascader @change="stuClassChange" :change-on-select="true" :props="defaultParams" :options="classNames"
            v-model="addAndEditFormData.classId" :clearable="true" style="width:75%">
          </el-cascader>
        </el-form-item>
        <el-form-item class="registerBtu">
          <el-button type="primary" @click="handleConfirmEvent" style="width: 70%">
            <i class="el-icon-upload"></i>注 册
          </el-button>
        </el-form-item>
        <div class="navigate">
          <span>已有账号？ <router-link to="/">去登陆</router-link></span>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    name: "register",
    data() {
      let validateConfirmPassword = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入确认密码"));
        } else if (value !== this.addAndEditFormData.password) {
          callback(new Error("两次密码输入不一致"));
        } else {
          callback();
        }
      };
      return {
        defaultParams: {
          label: 'name',
          value: 'id',
          children: 'child'
        },
        classNames: [], // 班级数据
        addAndEditFormData: {
          name: "",
          phone: "",
          account: "",
          password: "",
          classId: "",
          confirmPassword: "" // 确认密码
        },
        message: "",
        addAndEditRules: {
          account: {
            required: true,
            message: "账号不能为空",
            trigger: "blur"
          },
          password: {
            required: true,
            message: "密码不能为空",
            trigger: "blur"
          },
          name: {
            required: true,
            message: "用户名不能为空",
            trigger: "blur"
          },
          confirmPassword: {
            required: true,
            validator: validateConfirmPassword,
            trigger: "blur"
          },
          phone: {
            required: true,
            message: "电话不能为空",
            trigger: "blur"
          }
        },
      };
    },
    created() {
      // 去加载班级数据
      this.api.getApi("/stu/class/get/treeData").then(e => {
        this.classNames = e.data;
      });
    },
    methods: {
      handleConfirmEvent() {
        this.$refs.registerForm.validate(valid => {
          if (valid) {
            this.api.postApi("/register", this.addAndEditFormData).then(e => {
              if (e.data.code === 200) {
                this.$router.push("/");
              }
            });
          }
        });
      },

      // 监听班级选择
      stuClassChange(value) {
        this.addAndEditFormData.classId = value[value.length - 1];
      }
    }
  };
</script>

<style scoped>
  #register {
    background-image: url("../../assets/img/1.jpg");
    background-size: cover;
    height: 100vh;
    width: 100vw;
  }

  .registerDiv {
    left: 40%;
    top: 20%;
    position: absolute;
    width: 400px;
  }

  .registerForm {
    border-radius: 15px;
    background-clip: padding-box;
    padding: 15px 20px;
    color: black;
    border: #133cce;
    box-shadow: 0 0 25px #2cb6b6;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1;
    text-align: right;
  }

  .registerBtu {
    margin-right: 25%;
  }

  .registerTitle {
    margin: 0 auto 15px auto;
    text-align: center;
    color: #3c8dbc;
  }

  .navigate {
    text-align: right;
    color: #8b8989;
    font-size: small;
    margin-top: -10px;
  }
</style>
