<template>
  <section>
    <b-tabs type="is-toggle" :destroy-on-hide="true" v-model="tab" expanded>
      <b-tab-item label="Manual" icon="lead-pencil" value="0">
        <div class="columns">
          <ManualIdPrestamo :prestamoIdPrestamo="prestamoIdPrestamo" />

          <ManualNumeroInventario
            :operador="operador"
            :imprimirWarning="imprimirWarning"
            :imprimirError="imprimirError"
            :imprimirMensaje="imprimirMensaje"
            :updateIsLoading="updateIsLoading"
          />
        </div>
      </b-tab-item>

      <b-tab-item label="Scanner" icon="qrcode-scan" value="1">
        <Scanner :prestamoIdPrestamo="prestamoIdPrestamo" />
      </b-tab-item>
    </b-tabs>
  </section>
</template>

<script>
import axios from 'axios'
import ManualIdPrestamo from '@/components/operador/ManualIdPrestamo'
import ManualNumeroInventario from '@/components/operador/ManualNumeroInventario'
import ModalMultaIdPrestamo from './ModalMultaIdPrestamo'
import Scanner from '@/components/operador/Scanner'

export default {
  components: { ManualIdPrestamo, ManualNumeroInventario, Scanner },
  props: {
    operador: { type: Object, required: true },
    imprimirMensaje: { type: Function, required: true },
    imprimirWarning: { type: Function, required: true },
    imprimirError: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
  },
  data() {
    return { idPrestamo: '', updateVariable: () => {}, tab: '0' }
  },
  methods: {
    revisionMulta() {
      const modalProps = {
        operador: this.operador,
        idPrestamo: this.idPrestamo,
        regresar: this.regresar,
        regresoInmediato: false,
        imprimirError: this.imprimirError,
        imprimirMensaje: this.imprimirMensaje,
        updateIsLoading: this.updateIsLoading,
      }

      this.$buefy.modal.open({
        props: modalProps,
        parent: this,
        component: ModalMultaIdPrestamo,
        hasModalCard: true,
        customClass: 'custom-class custom-class-2',
        trapFocus: true,
      })
    },
    revisionMultaRegresoInmediato() {
      const modalProps = {
        operador: this.operador,
        idPrestamo: this.idPrestamo,
        regresar: this.regresar,
        regresoInmediato: true,
        imprimirError: this.imprimirError,
        imprimirMensaje: this.imprimirMensaje,
        updateIsLoading: this.updateIsLoading,
      }

      this.$buefy.modal.open({
        props: modalProps,
        parent: this,
        component: ModalMultaIdPrestamo,
        hasModalCard: true,
        customClass: 'custom-class custom-class-2',
        trapFocus: true,
      })
    },
    entregar() {
      const data = {
        idOperadorEntrega: this.operador.idOperador,
        idPrestamo: this.idPrestamo,
      }

      this.updateIsLoading(true)
      axios
        .put(`${process.env.api}/prestamo/entregar`, data, this.operador.token)
        .then((res) => {
          this.updateVariable()
          if (this.tab === '1') this.tab = '0'
          this.imprimirMensaje(
            `
              Entregar al usuario el equipo:<br>
              Carrito: ${res.data.Carrito.carrito}<br>
              Equipo: ${res.data.equipo}<br>
              Tipo: ${res.data.Carrito.TipoCarrito.tipoCarrito}<br>
              Número de Inventario: ${res.data.numeroInventario}<br>
              Número de Serie: ${res.data.numeroSerie}<br>
            `
          )
          this.updateIsLoading(false)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.imprimirError(err.response.data)
        })
    },
    regresar() {
      const data = {
        idOperadorRegreso: this.operador.idOperador,
        idPrestamo: this.idPrestamo,
      }

      this.updateIsLoading(true)
      axios
        .put(`${process.env.api}/prestamo/regresar`, data, this.operador.token)
        .then((res) => {
          this.updateVariable()
          if (this.tab === '1') this.tab = '0'
          this.updateIsLoading(false)
          this.imprimirMensaje(res.data.message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.imprimirError(err.response.data)
        })
    },
    prestamoIdPrestamo(idPrestamo, updateVariable = () => {}) {
      this.updateIsLoading(true)
      this.idPrestamo = idPrestamo
      this.updateVariable = updateVariable
      axios
        .get(
          `${process.env.api}/prestamo?idPrestamo=${this.idPrestamo}`,
          this.operador.token
        )
        .then((res) => {
          let data = res.data

          if (data.activo) {
            if (data.Equipo.Status.idStatus === 1)
              this.imprimirWarning(
                'Esta a punto de entregar el equipo de cómputo al usuario y dar inicio a un préstamo. ¿Esta segur@ de querer realizar esta acción?',
                this.entregar
              )
            else if (data.Equipo.Status.idStatus === 2)
              this.imprimirWarning(
                `
                  Esta apunto de recibir el equipo:<br>
                  Equipo: ${data.Equipo.equipo}<br>
                  Carrito: ${data.Equipo.Carrito.carrito}<br>
                  Tipo: ${data.Equipo.Carrito.TipoCarrito.tipoCarrito}<br>
                  Número de Inventario: ${data.Equipo.numeroInventario}<br>
                  Número de Serie: ${data.Equipo.numeroSerie}<br>
                  y dar por terminado el préstamo. ¿Esta segur@ de querer realizar esta acción?
                `,
                this.revisionMulta
              )
          } else if (data.regresoInmediato && !data.OperadorRegreso)
            this.imprimirWarning(
              'Esta a punto de confirmar el regreso de un equipo de cómputo. ¿Esta segur@ de querer realizar esta acción?',
              this.revisionMultaRegresoInmediato
            )
          else
            this.imprimirError({
              message: 'Este préstamo ya no se encuentra activo.',
            })
          this.updateIsLoading(false)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.imprimirError(err.response.data)
        })
    },
  },
}
</script>

<style></style>
