# 内联登录栏

<template>
  <tg-form ref="form" :form="form" :rules="rules" layout="inline" @submit="handleSubmit">
    <tg-form-item attr="userName" label>
      <a-input v-model="form.userName" placeholder="Username">
        <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
      </a-input>
    </tg-form-item>
    <tg-form-item attr="password" label>
      <a-input v-model="form.password" placeholder="Password">
        <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
      </a-input>
    </tg-form-item>
    <tg-form-item>
      <a-button type="primary" :disabled="btnDisabled">Log in</a-button>
    </tg-form-item>
  </tg-form>
</template>
<script>
export default {
  data () {
    return {
      // 标记是否是刚进来
      isFirst: true,
      form: {
        userName: '',
        password: ''
      },
      rules: [
        ['required', ['userName', 'password']]
      ]
    }
  },
  computed: {
    btnDisabled () {
      if (this.isFirst) {
        return true
      }

      return this.$refs.form.hasErrors
    }
  }
}
</script>