<template lang="pug">
  main
    nav.navbar.is-u-blue
      div.navbar-brand
        a.navbar-item
          b PC PUMA
    .container
      .columns
        .column.is-4.is-offset-4.has-text-centered
          br
          img(src="../assets/pcpuma.jpg" width="300px")
          br
          un-notification(v-if='this.status' v-bind:msj='this.err' status=true)
          br
          form
            .field
              .select
                select(v-model="kiosko" require)
                  option(disabled) selecciona el kiosko
                  option(selected) 1
                  option 2
            .field
              p.control.has-icons-left
                input.input.is-link(placeholder="Usuario" v-model="user")
                span.icon.is-small.is-left
                  i
                    font-awesome-icon(icon="user")
            .field
              p.control.has-icons-left
                input.input.is-link(placeholder="Contraseña" v-model="pass" type="password")
                span.icon.is-small.is-left
                  i
                    font-awesome-icon(icon="lock")
            .field.has-text-centered
              input.button.is-u-blue(type="submit" v-on:click="Login($event)" value="Iniciar sesión")
</template>

<script>
import UnNotification from '../components/general/Notificacion.vue'
import api from '../api'
const axios = require('axios')
export default {
  components: {
    UnNotification
  },
  data () {
    return {
      user: '',
      pass: '',
      err: '',
      status: false,
      kiosko: ''
    }
  },
  methods: {
    Login: function (event) {
      if (event) event.preventDefault()
      axios({
        method: 'post',
        url: api.url + '/login',
        data: {
          usuario: this.user,
          pass: this.pass
        }
      })
        .then(response => {
          console.log(response.data)
          this.$store.commit('login', response.data)
          this.$store.commit('kiosko', this.kiosko)
          this.$router.push('/')
        })
        .catch(error => {
          this.err = error.response.data.err
          this.status = !error.response.data.status
        })
    }
  }
}
</script>

<style lang="css" scoped>
.navbar{
    border-bottom: #B08100 solid 5px;
    box-shadow: 0px 13px 21px 2px rgba(0,0,0,0.21);
  }
</style>
