<template>
  <q-page padding>
    <div class="row justify-center items-center" style="height: 70vh;">
      <div class="col-xs-10 col-sm-8 col-md-6 col-lg-4 col-xl-3 q-gutter-sm" >
        <q-input label="Kullanıcı Adı/Email" outlined color="pcolor1" v-model="ldata.code"/>
        <q-input
          type="password"
          label="Parola" outlined color="pcolor1" v-model="ldata.pass"/>

        <div>
          <q-btn
            size="lg"
            style="width: 100%"
            square
            no-caps
            outline color="pcolor1" label="Giriş" @click="login"/>
        </div>


      </div>
    </div>
  </q-page>
</template>

<script setup>
import { reactive } from 'vue'
import { api } from 'boot/axios'
import { catchAxiosError, showAxiosError } from 'src/libjs/lib/axios'
import { useLoginStore } from 'stores/login'
import { useRouter } from 'vue-router'

const loginStore = useLoginStore()
const router = useRouter()

const ldata = reactive({
  email: '',
  pass: ''
})

const login = function () {
  api.post('/login', ldata)
    .then(res => {
      if (res.data.Success) {
        loginStore.login(res.data.Data)
        router.push('/panel')
      } else {
        showAxiosError(res)
      }
    })
    .catch(err => {
      catchAxiosError(err)
    })
}
</script>
