<template>
  <div class="col-12">
    <el-form @submit.native.prevent="loginFunction">
      <div class="container">
        <div class="row">
          <div class="col-12 d-flex justify-content-center align-items-center" style="min-height: calc(100vh - 60px);">
            <admin-panel class="login">
              <h1 style="text-align: center;">ورود به پنل مدیریت</h1>
              <el-divider></el-divider>
              <el-form-item prop="username" :class="validation.username ? 'is-error' : ''" label="نام کاربری">
                <el-input v-model="login.username"></el-input>
                <p class="err" v-if="validation.username">{{ validation.username.msg }}</p>
              </el-form-item>
              <el-form-item prop="password" :class="validation.password ? 'is-error' : ''" label="پسورد">
                <el-input v-model="login.password" type="password"></el-input>
                <p class="err" v-if="validation.password">{{ validation.password.msg }}</p>
              </el-form-item>

              <el-checkbox v-model="login.remember_me" style="display: block;margin-top: 30px;margin-bottom: 15px;">مرا به خاطر بسپار</el-checkbox>

              <el-button size="small" native-type="submit">ورود</el-button>
            </admin-panel>
            <h1 v-if="$auth.loggedIn">{{ $auth.user.name }}</h1>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      login: {
        username: '',
        password: '',
        remember_me: false
      },
      validation: {}
    }
  },
  methods: {
    loginFunction() {
      this.validation = {}
      this.$auth.loginWith('local', {data: this.login})
          .then(res => {
            this.$router.push('/admin')
          })
          .catch(err => {
            this.validation = err.response.data.validation
          })
    }
  },
  layout: 'admin'
}
</script>


<style lang="scss" scoped>
.login {
  width: 100%;
  max-width: 600px;
  margin: 150px auto!important;
}
</style>
