<template>
  <div class="login"></div>
  <div class="body">
    <Login @on-submit="handleSubmit">
      <UserName name="username" />
      <Password name="password" />
      <Submit />
    </Login>
  </div>
</template>

<script>
import api from '../../api/index.js';
import { sha256 } from 'js-sha256';
export default {
  data() {
    return {
      autoLogin: true,
    };
  },
  methods: {
    handleSubmit(valid, { username, password }) {
      if (!valid) return;
      const pws = sha256(password);
      api.login_api(username, pws).then(res => {
        localStorage.setItem('neican_token', res.token);
        this.$Message.success('登录成功');
        this.$router.replace('/home/personnelMatters');
      });
    },
  },
};
</script>

<style scoped lang="scss">
.login {
  width: 100%;
  height: 100%;
  background-image: url(../../assets/img/loginbg.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: blur(5px);
}

.body {
  position: fixed;
  z-index: 1;
  width: 30em;
  background-color: #ffffff99;
  top: 50%;
  left: 50%;
  border-radius: 15px;
  padding: 15px;
  transform: translate(-50%, -50%);
}
</style>
