pcpuma_unam_operador/components/operador/ModalMultaIdPrestamo.vue

<template>
  <form>
    <div class="modal-card">
      <header class="modal-card-head">
        <h5 class="modal-card-title">Multas</h5>
      </header>

      <section class="modal-card-body">
        <div>
          <div>
            <div class="is-flex is-justify-content-space-between py-3">
              <p>¿Desea multar al usuario?</p>
            </div>

            <b-field>
              <b-radio
                type="is-danger"
                size="is-medium"
                :native-value="true"
                v-model="multaUsuario"
              >
                Si
              </b-radio>
            </b-field>

            <b-field>
              <b-radio
                type="is-info"
                size="is-medium"
                :native-value="false"
                v-model="multaUsuario"
              >
                No
              </b-radio>
            </b-field>
          </div>

          <div v-show="multaUsuario">
            <div class="is-flex is-justify-content-space-between py-3">
              <p>Infraccion cometida por el usuario</p>
            </div>

            <b-field>
              <b-select
                placeholder="Seleccionar"
                v-model="idInfraccion"
                expanded
              >
                <option disabled value="">Selecciona una opción</option>
                <option
                  v-for="(item, index) in infracciones"
                  :key="index"
                  :value="item.idInfraccion"
                >
                  {{ item.infraccion }}
                </option>
              </b-select>
            </b-field>
          </div>

          <div v-show="multaUsuario">
            <div class="is-flex is-justify-content-space-between py-3">
              <p>Motivos por los que desea multar al usuario</p>
            </div>

            <b-field>
              <b-input
                type="textarea"
                expanded
                maxlength="500"
                v-model="descripcion"
              />
            </b-field>
          </div>
        </div>
      </section>

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

        <b-button
          label="Enviar"
          type="is-success"
          @click="
            decisionOperador()
            $emit('close')
          "
          :disabled="multaUsuario && !(idInfraccion && descripcion)"
        />
      </footer>
    </div>
  </form>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    regresoInmediato: { type: Boolean, required: true },
    operador: { type: Object, required: true },
    idPrestamo: { type: String, required: true },
    regresar: { type: Function, required: true },
    imprimirError: { type: Function, required: true },
    imprimirMensaje: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
  },
  data() {
    return {
      multaUsuario: false,
      idInfraccion: '',
      descripcion: '',
      infracciones: [],
    }
  },
  methods: {
    decisionOperador() {
      if (this.multaUsuario) {
        if (this.regresoInmediato) this.multa()
        else this.multaPrestamo()
      } else this.regresar()
    },
    multa() {
      const data = {
        idOperadorMulta: this.operador.idOperador,
        idPrestamo: this.idPrestamo,
        idInfraccion: this.idInfraccion,
        descripcion: this.descripcion,
      }

      this.updateIsLoading(true)
      axios
        .post(`${process.env.api}/multa/multar`, data, this.operador.token)
        .then((res) => {
          this.updateIsLoading(false)
          this.imprimirMensaje(res.data.message, this.regresar)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.imprimirError(err.response.data)
        })
    },
    multaPrestamo() {
      const data = {
        idOperadorMulta: this.operador.idOperador,
        idPrestamo: this.idPrestamo,
        idInfraccion: this.idInfraccion,
        descripcion: this.descripcion,
      }

      this.updateIsLoading(true)
      axios
        .post(
          `${process.env.api}/multa/multar_id_prestamo`,
          data,
          this.operador.token
        )
        .then((res) => {
          this.updateIsLoading(false)
          this.imprimirMensaje(res.data.message, this.regresar)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.imprimirError(err.response.data)
        })
    },
    obtenerCatalogoInfracciones() {
      axios
        .get(`${process.env.api}/infraccion`, this.operador.token)
        .then((res) => {
          this.infracciones = res.data
        })
        .catch((err) => {
          this.imprimirError(err.response.data)
        })
    },
  },
  watch: {
    multaUsuario(value) {
      if (!value) {
        this.idInfraccion = ''
        this.descripcion = ''
      }
    },
  },
  created() {
    this.obtenerCatalogoInfracciones()
  },
}
</script>

<style></style>