inscripciones_front/components/registro/CapturaDatos.vue

<template>
  <div>
    <div v-if="permitirInscripcion">
      <p class="subtitle is-4"><b>Seleccione el área.</b></p>

      <div class="block">
        <b-radio v-model="idArea" v-if="!areasInscritas[0]" native-value="1"
          ><b-icon icon="microsoft-windows" size="is-small"></b-icon>
          Windows</b-radio
        >
        <b-radio
          v-model="idArea"
          v-if="areaMac && !areasInscritas[1]"
          native-value="2"
          ><b-icon icon="apple" size="is-small"></b-icon> Macintosh</b-radio
        >
        <b-radio v-model="idArea" v-if="!areasInscritas[2]" native-value="3"
          ><b-icon icon="linux" size="is-small"></b-icon> Linux</b-radio
        >
      </div>

      <p class="subtitle is-4">
        <b
          >Captura la siguiente información la cual se muestra en tu ticket de
          CEDETEC entregado en cajas.</b
        >
      </p>

      <p class="subtitle is-5">
        Recuerda que la aportación es voluntaria y el área destinada debe ser
        CEDETEC
      </p>

      <div class="columns">
        <div class="column pr-5">
          <b-field label="Folio">
            <b-input type="number" v-model="folio"></b-input>
          </b-field>
          <b-field label="Monto">
            <b-input v-model="monto" type="number" maxlength="5"></b-input>
          </b-field>
          <b-field label="Fecha">
            <b-datepicker
              v-model="fechaTicket"
              placeholder="Click to select..."
              icon="calendar-today"
              :min-date="minDate"
              :max-date="maxDate"
            >
            </b-datepicker>
          </b-field>

          <b-field>
            <b-upload v-model="dropFiles" multiple drag-drop expanded>
              <section class="section">
                <div class="content has-text-centered">
                  <p>
                    <b-icon icon="upload" size="is-large"> </b-icon>
                  </p>
                  <p>Adjunta foto de tu ticket</p>
                </div>
              </section>
            </b-upload>
          </b-field>

          <div class="tags">
            <span
              v-for="(file, index) in dropFiles"
              :key="index"
              class="tag is-primary"
            >
              {{ file.name }}
              <button
                class="delete is-small"
                type="button"
                @click="deleteDropFile(index)"
              ></button>
            </span>
          </div>
        </div>

        <b-image
          class="column pl-5"
          :src="require('@/assets/ticket.jpeg')"
          alt="Ticket Acatlán"
          ratio="16by9"
        ></b-image>
      </div>

      <b-field>
        <b-checkbox v-model="terminos">
          Acepto que todos los datos ingresados en esta aplicación son
          verdaderos, de no ser así mi inscripción será cancelada.
        </b-checkbox>
      </b-field>

      <div class="has-text-centered pb-5">
        <b-button
          :disabled="!terminos"
          @click="
            imprimirWarning(
              '¿Estas seguro de querer inscribirte a esta área?',
              inscribir
            )
          "
          type="is-success"
          >Inscribir</b-button
        >
      </div>
    </div>

    <!-- <div class="has-text-centered" v-if="!permitirInscripcion">
      <p class="subtitle is-2">Te has inscrito a todas las areas</p>
    </div> -->
  </div>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    pedirInscripciones: { type: Function, required: true },
    inscripcionesUsuario: { type: Array, required: true },
    datosUsuario: { type: Object, required: true },
    imprimirMensaje: { type: Function, required: true },
    imprimirWarning: { type: Function, required: true },
    imprimirError: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
  },

  data() {
    const today = new Date()
    return {
      terminos: false,
      // datosUsuario: {},
      // inscripcionesUsuario: null,

      error: '',

      idArea: '',
      folio: '',
      monto: '',
      permitirInscripcion: true,
      areaMac: false,
      areasInscritas: [false, false, false],

      fechaTicket: new Date(),
      dia: 10,
      minDate: this.diaMin(today),
      maxDate: this.diaMax(today),

      dropFiles: [],
    }
  },
  methods: {
    inscribir() {
      let formData = new FormData()
      if (this.monto && this.monto < 20 && this.inscripcionesUsuario.length > 0)
        this.error = true
      if (!this.error) {
        formData.append('idUsuario', this.datosUsuario.idUsuario)
        formData.append('folio', this.folio)
        formData.append('monto', this.monto)
        formData.append('idArea', this.idArea)
        formData.append('fechaTicket', this.fechaTicket)
        formData.append('imagen', this.dropFiles[0])

        let config = {
          header: {
            'Content-Type': 'multipart/form-data',
          },
        }

        this.updateIsLoading(true)
        axios
          .post(
            `${process.env.api}/usuario/inscripcionUsuario`,
            formData,
            config
          )
          .then((res) => {
            this.updateIsLoading(false)
            this.pedirInscripciones(false)
            this.imprimirMensaje(res.data.message)
            this.areaPermitida()
            this.clear()
          })
          .catch((err) => {
            console.log(err)
            this.updateIsLoading(false)
            this.imprimirError(err.response.data)
          })
      } else {
        this.imprimirError({
          message: 'El monto mínimo para esta inscripción es de $20 pesos.',
        })
      }
    },
    areaPermitida() {
      console.log(this.inscripcionesUsuario)

      if (
        this.datosUsuario.idCarrera === 11122 ||
        this.datosUsuario.idCarrera === 20226
      )
        this.areaMac = true

      for (let i = 0; i < this.inscripcionesUsuario.length; i++) {
        console.log('entre')
        if (this.inscripcionesUsuario[i].idArea === 1)
          this.areasInscritas[0] = true
        else if (this.inscripcionesUsuario[i].idArea === 2)
          this.areasInscritas[1] = true
        else if (this.inscripcionesUsuario[i].idArea === 3)
          this.areasInscritas[2] = true
      }

      // if (
      //   this.datosUsuario.tipoCarrera === 1 &&
      //   this.areasInscritas[0] === true &&
      //   this.areasInscritas[1] === true &&
      //   this.areasInscritas[2] === true
      // ) {
      //   this.permitirInscripcion = false
      // } else if (
      //   this.datosUsuario.tipoCarrera === 2 &&
      //   this.areasInscritas[0] === true &&
      //   this.areasInscritas[2] === true
      // ) {
      //   this.permitirInscripcion = false
      // }
    },
    diaMin(today) {
      return new Date(
        today.getFullYear(),
        today.getMonth(),
        today.getDate() - today.getDate() + 1
      )
    },
    diaMax(today) {
      const mesesCortos = {
        0: 31,
        1: 28,
        2: 31,
        3: 30,
        4: 31,
        5: 30,
        6: 31,
        7: 31,
        8: 30,
        9: 31,
        10: 30,
        11: 31,
      }

      return new Date(
        today.getFullYear(),
        today.getMonth(),
        today.getDate() + mesesCortos[today.getMonth()] - today.getDate()
      )
    },
    clear() {
      this.idArea = ''
      this.folio = ''
      this.monto = ''
      this.terminos = false
      this.dropFiles = []
    },
    deleteDropFile(index) {
      this.dropFiles.splice(index, 1)
    },
  },
  created() {
    this.areaPermitida()
  },
}
</script>

<style></style>