<template>
  <div class="full-h cont">
    <div class="has-text-centered block">
      <h2 class="is-size-2">
        Registro de Invitados Para la Entrega de Medallas
      </h2>
      <b-image
        :src="require('@/assets/login_image.png')"
        alt="LoginImage"
        ratio="601by235"
        class="my-4"
      ></b-image>
      <p>
        Para garantizar el acceso de sus invitados a la ceremonia de entrega de
        medallas en la que usted será distinguido(a), le pedimos completar los
        siguientes datos:
      </p>
    </div>
    <div class="is-flex is-justify-content-center">
      <form class="box">
        <b-field label="Numero de trabajador" :type="error">
          <b-input
            type="number"
            @keyup.enter.native="login()"
            v-model="noTrabajador"
          />
        </b-field>

        <div class="has-text-centered">
          <b-button
            @click="login()"
            type="is-success"
            :disabled="error || !noTrabajador"
          >
            Iniciar Sesión
          </b-button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    imprimirMensaje: { type: Function, required: true },
    imprimirWarning: { type: Function, required: true },
    imprimirError: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
  },
  data() {
    return {
      noTrabajador: '',
      error: '',
    }
  },
  methods: {
    login() {
      if (this.noTrabajador && !this.error) {
        const data = {
          numeroTrabajador: this.noTrabajador,
        }
        this.updateIsLoading(true)
        axios
          .post(`${process.env.api}/profesor/login`, data)
          .then((res) => {
            const info = res.data

            localStorage.setItem('token', info.token)
            localStorage.setItem('idProfesor', info.Profesor.idProfesor)
            localStorage.setItem('nombre', info.Profesor.nombre)
            localStorage.setItem('adscripcion', info.Profesor.adscripcion)
            localStorage.setItem(
              'numeroTrabajador',
              info.Profesor.numeroTrabajador
            )
            this.updateIsLoading(false)
            this.$router.push(`/${'profesor'}`)
          })
          .catch((err) => {
            this.error = 'is-danger'
            this.updateIsLoading(false)
            this.imprimirError(err.response.data)
          })
      }
    },
  },
  watch: {
    password() {
      if (this.error) this.error = ''
    },
    usuario() {
      if (this.error) this.error = ''
    },
    loginType() {
      this.noTrabajador = ''
    },
  },
}
</script>

<style scoped>
.full-h {
  min-height: 75vh;
}
.cont {
  width: 50%;
  margin-bottom: 20px;
}
form {
  width: 30rem;
}
</style>
