<template>
  <div class="mt-5">
    <b-field>
      <b-button
        type="is-danger"
        :disabled="
          alumno.Status.idStatus === 6 || alumno.Status.idStatus === 10
        "
        @click="updateCancelar()"
      >
        Cancelar
      </b-button>
    </b-field>

    <div class="mt-2" v-if="cancelar">
      <b-field label="Razón de la cancelación:">
        <b-input maxlength="500" type="textarea" v-model="mensajeCancelar" />
      </b-field>

      <b-field>
        <b-button
          type="is-link"
          :disabled="!mensajeCancelar"
          @click="
            imprimirWarning(
              '¿Seguro(a) que quiere cancelar este servicio?',
              cancelarServicio
            )
          "
        >
          Cancelar servicio
        </b-button>
      </b-field>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    idServicio: { type: Number, required: true },
    admin: { type: Object, required: true },
    alumno: { type: Object, required: true },
    imprimirError: { type: Function, required: true },
    imprimirMensaje: { type: Function, required: true },
    imprimirWarning: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
  },
  data() {
    return {
      cancelar: false,
      mensajeCancelar: '',
    }
  },
  methods: {
    updateCancelar() {
      if (this.cancelar) this.mensajeCancelar = ''
      this.cancelar = !this.cancelar
    },
    cancelarServicio() {
      const data = {
        idServicio: this.idServicio,
        mensaje: this.mensajeCancelar,
      }

      this.updateIsLoading(true)
      axios
        .put(`${process.env.api}/servicio/cancelar`, data, this.admin.token)
        .then((res) => {
          localStorage.removeItem('idServicio')
          this.updateIsLoading(false)
          this.imprimirMensaje(res.data.message)
          this.$router.push('/admin')
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.imprimirError(err.response.data)
        })
    },
  },
}
</script>

<style scoped></style>
