<template>
  <div class="mb-4">
    <div class="is-flex is-align-items-center">
      <h6 class="pr-4 is-size-5">Ver {{ title }}</h6>

      <div class="pr-4">
        <b-button
          type="is-link is-light"
          tag="a"
          target="_blank"
          :href="`https://drive.google.com/file/d/${this.archivo()}/view?usp=sharing`"
        >
          Ver
        </b-button>
      </div>

      <div>
        <b-button
          type="is-danger"
          @click="updateRechazar()"
          v-if="
            (alumno.Status.idStatus === 1 && title === 'carta de aceptación') ||
            (alumno.Status.idStatus === 5 &&
              (title === 'carta de termino' || title === 'informe global'))
          "
        >
          Rechazar
        </b-button>
      </div>
    </div>

    <div v-if="rechazar" class="mt-2">
      <b-field label="Razón del rechazo:">
        <b-input maxlength="500" type="textarea" v-model="mensajeRechazo" />
      </b-field>

      <b-field>
        <b-button
          type="is-link"
          :disabled="!mensajeRechazo"
          @click="
            imprimirWarning(
              '¿Seguro(a) que quiere rechazar este documento?',
              rechazarArchivo
            )
          "
        >
          Rechazar {{ title }}
        </b-button>
      </b-field>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    title: { type: String, 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 {
      rechazar: false,
      mensajeRechazo: '',
    }
  },
  methods: {
    updateRechazar() {
      if (this.rechazar) this.mensajeRechazo = ''
      this.rechazar = !this.rechazar
    },
    archivo() {
      if (this.title === 'carta de aceptación')
        return this.alumno.cartaAceptacion
      else if (this.title === 'carta de termino')
        return this.alumno.cartaTermino
      else if (this.title === 'informe global') return this.alumno.informeGlobal
    },
    rechazarArchivo() {
      if (this.title === 'carta de aceptación')
        this.rechazarFunc(this.rechazarCartaAceptacion)
      else if (this.title === 'carta de termino')
        this.rechazarFunc(this.rechazarCartaTermino)
      else if (this.title === 'informe global')
        this.rechazarFunc(this.rechazarInformeGlobal)
    },
    rechazarFunc(funcRechazar) {
      const data = {
        idServicio: this.alumno.idServicio,
        mensaje: this.mensajeRechazo,
      }

      this.updateIsLoading(true)
      funcRechazar(data)
        .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)
        })
    },
    rechazarCartaAceptacion(data) {
      return axios.put(
        `${process.env.api}/servicio/rechazar_aceptacion`,
        data,
        this.admin.token
      )
    },
    rechazarCartaTermino(data) {
      return axios.put(
        `${process.env.api}/servicio/rechazar_termino`,
        data,
        this.admin.token
      )
    },
    rechazarInformeGlobal(data) {
      return axios.put(
        `${process.env.api}/servicio/rechazar_informe`,
        data,
        this.admin.token
      )
    },
  },
}
</script>

<style scoped></style>
