<template>
  <div id="register">
    <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: 80%"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password" label="密 码：">
        <el-input
          v-model="addAndEditFormData.password"
          placeholder="请输入密码"
          show-password
          style="width: 80%"
        ></el-input>
      </el-form-item>
      <el-form-item prop="confirmPassword" label="确认密码:">
        <el-input
          v-model="addAndEditFormData.confirmPassword"
          placeholder="请输入密码"
          show-password
          style="width:76%"
        ></el-input>
      </el-form-item>
      <el-form-item prop="name" label="用户名：">
        <el-input
          v-model="addAndEditFormData.name"
          placeholder="请输入用户名"
          style="width:76%"
        ></el-input>
      </el-form-item>
      <el-form-item prop="phone" label="电话：">
        <el-input
          v-model="addAndEditFormData.phone"
          placeholder="请输入电话"
          style="width:76%"
        ></el-input>
      </el-form-item>
      <el-form-item prop="classId" label="班级：">
        <el-select
          placeholder="请选择班级"
          v-model="addAndEditFormData.classId"
          filterable
          size="small"
          style="width: 250px"
          clearable
        >
          <el-option
            v-for="item in classNames"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="handleConfirmEvent"
          style="width: 100%"
          ><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>
</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 {
      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"
        }
      },
      // 样式数据
      formLabelWidth: "120px"
    };
  },
  created() {
    /*this.classNames.push({
      id: 1, name: "人间盛世颜一班"
    })
    this.classNames.push({
      id: 2, name: "人间盛世颜二班"
    })*/
  },
  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("/");
            }
          });
        }
      });
    }
  }
};
</script>

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

.registerForm {
  border-radius: 15px;
  background-clip: padding-box;
  width: 350px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 15px 25px;
  background: #a9b3a9;
  border: #133cce;
  box-shadow: 0 0 25px #2cb6b6;
}

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