<template>
  <div>
    <div class="cargarImagenes">
      <!-- Botones para cargar la imagen -->
      <button
        type="button"
        class="btn btn-outline-danger"
        data-toggle="modal"
        data-target="#cargarImagen"
        @click="modalActivo=true"
      >Cargar imagen</button> &nbsp;
    </div>
    <!-- Start Upload Image Modal -->
    <div
      class="modal animated bounceInDown fast"
      id="cargarImagen"
      tabindex="-1"
      role="dialog"
      aria-labelledby="cargarImagenLabel"
      aria-hidden="true"
      v-if="modalActivo"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <div id="modal-titulo" style="width:100%;text-align: center;">
              <h5 class="modal-title" id="cargarImagenLabel">Cargar Imagen</h5>
            </div>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
              @click="modalActivo=false"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="form-row">
              <div class="form-group col-md-6">
                <label for="nombre">Nombre</label>
                <input
                  class="form-control"
                  v-validate="'required|regex:^(?:[A-Za-z0-9 _.]*)$'"
                  :class="{'input': true, 'is-danger': errors.has('nombre') }"
                  v-model="nombre"
                  name="nombre"
                  id="nombre"
                  placeholder="Nombre de la imagen"
                />
                <span
                  v-show="errors.has('nombre')"
                  class="invalid-feedback-form"
                >{{ errors.first('nombre') }}</span>
              </div>
              <div class="form-group col-md-6">
                <label for="alcance">Alcance</label>
                <select
                  class="custom-select"
                  id="alcance"
                  v-model="alcance"
                  name="alcance"
                  v-validate="'required'"
                  :class="{'input': true, 'is-danger': errors.has('alcance') }"
                >
                  <option value>Seleccione una opción</option>
                  <option value="**ES">Estantes</option>
                  <option value="ESSE">Estantes y Secciones</option>
                  <option value="ESCA">Estantes y Categorías</option>
                  <option value="**SE">Secciones</option>
                  <option value="SECA">Secciones y Categorías</option>
                  <option value="**CA">Categorías</option>
                  <option value="****">Estantes, Secciones y Categorías</option>
                  <option value="ARCH">Solo archivos</option>
                </select>
                <span
                  v-show="errors.has('alcance')"
                  class="invalid-feedback-form"
                >{{ errors.first('alcance') }}</span>
              </div>
            </div>
            <div class="form-check mb-2 mr-sm-2" v-show="alcance =='ARCH'">
              <input class="form-check-input" type="checkbox" id="filePrede" v-model="imgPred" />
              <label
                class="form-check-label"
                for="filePrede"
              >¿La imagen será predeterminada para otros archivos?</label>
            </div>
            <div v-show="alcance =='ARCH' && imgPred">
              <!-- Componentent MultiSelect -->
              <label>Archivos donde aparecerá la imagen</label>
              <multiselect
                v-model="extensionesArr"
                placeholder="Seleccione una extensión de la lista"
                deselect-label="Presione para borrar"
                select-label="Presione para seleccionar"
                label="EXTE"
                track-by="EXTE"
                :options="options"
                :multiple="true"
                :custom-label="nameWithLang"
              ></multiselect>
            </div>

            <div class="input-group mt-2">
              <label for="file" class="mb-3">Seleccione una imagen con dimensiones 783 x 1021 píxeles con formato JPG o PNG.</label>
              <input
                type="file"
                ref="fileupload"
                accept="image/*"
                class="form-control-file"
                @change="onImageChanged"
                v-validate="'required'"
                name="imagen"
                id="file"
              />
              <span
                v-show="errors.has('imagen')"
                class="invalid-feedback-form"
              >{{ errors.first('imagen') }}</span>
              <img
                :src="previewImage"
                class="img-thumbnail mt-2"
                v-if="fileImage"
                style="width:50%"
              />
            </div>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-light"
              data-dismiss="modal"
              aria-label="Close"
              @click="modalActivo=false"
            >Cerrar</button>
            <button
              class="btn btn-danger btn-sm"
              @click="onUpload();modalActivo = true"
              :disabled="isLoading"
            >
              <div class="save" v-if="!isLoading">
                <i class="material-icons icon-align">save</i>
                Registrar
              </div>
              <div v-if="isLoading">
                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" ></span>
                Loading...
              </div>
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- END Upload Image Modal -->
  </div>
</template>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
<style scoped>
input[type="checkbox"],
input[type="radio"] {
  box-shadow: 0 0 1px 0px #6c757d;
}
.modal-header {
  border-bottom: 2px solid #dee2e6 !important;
}
.multiselect__tag {
  background: #fb0b0bb5 !important;
}
</style>

<script>
import { token } from "../_mixin/user_mixin.js";
import Multiselect from "vue-multiselect";
export default {
  name: "UploadImage",
  mixins: [token],
  components: {
    Multiselect
  },
  data: () => ({
    strError: "",
    modalActivo: false,
    imageUpdated: false,
    alcance: "",
    nombre: "",
    fileImage: "",
    previewImage: "",
    imgPred: "",
    extensiones: "",
    extensionesArr: [],
    options: [],
    isLoading: false
  }),
  mounted: function() {
    this.getExtensiones();
  },
  methods: {
    onImageChanged: function(event) {
      // Preview imagen
      this.fileImage = event.target.files[0];
      this.previewImage = URL.createObjectURL(this.fileImage);
    },
    getExtensiones: function() {
      this.$http
        .get(
          this.url_api+"/extensiones",
          this.config_header
        )
        .then(response => {
          if (response.data.response) {
            this.options = response.data.result;
          }
        })
        .catch(error => {
          this.strError = "Se ha producido un error al cargar las imagenes.";
        });
    },
    onUpload: function() {
      this.$validator.validateAll().then(result => {
        if (result) {
          // upload file
          if (this.fileImage.length != 0) {
            // Obtener las extensiones
            if (this.alcance == "ARCH" && this.imgPred) {
              this.extensiones = "";
              // Solamente agregar el ; al final
              let cont = this.extensionesArr.length;
              let i = 1;
              this.extensionesArr.forEach(element => {
                this.extensiones += element.code;
                if (i < cont) {
                  this.extensiones += ";";
                }
                i++;
              });
            }
            this.isLoading = true; // Lanzamos cargador
            let datosImg = {
              nombre: this.nombre,
              alcance: this.alcance,
              extension: this.extensiones,
              imagen: this.fileImage
            };
            var formData = this.toFormData(datosImg);
            var heads = this.config_header;
            heads.headers["content-type"] = "multipart/form-data";
            this.$http
              .post(
                this.url_api+"/imagenes",
                formData,
                heads
              )
              .then(response => {
                this.imageUpdated = true;
                this.$emit("imagenUpdatedEvent", this.imageUpdated);
                this.$toasted.show(response.data.message, this.$toast_success);

                // Limpiamo despues del submit
                this.isLoading = false; // Lanzamos cargador
                this.nombre = "";
                this.alcance = "";
                this.fileImage = "";
                this.extensiones = "";

                // Limpiar input tipo file
                const input = this.$refs.fileupload;
                input.type = "text";
                input.type = "file";

                // Reset the validator after the next tick
                this.$nextTick().then(() => {
                  this.$validator.reset();
                  this.errors.clear();
                });
              })
              .catch(error => {
                this.isLoading = false; // Lanzamos cargador
                this.$toasted.show(response.data.message, this.$toast_error);
              });
          } // Termina if
        }
      });
    },
    nameWithLang({ DES, EXTE }) {
      return `${DES} (${EXTE})`;
    }
  }
};
</script>
