<template>
  <div class="mt-5">
    <div class="container-fluid whithoutPadding" id="divArchivos">
      <div class="row pt-4">
        <div class="col-sm-3">
          <div class="row mt-3 mb-3">
            <div class="col-sm-12" v-if="categoriaActive">
              <div
                class="card text-left shadow-sm w-50"
                style="border:1px solid #E30425;margin: 0 auto;"
              >
                <h6 class="text-danger mt-2 ml-1 p-1">{{ categoriaActive.nombre }}</h6>
                <img class="img-responsive p-3" :src="categoriaActive.img" />
              </div>
            </div>
          </div>

          <div class="row" style="background: #E30425 none repeat scroll 0% 0%">
            <div class="col-sm-12 p-4">
              <h6 class="pb-1 text-white">BUSCAR</h6>
              <div class="input-group">
                <div class="input-group-append">
                  <span class="input-group-text" id="inputGroup">
                    <i class="material-icons">search</i>
                  </span>
                </div>
                <input
                  type="text"
                  class="form-control"
                  v-model="buscar"
                  placeholder="buscar archivo"
                />
              </div>
              <hr />

              <h6 class="pb-1 text-white">ORDENAR POR</h6>
              <div class="datepicker-trigger">
                <div class="input-group">
                  <div class="input-group-append">
                    <span class="input-group-text" id="basic-addon2">
                      <i class="material-icons align-middle">date_range</i>
                    </span>
                  </div>
                  <input
                    type="text"
                    class="form-control"
                    id="datepicker-trigger"
                    placeholder="Selecciona un rango"
                    :value="formatoFechaCalendario(filtroFecha.fechaInicial,filtroFecha.fechaFinal)"
                  />
                </div>
                <p>
                  <a
                    href="#"
                    @click.prevent="filtroFecha.fechaInicial='';
                    filtroFecha.fechaFinal='';
                    filtroFecha.activar = false"
                    class="btn btn-sm btn-danger bg-dark text-white mt-3 float-right"
                    v-show="filtroFecha.fechaInicial !== ''&&filtroFecha.fechaFinal !== ''"
                  >Borrar filtro</a>
                </p>
              </div>
              <AirbnbStyleDatepicker
                :trigger-element-id="'datepicker-trigger'"
                :mode="'range'"
                :fullscreen-mobile="false"
                :date-one="filtroFecha.fechaInicial"
                :date-two="filtroFecha.fechaFinal"
                :end-date="filtroFecha.fechaLimiteCalendario"
                @date-one-selected="val => { filtroFecha.fechaInicial = val }"
                @date-two-selected="val => { filtroFecha.fechaFinal = val }"
                @apply="filtroFecha.activar = true"
              />
            </div>
          </div>
        </div>
        <div class="col-sm-9">
          <div class="container-fluid background-todosEstantes">
            <div class="col-sm-12">
              <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                  <li class="breadcrumb-item">
                    <router-link
                      class="text-danger"
                      :to="{name: 'home'}"
                    >Estantes: {{ $route.params.est }}</router-link>
                  </li>
                  <li class="breadcrumb-item">
                    <router-link
                      class="text-danger"
                      :to="{name: 'estantes', params:  { sec: $route.params.est }}"
                    >Secciones: {{ $route.params.sec }}</router-link>
                  </li>
                  <li class="breadcrumb-item">
                    <router-link
                      class="text-danger"
                      :to="{name: 'seccion', params:  { sec: $route.params.sec }}"
                    >Categoría: {{ $route.params.cat }}</router-link>
                  </li>
                  <li class="breadcrumb-item active" aria-current="page">Archivos</li>
                </ol>
              </nav>
            </div>
            <div class="col-sm-12 pb-1">
              <h4 class="text-center mt-5">
                <span
                  class="badge badge-danger v-middle m-1"
                  v-if="archivosFilter.length !== 0"
                >{{ archivosFilter.length }}</span>
                ARCHIVOS EN
                <span class="text-danger">{{ categoriaActive.nombre }}</span>
                <br />
              </h4>
              <hr
                style="border: 3px solid #E30425;
                width: 40px;
                border-radius: 30px 30px 30px 30px;"
              />
            </div>
            <!-- start documentos -->
            <div class="row m-3">
              <div class="col-sm-12">
                <transition-group name="flip-list" tag="div">
                  <div
                    v-for="archivo in buscarArchivos"
                    :key="archivo.IDAR"
                    class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 list-item"
                  >
                    <div
                      class="card p-1"
                      @click.prevent="downloadFile(archivo.IDAR,archivo.ARCH)"
                      style="cursor:pointer"
                    >
                      <img v-lazy="archivo.IDIM" class="card-img-top" />
                      <div class="card-body">
                        <h6 class="text-center">{{ archivo.ARCH }}</h6>
                        <label class="text-center label text-muted">Publicado el {{ archivo.FECR }}</label>
                      </div>
                    </div>
                  </div>
                </transition-group>
                <p v-if="mensajeArchivosVacios" class="text-center">
                  <!-- No se encontraron archivos. -->
                  <img
                    class="img-responsive"
                    :src="require('@/assets/images/no-files.png')"
                    alt="Sin Archivos"
                    style="max-width:600px"
                  />
                </p>
                <p
                  v-if="buscarArchivos.length === 0 && !loading"
                >No se encontraron archivos en su busqueda.</p>
              </div>
            </div>
            <!-- end documentos -->
          </div>
        </div>
      </div>
      <!-- start toast de descarga -->
      <div
        role="status"
        aria-live="polite"
        aria-atomic="true"
        class="toast"
        data-autohide="false"
        data-animation="true"
        id="toastNew"
      >
        <div class="toast-header">
          <i class="material-icons v-middle">save_alt</i>
          <strong v-if="downloadingFile">Descargando archivo...</strong>
          <strong class="mr-auto" v-else-if="downloadedItem.length == 1">
            Se ha descargado
            <span class="badge badge-danger badge-pill">1</span> elemento
          </strong>
          <strong class="mr-auto" v-else>
            Se han descargado
            <span class="badge badge-danger badge-pill">{{ downloadedItem.length }}</span> elementos
          </strong>
          <button
            class="ml-3 mb-1 close"
            type="button"
            data-toggle="collapse"
            data-target="#downloadFiles"
            aria-expanded="false"
            aria-controls="downloadFiles"
          >
            <i
              class="material-icons v-middle"
              @click="toastCollapse=true"
              v-if="!toastCollapse"
            >keyboard_arrow_down</i>
            <i
              class="material-icons v-middle"
              @click="toastCollapse=false"
              v-if="toastCollapse"
            >keyboard_arrow_up</i>
          </button>
          <button
            type="button"
            class="ml-2 mb-1 close"
            data-dismiss="toast"
            aria-label="Close"
            @click="downloadedItem= []"
          >
            <i class="material-icons v-middle">close</i>
          </button>
        </div>
        <div class="collapse" id="downloadFiles">
          <div class="toast-body">
            <div class="row p-1" v-for="item in downloadedItem" :key="item.index">
              <div class="col-sm-12">
                <img
                  class="img_toast"
                  src="https://statics.solerpalau.com/skin/frontend/solerpalau/default/images/svg/icon_pdf_1.svg"
                />
                {{ item.nombre }}
                <i
                  class="material-icons spin"
                  style="color:  rgb(92, 184, 92);vertical-align:middle;float:right"
                  v-if="item.loading"
                >sync</i>
                <i
                  class="material-icons"
                  style="color:  rgb(92, 184, 92);vertical-align:middle;float:right"
                  v-else
                >check_circle_outline</i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- end toast downloads -->
    </div>
  </div>
</template>
<script>
import moment from "moment";

import { token } from "../../_mixin/user_mixin.js";
import { downloadMixin } from "../../_mixin/public_mixin.js";

export default {
  name: "CategoriasArchivos",
  mixins: [downloadMixin, token],
  data() {
    return {
      mensajeArchivosVacios: false,
      categoriaActive: {
        buscar: "",
        IDCA: "",
        IDSE: "",
        img: "",
        nombre: ""
      }
    };
  },
  async mounted() {
    await this.getSecciones();
    await this.getCategorias();
    await this.getArchivosPublicos();
  },
  computed: {
    buscarArchivos() {
      if (this.buscar.length !== 0 || this.filtroFecha.activar) {
        // la funcion filtrarFecha viene de public_mixin.js
        let archivosFiltro = this.filtrarFecha("arch");
        return archivosFiltro.filter(arch => {
          return arch.ARCH.toLowerCase().match(this.buscar.toLowerCase());
        });
      }
      // Esperar para establecer el mensaje
      setTimeout( time =>{
        this.mensajeArchivosVacios = this.archivosFilter.length === 0 ? true: false;
      },1000)
      return this.archivosFilter;
    },
    archivosFilter() {
      if (this.archivosPublicos.length) {
        var arrFilter = this.categorias.filter(
          cate => this.slug(cate.CATE) === this.$route.params.cat
        );

        if (arrFilter.length) {
          this.categoriaActive.IDCA = arrFilter[0].IDCA;
          this.categoriaActive.IDSE = arrFilter[0].IDSE;
          this.categoriaActive.img = arrFilter[0].IDIM;
          this.categoriaActive.nombre = arrFilter[0].CATE;
        }
        return this.archivosPublicos.filter(arch => {
          return (
            this.slug(arch.ESTA) == this.$route.params.est &&
            arch.IDSE == this.categoriaActive.IDSE &&
            arch.IDCA == this.categoriaActive.IDCA
          );
        });
      }
     return []; 
    }
  }
};
</script>

<style scoped>
#divArchivos {
  background: #fff;
}

.container-fluid.whithoutPadding {
  padding: 0px 0px !important;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.spin {
  animation-name: spin;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.img_toast {
  width: 28px;
  margin-right: 8px;
  margin-top: -6px;
  float: left;
}
.toast_load {
  background: rgb(248, 103, 103) !important;
}
.toast_success {
  background: rgb(92, 184, 92) !important;
}
#toastNew {
  margin: auto;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  z-index: 1;
  right: 10px;
  bottom: 30px;
  font-size: 15px;
  padding: 10px;
}
.toast {
  max-width: 380px !important;
}
.card {
  transition: ease-in 0.3s;
}
.card:hover {
  box-shadow: 0 0.6rem 0.95rem rgba(0, 0, 0, 0.18) !important;
}
/* transition flip */
.flip-list-move {
  transition: transform 0.8s;
}
.list-item {
  display: inline-block;
  margin-bottom: 10px;
}
</style>

