<template>
  <div class="login">
    <div class="login-bg"></div>
    <Card class="login-card">
      <div class="logo" slot="title">
        <img :src="iconLogo" />
      </div>
      <div class="form-con">
        <login-form :logining="logining" @on-success-valid="handleSubmit"></login-form>
      </div>
    </Card>
  </div>
</template>

<script>
import LoginForm from '@c/login-form'
import { mapActions } from 'vuex'
import iconLogo from '@img/logo-login.png'
export default {
  data () {
    return {
      iconLogo: iconLogo,
      logining: false
    }
  },
  components: {
    LoginForm
  },
  created () {
    // 生产环境，如果进入本系统登录页，尝试调用退出接口跳转单点登录的登录页
    if (process.env.NODE_ENV === 'production') {
      this.handleLogout()
    }
  },
  methods: {
    ...mapActions(['handleLogin', 'handleLogout', 'getUserAuthMenu']),
    handleSubmit ({ username, password }) {
      this.logining = true
      this.handleLogin({ username, password })
        .then(res => {
          if (res.status === 'success') {
            this.getUserAuthMenu().then(res => {
              this.logining = false
              this.$router.push({
                name: this.$config.HOME_PAGE_NAME
              })
            })
          } else {
            this.logining = false
          }
        })
        .catch(() => {
          this.logining = false
        })
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  position: relative;
  &-bg {
    width: 100%;
    height: 240px;
    background: fade(@primary-color, 50%);
    position: absolute;
    transform: translateY(-60%);
    top: 50%;
  }
  &-card {
    position: absolute;
    right: 160px;
    top: 50%;
    transform: translateY(-60%);
    width: 300px;
    .logo {
      height: 60px;
      text-align: center;
      img {
        width: 175px;
        height: 49px;
        margin-top: 6px;
      }
    }

    .form-con {
      padding: 10px 0 0;
    }
  }
}
</style>

            this.logining = false
