<template>
  <form class="modal-card">
    <header class="modal-card-head">
      <h5 class="modal-card-title">
        ¿Estás seguro de querer declinar este ticket?
      </h5>
    </header>

    <section class="modal-card-body">
      <b-field label="Motivo por el cual vas a declinar el ticket">
        <b-input type="textarea" maxlength="100" v-model="motivo" expanded />
      </b-field>
    </section>

    <footer
      class="modal-card-foot"
      style="display: flex; justify-content: space-between"
    >
      <b-button type="is-danger" @click="$emit('close')"> Cancelar </b-button>

      <b-button
        type="is-success"
        @click="multaPrestamo(), $emit('close')"
        :disabled="!motivo"
      >
        Enviar
      </b-button>
    </footer>
  </form>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    token: { type: Object, require: true },
    folio: { type: String, require: true },
    imprimirError: { type: Function, required: true },
    imprimirMensaje: { type: Function, required: true },
    updateIsLoading: { type: Function, require: true },
  },
  data() {
    return {
      motivo: '',
    }
  },
  methods: {
    multaPrestamo() {
      const data = {
        folio: this.folio,
        validacion: 0,
        motivo: this.motivo,
      }

      this.updateIsLoading(true)
      axios
        .put(`${process.env.api}/admin/validar`, data, this.token)
        .then((res) => {
          this.updateIsLoading(false)
          this.imprimirMensaje(res.data.message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.imprimirError(err.response.data)
        })
        .finally(() => {
          this.$router.go(-1)
        })
    },
  },
}
</script>
