<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: 50%;
  top: 50%;
  position: absolute;
  width: 400px;
  transform: translate(-50%, -50%);
}

.registerForm {
  border-radius: 15px;
  background-clip: padding-box;
  padding: 15px 20px;
  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>
