<template>
  <div class="register">
    <div class="register_box">
      <h1>请注册账号</h1>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="64px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="ruleForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="passWord">
          <el-input v-model="ruleForm.passWord" show-password></el-input>
        </el-form-item>
        <el-form-item label="管理员" prop="name">
          <el-input v-model="ruleForm.name" ></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="ruleForm.value2" clearable placeholder="请选择">
              <el-option
                v-for="item in role"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.enter="submitForm('ruleForm')"
            >注册</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
        <el-form-item>
          已有账号，请立即
          <router-link to="/login">登录</router-link>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { apiServe } from "@/api/api.js";
export default {
  data() {
    return {
      ruleForm: {
        userName: "",
        passWord: "",
        name: "",
        value2:""
      },
      role: [
          {
            value: "1",
            label: "超级管理员",
          },
          {
            value: "2",
            label: "管理员",
          },
          {
            value: "3",
            label: "普通用户",
          },
        ],
      rules: {
        userName: [
          // required表示是否必填, message表示验证提示, trigger表示验证触发的方式
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
        ],
        passWord: [
          // required表示是否必填, message表示验证提示, trigger表示验证触发的方式
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
        name: [
          // required表示是否必填, message表示验证提示, trigger表示验证触发的方式
          {
            required: true,
            message: "请输入管理员名称",
            trigger: "blur",
          },
        ],
        role: [
          // required表示是否必填, message表示验证提示, trigger表示验证触发的方式
          {
            required: true,
            message: "请输入管理员名称",
            trigger: "blur",
          },
        ],
      },
    };
  },

  mounted() {},

  methods: {
    submitForm(formName) {
      // this.$refs[formName] 相当于
      // this.$refs['formName'] 相当于
      // this.$refs.formName
      // validate 对整个表单进行验证
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // 若验证成功 此时应该调登录接口
          let data = {
            username: this.ruleForm.userName,
            password: this.ruleForm.passWord,
          };
          console.log(data);
          let res = await apiServe.register(data);
          if (res) {
            this.$message({
              message: "注册成功",
              type: "success",
            });
            this.$router.push("/login");
          } else {
            console.log("表单验证失败");
            // return false
          }
        }
      });
    },
    resetForm(formName) {
      // 对整个表单进行重置 将所有字段重置为初始值并移除校验
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.register::v-deep {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .register_box {
    width: 350px;
    height: 415px;
    box-shadow: 0 0 20px #999;
    padding: 0 20px;
    h1 {
      text-align: center;
      padding: 20px 0;
      font-size: 20px;
    }
  }
  .el-form {
    .el-form-item {
      &:nth-child(5),
      &:nth-child(6) {
        text-align: center;
        .el-form-item__content {
          margin-left: 0 !important;
        }
      }

      &:nth-child(6) {
        text-align: right;
      }
    }
    .el-select {
      width: 285px;
    }
  }
}
</style>