<template>
	<div class="col-12">
		<el-form @submit.native.prevent="loginFunction">
			<div class="container">
				<div class="row">
					<div class="col-12">
						<admin-panel style="width: 50%;margin: 300px auto 0">
							<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>
