<template>
  <header class="topbar fixed-top mb-4">
    <div id="header">
      <div id="header_container">
        <div id="header_inner">
          <router-link :to="{ name: 'home'}">
            <img id="imgHeader" :src="require('@/assets/header_logo_1.png')" alt="Soler y Palau" />
          </router-link>
        </div>
        <div class="menuMovil">
          <div class="row">
            <div class="mt-2 col-sm-2 col-2">
              <img
                id="imagenMovil"
                class="img-responsive"
                v-if="path === '/public'"
                :src="require('@/assets/header_logo_1.png')"
                alt="Soler y Palau"
              />
              <a
                class="nav-link sidebartoggler"
                @click="openMenu"
                style="cursor:pointer"
                v-show="path === '/admin'"
                data-toggle="tooltip"
                :title="[menuIsOpen ? 'Cerrar Menú': 'Abrir Menú']"
              >
                <i class="material-icons">{{ menuIsOpen ? 'close': 'reorder'}}</i>
              </a>
            </div>
            <div class="mt-2 col-sm-10 col-10">
              <div class="float-right mt-2">
                <b class="font-weight-bold">Bienvenido:</b>
                {{ user }}
                <a
                  href="#"
                  @click.prevent="logout"
                  class="link"
                  data-toggle="tooltip"
                  title="Salir"
                >
                  <i
                    class="material-icons"
                    style="font-size:18px;vertical-align:middle;color:#f62d51 "
                  >exit_to_app</i>
                </a>
                <br />
                <router-link
                  tag="div"
                  :to="{ name: 'homeAdmin'}"
                  v-if="isLoggedIn && path === '/public'"
                  class="text-muted lbl"
                  style="cursor:pointer"
                >Ir a Administrador</router-link>
                <router-link
                  :to="{ name: 'home'}"
                  tag="div"
                  class="text-muted lbl"
                  style="cursor:pointer"
                  v-else
                >Ir a Inicio</router-link>
              </div>
            </div>
          </div>
        </div>

        <div id="header_user_container">
          <div id="header_inner_user_container_table" v-if="isLoggedIn">
            <b class="font-weight-bold">Bienvenido:</b>
            {{ user }}
            <a
              href="#"
              @click.prevent="logout"
              class="link"
              data-toggle="tooltip"
              title="Salir"
            >
              <i
                class="material-icons"
                style="font-size:18px;vertical-align:middle;color:#f62d51 "
              >exit_to_app</i>
            </a>
            <br />
            <span class="l2">
              <span class="division">
                <a href="#" @click.prevent>Cambiar contraseña</a>
              </span>
              <span class="division">
                |
                <a href="#" @click.prevent>Preguntas frecuentes</a>
              </span>
              <span class="division">
                |
                <a href="#" @click.prevent>Reportar una falla</a>
              </span>
              <span class="division" v-if="revisarPermisos">
                |
                <router-link
                  :to="{ name: 'homeAdmin' }"
                  v-if="isLoggedIn && path === '/public' "
                >Administrador</router-link>
                <router-link :to="{name: 'home'}" v-else>Principal</router-link>
              </span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>
<script>
import $ from "jquery";
import { token } from "../../_mixin/user_mixin.js";
export default {
  name: "Navbar",
  mixins: [token],
  data() {
    return {
      verLabelAdmin: false,
      menuIsOpen: false,
      role: "",
      user: "",
      path: ""
    };
  },
  async mounted() {
    // Resize Sidebar
    var i = function() {
      (window.innerWidth > 0 ? window.innerWidth : this.screen.width) < 1170
        ? ($("body").addClass("mini-sidebar"),
          $(".navbar-brand span").hide(),
          $(".sidebartoggler i").addClass("ti-menu"))
        : ($("body").removeClass("mini-sidebar"),
          $(".navbar-brand span").show(),
          $(".sidebartoggler i").removeClass("ti-menu"));
    };
    $(window).ready(i);
    $(window).on("resize", i);

    /* await this.getPermisos(this.$store.getters.user.id).then(() => {
      this.revisarPermisos();
    }); */
  },
  methods: {
    logout: function() {
      this.$store.dispatch("logout").then(() => {
        window.open(this.URL_SOLER, "_parent");
      });
    },
    openMenu() {
      $("body").hasClass("mini-sidebar")
        ? ($("body").trigger("resize"),
          $("body").removeClass("mini-sidebar"),
          $(".navbar-brand span").show(),
          $(".sidebartoggler i").addClass("ti-menu"))
        : ($("body").trigger("resize"),
          $("body").addClass("mini-sidebar"),
          $(".navbar-brand span").hide(),
          $(".sidebartoggler i").removeClass("ti-menu"));

      $("body").toggleClass("show-sidebar"),
        $(".nav-toggler i").toggleClass("ti-menu"),
        $(".nav-toggler i").addClass("ti-close");
      $(".sidebartoggler i").toggleClass("ti-menu");
      this.menuIsOpen = !this.menuIsOpen;
    }
  },
  computed: {
    revisarPermisos() {
      if (this.role === "admin" && this.isLoggedIn) {
        return true;
      }
      if ((this.$store.getters.permisos.length !== 0) & this.isLoggedIn) {
      
      var permisos = JSON.parse(this.$store.getters.permisos);
        var estantes = permisos[0].children;
        var result = estantes.filter(estante => {
          let arrEstante = estante["text"].split(" | ");
          let strPermiso = arrEstante[1];
          return strPermiso === "Ver + Publicar";
        }).length;
        return result === 0 ? false : true;
      
      }
      return false;
    },
    isLoggedIn() {
      this.$route.matched.some(name => {
        return (this.path = name.path === "/admin" ? name.path : "/public");
      });
      this.role = this.$store.getters.user.role;
      this.user = this.$store.getters.user.name;

      return this.$store.getters.isLoggedIn;
    }
  }
};
</script>
<style>
.fix-sidebar.fix-header.mini-sidebar {
  padding-right: 0 !important;
}
.topbar.fixed-top.mb-4 {
  padding-right: 0 !important;
}
body.modal-open {
  padding-right: 0 !important;
}
html {
  overflow-y: scroll;
}
</style>
<style scoped>
.lbl {
  color: #798699;
  font-size: 14px;
}
a:hover {
  text-decoration: none !important;
}
</style>

