<template lang="pug">
  .login
    LoginForm(class="login-card" ref="loginRef" @on-success-valid="handleLogin" :loading="btnLoading")
</template>
<script>
import LoginForm from '_c/loginForm'
import { mapActions, mapState, mapMutations } from 'vuex'

export default {
  components: {
    LoginForm
  },
  data() {
    return {
      isRegister: false,
      btnLoading: false
    }
  },
  computed: {
    ...mapState(['roles'])
  },
  mounted() {
    this.SET_ROUTER_TEMP('')
  },
  methods: {
    ...mapActions(['login']),
    ...mapMutations(['SET_ROUTER_TEMP']),
    async handleLogin({ username, password }) {
      try {
        this.btnLoading = true
        const { code } = await this.login({ username, password })
        if (code === 0) {
          this.$router.push({ path: '/' })
        } else {
          this.$refs.loginRef.updateCaptcha()
        }
      } catch (error) {
        console.log(error)
      } finally {
        this.btnLoading = false
      }
    }
  }
}
</script>
<style lang="scss">
.login {
  width: 100%;
  height: 100%;
  background: center / cover no-repeat url('../../assets/image/login-bg.png');
  position: relative;
  .login-card {
    position: absolute;
    top: 195px;
    bottom: 195px;
    right: 188px;
  }
}
</style>