<template>
  <div class="home">
    <div class="alert alert-danger alert-rounded mt-5" v-if="strError.length != 0">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
      <i class="material-icons icon-align">report_problem</i>
      {{ strError }}
    </div>
    <div class="row">
      <div class="col-sm-12">
        <h5 class="pb-2">Estadísticas generales</h5>
      </div>
      <!-- Column -->
      <div class="col-12 col-sm-4 col-md-4 col-lg-4">
        <div class="card card-inverse card-info">
          <div class="box bg-info text-center">
            <h1 class="font-light text-white">{{ contador.est }}</h1>
            <h6 class="text-white">Estantes</h6>
          </div>
        </div>
      </div>
      <!-- Column -->
      <div class="col-12 col-sm-4 col-md-4 col-lg-4">
        <div class="card card-inverse bg-danger">
          <div class="box text-center">
            <h1 class="font-light text-white">{{ contador.secc }}</h1>
            <h6 class="text-white">Secciones</h6>
          </div>
        </div>
      </div>
      <!-- Column -->
      <div class="col-12 col-sm-4 col-md-4 col-lg-4">
        <div class="card card-inverse bg-warning">
          <div class="box text-center">
            <h1 class="font-light text-white">{{ contador.cate }}</h1>
            <h6 class="text-white">Categorías</h6>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12">
        <h5 class="pb-2">Estadísticas de archivos</h5>
      </div>
      <div class="col-12 col-sm-6 col-md-4 col-lg-4">
        <div class="card card-body shadow">
          <!-- Row -->
          <div class="row pt-2 pb-2">
            <!-- Column -->
            <div class="col pr-0">
              <h1 class="font-light">{{ contador.arch }}</h1>
              <h6 class="text-muted">Total</h6>
            </div>
            <!-- Column -->
            <div class="col text-right align-self-center">
              <div data-label="30%" class="css-bar mb-0 css-bar-info css-bar-60">
                <i class="material-icons">library_books</i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-md-4 col-lg-4">
        <div class="card card-body shadow">
          <!-- Row -->
          <div class="row pt-2 pb-2">
            <!-- Column -->
            <div class="col pr-0">
              <h1 class="font-light">{{ semana }}</h1>
              <h6 class="text-muted">Última Semana</h6>
            </div>
            <!-- Column -->
            <div class="col text-right align-self-center">
              <div class="css-bar mb-0 css-bar-info css-bar-45">
                <!-- <i class="mdi mdi-receipt"></i> -->
                <i class="material-icons">library_books</i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-md-4 col-lg-4">
        <div class="card card-body shadow">
          <!-- Row -->
          <div class="row pt-2 pb-2">
            <!-- Column -->
            <div class="col pr-0">
              <h1 class="font-light"> {{ dia }} </h1>
              <h6 class="text-muted">Últimas 24hrs</h6>
            </div>
            <!-- Column -->
            <div class="col text-right align-self-center">
              <div class="css-bar mb-0 css-bar-info css-bar-20">
                <!-- <i class="mdi mdi-receipt"></i> -->
                <i class="material-icons">library_books</i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="row">
      <div class="col-lg-12">
        <h5>Sesiones de usuarios</h5>
      </div>
      <div class="col-lg-3 col-md-3">
        <div class="card">
          <div class="card-body">
            <div class="d-flex flex-row">
              <div class="round align-self-center round-success">
                <i class="material-icons">person</i>
              </div>
              <div class="ml-2 align-self-center">
                <h4 class="mb-0">65</h4>
                <h6 class="text-muted mb-0">Últimos 6 meses</h6>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-3">
        <div class="card">
          <div class="card-body">
            <div class="d-flex flex-row">
              <div class="round align-self-center round-info">
                <i class="material-icons">person</i>
              </div>
              <div class="ml-2 align-self-center">
                <h4 class="mb-0">34</h4>
                <h6 class="text-muted mb-0">Último mes</h6>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-3">
        <div class="card">
          <div class="card-body">
            <div class="d-flex flex-row">
              <div class="round align-self-center round-danger">
                <i class="material-icons">person</i>
              </div>
              <div class="ml-2 align-self-center">
                <h4 class="mb-0">20</h4>
                <h6 class="text-muted mb-0">Última Semana</h6>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-3">
        <div class="card">
          <div class="card-body">
            <div class="d-flex flex-row">
              <div class="round align-self-center round-success">
                <i class="material-icons">person</i>
              </div>
              <div class="ml-2 align-self-center">
                <h4 class="mb-0">10</h4>
                <h6 class="text-muted mb-0">Últimas 24hrs</h6>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>-->
  </div>
</template>

<script>
import { token } from "../../_mixin/user_mixin.js";
import moment from "moment";
export default {
  name: "homeAdmin",
  mixins: [token],
  data() {
    return {
      contador: {
        est: 0,
        secc: 0,
        cate: 0,
        arch: 0
      },
      semana: 0,
      dia: 0
    };
  },
  created() {
    this.contAll();
  },
  methods: {
    async contAll() {
      await this.getEstantes();
      await this.getSecciones();
      await this.getCategorias();
      await this.getArchivos(
        this.$store.getters.user.id,
        this.$store.getters.user.role
      );

      this.contador.est = this.estantes.length;
      this.contador.secc = this.secciones.length;
      this.contador.cate = this.categorias.length;
      this.contador.arch = this.archivos.length;
      this.filtros();
    },
    filtros() {
      // Fecha actual
      var now = moment().format("YYYY-MM-DD");
      // Filtrar ultimos 7 días
      var semana = moment()
        .subtract(7, "days")
        .format("YYYY-MM-DD");

      var dia = moment()
        .subtract(1, "days")
        .format("YYYY-MM-DD");
      let contSemana = [];
      let contDia = [];
      this.archivos.filter(arch => {
        let frm = moment(arch.FECR, "DD-MMM-YY").format("YYYY-MM-DD");
        // semana
        if (moment(frm).isBetween(semana, now) || moment(frm).isSame(now)) {
          contSemana.push(this.archivos);
        }
        //24hrs
        if (moment(frm).isBetween(dia, now) || moment(frm).isSame(now)) {
          contDia.push(this.archivos);
        }
      });
      this.semana = contSemana.length;
      this.dia = contDia.length;
    }
  }
};
</script>
