<template>
  <a-form-model :model="form" @submit="handleSubmit" @submit.native.prevent layout="inline">
    <a-form-model-item>
      <a-input placeholder="Username" v-model="form.user">
        <a-icon slot="prefix" style="color:rgba(0,0,0,.25)" type="user" />
      </a-input>
    </a-form-model-item>
    <a-form-model-item>
      <a-input placeholder="Password" type="password" v-model="form.password">
        <a-icon slot="prefix" style="color:rgba(0,0,0,.25)" type="lock" />
      </a-input>
    </a-form-model-item>
    <a-form-model-item>
      <a-button
        :disabled="form.user === '' || form.password === ''"
        :loading="loading"
        html-type="submit"
        type="primary"
      >Log in</a-button>
    </a-form-model-item>
  </a-form-model>
</template>
<script>
import { doLogin } from '@/common/login';

export default {
  data() {
    return {
      loading: false,
      form: {
        user: '',
        password: '',
      },
    };
  },
  methods: {
    handleSubmit(e) {
      this.loading = true;
      doLogin({
        account: this.form.user,
        password: this.form.password,
      }).finally(() => {
        this.loading = false;
      });
    },
  },
};
</script>