<template>
  <div class="loginMain">
    <div class="login">
      <el-card shadow="hover" style="width: 450px">
        <template #header>
          <div style="text-align: center">
            login
          </div>
        </template>
        <div>
          <el-form :model="regForm" label-suffix=":" @submit.prevent label-width="auto">
            <el-form-item label="student number">
              <el-input v-model="regForm.name" placeholder="please input student number" />
            </el-form-item>
            <el-form-item label="password">
              <el-input v-model="regForm.password" type="password" placeholder="please input password" show-password
                @keyup.enter="login" />
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <div style="text-align: center">
            <el-button class="button" @click="login"> login </el-button>
          </div>
        </template>
      </el-card>
    </div>
  </div>
</template>
<script>
import {
  loginFun, //登录
} from "@/api/user";
import md5 from "md5"
export default {
  name: "login",
  components: {},
  data() {
    return {
      regForm: {
        name: "",
        password: "",
      },
    };
  },
  watch: {},
  computed: {},
  async mounted() {
    await this.init();
  },
  beforeUnmount() { },

  methods: {
    dealForm() {
      return {
        xuehao: this.regForm.name,
        mima: md5(this.regForm.password),
      }
    },
    async login() {
      let formData = this.dealForm()
      let res = await loginFun(formData)
      if (!res.hasError) {
        ElMessage.success(res.msg);
        localStorage.setItem("userId", this.$_.get(res, ["list", 0, "_id"], ""))
        localStorage.setItem("userName", this.$_.get(res, ["list", 0, "xueshengxingming"], ""))
        localStorage.setItem("isAdmin", this.$_.get(res, ["list", 0, "isAdmin"], 0))
        this.$router.push("/user")
      } else {
        ElMessage.error(res.msg);
        localStorage.clear()
      }
    },
  },
};
</script>
<style scoped>
.loginMain {
  background-image: url("@/assets/img/login.jpg");
  background-size: 100% 100%;
  height: 100vh;
  width: 100vw;
}

.login {
  padding-top: calc(50vh - 165px);
  padding-left: calc(50vw - 225px);
}
</style>
