<template>
  <div class="login-bg">
    <div class="login-form">
      <Loader msg="登录中..." position="absolute" />
      <ActiveForm :layout="layout" :model="model" ref="form" :label-width="90">
        <h2 class="login-title" slot="title">登录</h2>
        <div class="login-btn">
          <a-button html-type="submit" @click="handleLogin" type="primary" block>登录</a-button>
        </div>
      </ActiveForm>
    </div>
  </div>
</template>

<script>
import Loader from '@/components/loader'
export default {
  name: 'Login',
  components: {
    Loader,
  },
  data() {
    return {
      layout: [
        {
          username: {
            label: '用户名',
            type: 'input',
            width: 24,
            validate: {
              rules: [{required: true, message: '请输入用户名'}]
            }
          },
          password: {
            label: '密码',
            type: 'password',
            width: 24,
            validate: {
              rules: [{required: true, message: '请输入密码'}]
            }
          }
        }
      ],
      model: {},
    }
  },
  methods: {
    handleLogin() {
      this.$refs.form.validate(err => {
        if (err) return
        const params = {
          ...this.model,
          client_id: 'plan',
          client_secret: 'plan',
          grant_type: 'password',
        }
        this.$ajax.post({
          url: this.$api.POST_LOGIN,
          params,
        }).then(res => {
          const {access_token, refresh_token} = res
          this.$cookie.set('token', access_token)
          this.$cookie.set('refresh_token', refresh_token)
          this.$message.success('登录成功')
          this.$nextTick(() => this.$router.replace({path: '/'}))
        })
      })
    },
  },
}
</script>

<style scoped>
.login-bg {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  background: linear-gradient(45deg, black, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-form {
  position: relative;
  background: #fff;
  width: 300px;
  padding: 30px 0;
  border-radius: 4px;
  box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.2);
}
.login-title {
  text-align: center;
  margin-bottom: 30px;
}
.login-btn {
  text-align: center;
  width: 90%;
  margin: 20px auto 0;
}
</style>
