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

      <section class="modal-card-body">
        <div>
          <div>
            <div class="is-flex is-justify-content-space-between py-3">
              <p>¿Desea reportar una incidencia 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="(i, index) in infracciones"
                  :key="index"
                  :value="i.id_institucion_infraccion"
                >
                  {{ i.infraccion.infraccion }}
                </option>
              </b-select>
            </b-field>
          </div>

          <div v-show="multaUsuario">
            <div class="is-flex is-justify-content-space-between py-3">
              <p>Descripción de la incidencia</p>
            </div>

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

        <SelectStatus
          :idStatusPadre="idStatus"
          @status-seleccionado="(nuevoStatus) => (idStatus = nuevoStatus)"
        />

        <b-field
          label="Motivo"
          :label-position="labelPosition"
          v-if="idStatus != 1"
        >
          <b-input maxlength="250" type="textarea" v-model="motivo" />
        </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="
            regresar(descripcion, idInfraccion, idStatus, motivo)
            $emit('close')
          "
          :disabled="
            (multaUsuario && !(idInfraccion && descripcion)) ||
            (idStatus != 1 && !motivo)
          "
        >
          Enviar
        </b-button>
      </footer>
    </div>
  </form>
</template>

<script>
import axios from 'axios'
import SelectStatus from '@/components/selects/SelectStatus'

export default {
  components: { SelectStatus },
  props: {
    operador: { type: Object, required: true },
    regresar: { type: Function, required: true },
  },
  data() {
    return {
      multaUsuario: false,
      idStatus: 1,
      idInfraccion: '',
      motivo: '',
      descripcion: '',
      infracciones: [],
    }
  },
  methods: {
    obtenerCatalogoInfracciones() {
      return axios
        .get(
          `${process.env.api}/institucion-infraccion/infracciones?id_institucion=${this.operador.institucion.id_institucion}`,
          this.$getToken.token()
        )
        .then((res) => {
          this.infracciones = res.data
        })
        .catch((err) => {
          this.$alertsGenericos.imprimirError(
            this.$buefy,
            this.$router,
            err.response.data
          )
        })
    },
  },
  watch: {
    multaUsuario(value) {
      if (!value) {
        this.idInfraccion = ''
        this.descripcion = ''
      }
    },
  },
  created() {
    this.obtenerCatalogoInfracciones()
  },
}
</script>

<style></style>
