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

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 passPhrase = aesEncode(password)
        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;
    right: 188px;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>