<template>
  <section>
    <h1 class="title is-1  titleAnadir">
      Añadir Servicio Social
    </h1>
    <div
      class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd pl-0"
    >
      <div class="column  pl-0">
        <form>
          <b-field class="column p-0 my-5 is-full">
            <input
              class="input column "
              v-model="noCuenta"
              message="Solo numeros"
              required="required"
              maxlength="9"
              type="number"
              placeholder="Cuenta"
              min="0"
            />

            <p class="control">
              <b-button class="button is-info" @click="buscarAlumno()"
                >Buscar</b-button
              >
            </p>
          </b-field>

          <b-field label="Nombre">
            <div class="input">{{ alumno.nombre }}</div>
          </b-field>

          <b-field label="Carrera">
            <div class="input">{{ alumno.carrera }}</div>
          </b-field>

          <b-field label="Créditos">
            <div class="input">
              {{ alumno.creditos }}<span v-if="alumno.creditos">%</span>
            </div>
          </b-field>

          <b-field label="Seleccione programa">
            <b-select
              placeholder="Seleccionar"
              expanded
              v-model="programaSelectedID"
            >
              <option value="">Seleccionar</option>
              <option
                v-for="programa in programas"
                v-bind:key="programa.idPrograma"
                :value="programa.idPrograma"
                >{{ programa.programa }}</option
              >
            </b-select>
          </b-field>

          <b-field label="Institución">
            <div class="input">{{ programaSelected.institucion }}</div>
          </b-field>

          <b-field label="Dependencia">
            <div class="input">{{ programaSelected.dependencia }}</div>
          </b-field>

          <b-field label="Clave del programa">
            <div class="input">{{ programaSelected.clavePrograma }}</div>
          </b-field>

          <div v-if="programaSelected.acatlan == true">
            <b-field label="Programa interno">
              <b-input
                v-model="programaSelected.programaInterno"
                placeholder="Programa interno"
              ></b-input>
            </b-field>

            <b-field label="Profesor/Responsable de Programa">
              <b-input
                v-model="programaSelected.profesor"
                placeholder="Profesor/Responsable de Programa"
              ></b-input>
            </b-field>
          </div>

          <b-field label="Fecha de inicio">
            <b-datepicker
              placeholder="Inicio"
              icon="calendar-today"
              v-model="alumno.inicio"
              :min-date="minDate"
            >
            </b-datepicker>
          </b-field>

          <b-field label="Fecha de fin" v-if="alumno.inicio">
            <b-datepicker
              placeholder="Fin"
              v-model="alumno.fin"
              :min-date="minDate2"
              icon="calendar-today"
            >
            </b-datepicker>
          </b-field>

          <b-field label="Correo">
            <b-input
              placeholder="Email"
              type="email"
              v-model="alumno.correo"
            ></b-input>
          </b-field>

          <h3 class="title is-4 mt-6">
            Carta de aceptación (en formato .PDF. No se aceptan fotos).
          </h3>

          <b-field>
            <b-upload
              v-model="file"
              drag-drop
              type="is-black"
              expanded
              accept="application/pdf"
            >
              <section class="section">
                <div class="content has-text-centered">
                  <p>
                    <b-icon icon="upload" size="is-large"></b-icon>
                  </p>
                  <p>
                    {{
                      file.name ||
                        "Arrastra aquí tu archivo o da click para buscar"
                    }}
                  </p>
                  <p>Tamaño máximo 20MB</p>
                </div>
              </section>
            </b-upload>
          </b-field>
        </form>

        <div class="my-6">
          <b-button
            tag="router-link"
            to="/responsable"
            type="is-info is-light "
            icon-left="arrow-left-box"
            class="border-info"
            style="float: left;"
            size="is-mediumm"
          >
            Regresar
          </b-button>
          <!-- <BotonRegresar  :path="'/responsable'" /> -->

          <b-field class="derecha">
            <button
              :disabled="disabled()"
              class="button enviar is-success is-mediumm"
              @click="Enviar()"
            >
              Enviar
            </button>
          </b-field>
        </div>
      </div>
    </div>
    <b-loading :is-full-page="true" v-model="isLoading" :can-cancel="false" />
  </section>
</template>
<script>
import "buefy/dist/buefy.css";
import validator from "validator";
import axios from "axios";
import moment from "moment";

export default {
  data() {
    return {
      token: {
        headers: {
          token: window.localStorage.getItem("token"),
        },
      },
      isLoading: false,
      noCuenta: "",
      sizeOk: "",
      searched: false,
      minDate: new Date(),
      programaSelectedID: "",
      file: [],
      programas: [],
      programaSelected: {
        idPrograma: null,
        institucion: "",
        dependencia: "",
        programa: "",
        clavePrograma: "",
        acatlan: "",
        activo: "",
        idUsuario: "",
        programaInterno: "",
        profesor: "",
      },
      alumno: {
        cuenta: "",
        nombre: "",
        carrera: "",
        creditos: "",
        idAlumno: "",
        idCarrera: "",
        inicio: [],
        fin: [],
        correo: "",
      },
    };
  },
  methods: {
    reset() {
      this.programaSelected.idPrograma = "";
      this.programaSelected.institucion = "";
      this.programaSelected.dependencia = "";
      this.programaSelected.programa = "";
      this.programaSelected.clavePrograma = "";
      this.programaSelected.acatlan = "";
      this.programaSelected.activo = "";
      this.programaSelected.idUsuario = "";
      this.programaSelected.programaInterno = "";
      this.programaSelected.profesor = "";

      this.alumno.cuenta = "";
      this.alumno.nombre = "";
      this.alumno.creditos = "";
      this.alumno.carrera = "";
      this.alumno.idAlumno = "";
      this.alumno.idCarrera = "";
      this.alumno.correo = "";
      this.alumno.inicio = [];
      this.alumno.fin = [];

      this.noCuenta = "";
      this.file = [];
      this.programaSelectedID = "";
    },
    disabled() {
      if (this.programaSelected.acatlan == false) {
        if (
          this.file != "" &&
          this.noCuenta != "" &&
          this.alumno.correo != "" &&
          this.alumno.inicio != "" &&
          this.alumno.fin != "" &&
          this.programaSelectedID != ""
        )
          return false;
        else return true;
      } else {
        if (
          this.file != "" &&
          this.noCuenta != "" &&
          this.alumno.correo != "" &&
          this.alumno.inicio != "" &&
          this.alumno.fin != "" &&
          this.programaSelectedID != "" &&
          this.programaSelected.programaInterno != "" &&
          this.programaSelected.profesor != ""
        )
          return false;
        else return true;
      }
    },
    esNumero(numero) {
      const ultimaLetra = numero.length - 1;

      if (numero && !validator.isNumeric(numero[ultimaLetra])) {
        return numero.substr(0, ultimaLetra);
      }
      return numero;
    },
    maxLength(str, max) {
      if (str.length > max) return str.substr(0, max);
      return str;
    },
    correoValidado() {
      if (validator.isEmail(this.alumno.correo)) {
        return "";
      }
    },
    error(msj) {
      let salir = false;
      switch (msj) {
        case "invalid signature":
          msj = "Tu token no es valido, inicia sesión de nuevo.";
          salir = true;
          break;
        case "jwt expired":
          msj = "Tu sesión ha expirado, inicia sesión de nuevo.";
          salir = true;
          break;
        case "jwt malformed":
          msj = "No se encontro tu token, inicia sesión de nuevo.";
          salir = true;
          break;
        case "No hay token":
          msj = "Ocurrio un error al enviar tu token, inicia sesión de nuevo.";
          salir = true;
          break;
      }

      this.$buefy.dialog.alert({
        title: "Error",
        message: msj,
        type: "is-danger",
        hasIcon: true,
        icon: "alert-circle",
        iconPack: "mdi",
        ariaRole: "alertdialog",
        ariaModal: true,
      });
      if (salir == true) {
        localStorage.clear();
        this.$router.push(`/`);
      }
    },
    buscarAlumno() {
      this.isLoading = true;
      axios
        .get(
          `${process.env.api}/usuario/escolares?numeroCuenta=${this.noCuenta}`,
          this.token
        )
        .then((resp) => {
          this.alumno.cuenta = this.noCuenta;
          this.alumno.nombre = resp.data.nombre;
          this.alumno.carrera = resp.data.carrera;
          this.alumno.creditos = parseInt(resp.data.creditos, 10);
          this.alumno.idCarrera = resp.data.idCarrera;
          this.alumno.idAlumno = resp.data.idUsuario;
          this.searched = true;
        })
        .catch((error) => {
          this.error(error.response.data.message);
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    Enviar() {
      this.isLoading = true;
      const data = {
        idUsuario: this.alumno.idAlumno,
        idPrograma: this.programaSelected.idPrograma,
        idCarrera: this.alumno.idCarrera,
        numeroCuenta: this.alumno.cuenta,
        creditos: this.alumno.creditos.toString(),
        correo: this.alumno.correo,
        programaInterno: this.programaSelected.programaInterno,
        profesor: this.programaSelected.profesor,
        fechaInicio: moment(this.alumno.inicio),
        fechaFin: moment(this.alumno.fin),
      };
      const formData = new FormData();

      formData.append("alumno", JSON.stringify(data));
      formData.append("cartaAceptacion", this.file);

      axios
        .post(`${process.env.api}/servicio/nuevo`, formData, {
          headers: {
            "Content-Type": "multipart/form-data",
            token: this.token.headers.token,
          },
        })
        .then((res) => {
          this.$buefy.dialog.alert({
            title: "Success",
            message: "Se enviaron los datos correctamente",
            type: "is-success",
            hasIcon: true,
            icon: "checkbox-marked-circle",
            iconPack: "mdi",
            ariaRole: "alertdialog",
            ariaModal: true,
          });
          this.reset();
        })
        .catch((error) => {
          this.error(error.response.data.message);
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
  },
  watch: {
    noCuenta() {
      if (this.searched === false) {
        this.noCuenta = Number(this.noCuenta) < 0 ? "" : this.noCuenta;
        this.noCuenta = this.esNumero(this.noCuenta);
        this.noCuenta = this.maxLength(this.noCuenta, 9);
      } else {
        this.noCuenta = "";
        this.searched = false;
        this.reset();
      }
    },
    programaSelectedID() {
      if (this.programaSelectedID) {
        for (let i = 0; i < this.programas.length; i++) {
          if (this.programas[i].idPrograma === this.programaSelectedID) {
            this.programaSelected.idPrograma = this.programas[i].idPrograma;
            this.programaSelected.programa = this.programas[i].programa;
            this.programaSelected.institucion = this.programas[i].institucion;
            this.programaSelected.dependencia = this.programas[i].dependencia;
            this.programaSelected.clavePrograma = this.programas[
              i
            ].clavePrograma;
            this.programaSelected.acatlan = this.programas[i].acatlan;
            this.programaSelected.activo = this.programas[i].activo;
          }
        }
      } else {
        this.programaSelected.institucion = "";
        this.programaSelected.dependencia = "";
        this.programaSelected.programa = "";
        this.programaSelected.clavePrograma = "";
        this.programaSelected.acatlan = "";
        this.programaSelected.activo = "";
        //this.programaSelected.idUsuario = "";
        this.programaSelected.programaInterno = "";
        this.programaSelected.profesor = "";
      }
    },
    file() {
      if (this.file.size >= 20000000) {
        this.$buefy.dialog.alert({
          title: "Error",
          message: "El tamaño del archivo exede los 20MB",
          type: "is-danger",
          hasIcon: true,
          icon: "alert-circle",
          iconPack: "mdi",
          ariaRole: "alertdialog",
          ariaModal: true,
        });
        this.file = [];
      }
    },
    "alumno.inicio"() {
      this.alumno.fin = [];
    },
  },
  mounted() {
    axios
      .get(
        `${
          process.env.api
        }/programa/programas_responsable?idUsuario=${localStorage.getItem(
          "idUsuario"
        )}`,
        this.token
      )
      .then((resp) => {
        this.programas = resp.data;
      })
      .catch((error) => {
        this.error(error.response.data.message);
      });

    this.minDate.setDate(this.minDate.getDate() - 16);
  },
  computed: {
    minDate2() {
      const min = new Date(this.alumno.inicio);
      return new Date(min.getFullYear(), min.getMonth() + 6, min.getDate());
    },
  },
};
</script>
<style scoped>
.titleAnadir,
pre {
  margin: 4rem 0 0rem 0;
}
.derecha {
  text-align: center;
}
.file-cta {
  background-color: #167df0 !important;
}
.disabled {
  cursor: help !important;
  pointer-events: all !important;
}
.columns {
  margin: 0;
}

@media (min-width: 600px) {
  .derecha {
    padding-right: 120px;
  }
}
</style>
