<template>
  <div class="yo-login">
    <img :src="backgroundImage" />
    <div class="yo-login--placeholder">
      <container mode="container-sm">
        <a-form-model :model="form" @submit="handleSubmit" @submit.native.prevent>
          <a-form-model-item
            :class="{ 'yo-login--label': !focus.user && !form.user }"
            :colon="false"
            label="用户名"
          >
            <a-input
              @blur="focus.user = false"
              @focus="focus.user = true"
              size="large"
              v-model="form.user"
            />
          </a-form-model-item>
          <a-form-model-item
            :class="{ 'yo-login--label': !focus.password && !form.password }"
            :colon="false"
            label="密码"
          >
            <a-input-password
              @blur="focus.password = false"
              @focus="focus.password = true"
              size="large"
              v-model="form.password"
            />
          </a-form-model-item>
          <a-form-model-item class="mt-lg">
            <a-button
              :disabled="form.user === '' || form.password === ''"
              :loading="loading"
              block
              html-type="submit"
              size="large"
              type="primary"
            >登录</a-button>
          </a-form-model-item>
        </a-form-model>
      </container>
    </div>
  </div>
</template>
<style lang="less" scoped>
@import '~@/assets/style/login';

</style>
<script>
import { doLogin } from '@/common/login';

export default {
  data() {
    return {
      backgroundImage: null,

      loading: false,
      form: {
        user: '',
        password: '',
      },
      focus: {
        user: false,
        password: false,
      },
    };
  },

  created() {
    this.backgroundImage = require(`@/assets/image/login-bg-0${Math.floor(Math.random() * 4)}.jpg`);
  },

  methods: {
    handleSubmit(e) {
      this.loading = true;
      doLogin({
        account: this.form.user,
        password: this.form.password,
      }).catch(() => {
        this.loading = false;
      });
    },
  },
};
</script>