<template>
  <div class="nav-bar-style" fixed="top">
    <b-container >
      <div v-if=" isManagerSalesConsultant || isAdm" class="navigation-drawer-icon" v-b-toggle.sidebar-border>
          <font-awesome-icon icon="bars" class="align-self-center" />
      </div>
      <b-row  class="d-flex justify-content-between">
        <b-col cols="3" class="d-flex justify-content-start">
          <a href="/">
            <custom-logo class="d-flex align-self-center" />
            </a> 
        </b-col>
        <b-col cols="5" class="d-flex justify-content-start">
          <campaign />
        </b-col>
        <b-col cols="4" class="d-flex justify-content-end">
          <user-info/>
        </b-col>
      </b-row>
      <hr class="transition-line"/>



      <b-row v-if="isSalesConsultant">
        <b-col  v-for="button in buttons" :key="button.title">
          <nav-button v-bind="button"/>
        </b-col>


      </b-row>

      <component v-else :is="componentNavBar"></component>
      
    </b-container>

<!-- ##############################3 -->

<div>
  
    <b-sidebar id="sidebar-border" title="<i v-html='teste'/>" text-variant="light" bg-variant="primary" shadow>
      <template v-slot:title>
        <a href="/">
          <custom-logo class="d-flex align-self-center" />
        </a>
        
      </template>
      <div class="px-3 py-2">
<vertical-menu />
       <div>
  
    <div>



</div>

</div>
      </div>
    </b-sidebar>
  </div>
<!-- ########################### -->

    <nav v-if="false" role="navigation" class="mobile-menu" v-bind:class="{'mobile-menu-active': showNavigationDrawer}" >
      <b-row  class="d-flex justify-content-between">
        <b-col cols="3" class="d-flex justify-content-start">
          <custom-logo class="d-flex align-self-center" />
        </b-col>
      </b-row>
    <ul class="navigation-menu-wrap">
      <li><router-link :to="{name: 'Documentos'}"><font-awesome-icon icon="plus-circle" class="align-self-center mr-2" />Cadastro</router-link></li>
      <li><router-link :to="{name: 'Lista Pre-Cadastro'}"><font-awesome-icon icon="list" class="align-self-center mr-2" />Pré-Cadastro</router-link></li>
      <li><router-link :to="{name: 'Solicitações de cadastro'}"><font-awesome-icon icon="users" class="align-self-center mr-2" />Solicitações de cadastro</router-link></li>
      <li><router-link :to="{name: 'Consultas SPC'}"><font-awesome-icon icon="list" class="align-self-center mr-2" />Consultas SPC</router-link></li>
    </ul>
  </nav>

  <div v-if="false" class="mobile-menu-overlay" v-show="showNavigationDrawer" @click="showNavigationDrawer = false"></div>
  
  </div>
</template>

<script>
import NavButton from '@/components/navbar/NavButton.vue';
import CustomLogo from '@/components/shared-components/Logo.vue';
import UserInfo from '@/components/navbar/UserInfo.vue';
import Campaign from '@/components/navbar/Campaign.vue';
import verticalMenu from './VerticalMenu';
import ManagerNavButtons from './NavButtons/ManagerSalesConsultant'
import AnlystNavButtons from './NavButtons/Analyst'
import AdmNavButtons from './NavButtons/Adm'
import SACNavButtons from './NavButtons/SAC'
import ManagerComercialNavButtons from './NavButtons/ManagerComercial'
import { mapGetters } from 'vuex'
export default {
  components: {
    NavButton,
    CustomLogo,
    UserInfo,
    Campaign,
verticalMenu,
ManagerNavButtons,
AnlystNavButtons,
AdmNavButtons,
ManagerComercialNavButtons,
SACNavButtons
},
  name: 'nav-bar',
  data: () => ({
    buttons: [
      
      {
        title: 'Produtos',
        routerName: 'Todos os Produtos',
        icon: 'box',
      },
      {
        title: 'Digitar Pedido',
        routerName: 'Digitar Pedido',
        icon: 'shopping-basket',
      },
      {
        title: 'Meus Pedidos',
        routerName: 'Meus Pedidos',
        icon: 'history',
      },
      {
        title: 'Financeiro',
        routerName: 'Financeiro',
        icon: 'money-check-alt',
      },
      {
        title: 'Super Class',
        routerName: 'Home',
        icon: '',
        external: "http://www.odorata.com.br/super-class"

      },
    ],
    showNavigationDrawer: false
  }),

  computed:{
     ...mapGetters([
     'isManagerSalesConsultant','isAnalyst','isAdm', 'isSalesConsultant','isManagerComercial','isSAC'
    ]),
    componentNavBar(){
      
      if(this.isManagerSalesConsultant){
        return 'ManagerNavButtons';
      }else if(this.isAnalyst){
        return 'AnlystNavButtons';
      }else if(this.isAdm){
        return 'AdmNavButtons'
      }else if(this.isManagerComercial){
        return 'ManagerComercialNavButtons';
      }else if(this.isSAC){
        return 'SACNavButtons';
      }

    }
  }
};
</script>

<style  lang="scss">
@import '../../assets/css/main.scss';
@import '~bootstrap/scss/bootstrap.scss';

.navbar-color {
    background-color: #FF9B64;
}

.nav-bar-style {
  height: 200px;
  background: #FF9B64;
}



.navigation-drawer-icon {
  position: absolute;
  left: 20px;
  top: 20px;
  padding: 5px;
  color: #eee;
  font-size: 1.5em;
  cursor: pointer;

}

.mobile-menu-active {
  visibility: visible !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}


.mobile-menu-overlay {
  background-color: rgba(0, 0, 0, .6);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}

.mobile-menu {
  position: fixed;
  left: 0;
  z-index: 101;
  top:0;
  visibility: hidden;
  width: 300px;
  height: 100%;
  background: $theme-color-blue;
  color: white;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  
  .navigation-menu-wrap{
    padding: 0;
    margin: 0;
    list-style: none;

    li{
      display: block;

      a{
        display: block;
        width: 100%;
        padding: 10px;
        color: #fff;
        text-align: left;
        cursor: pointer;

        &:hover{
          background: #ED8626;
          text-decoration: none;
        }
      }
    }
  }

}

.b-sidebar-body{
      &::-webkit-scrollbar-track {
      background: #ffffff 0% 0% no-repeat padding-box;
      border: 0.5px solid #707070;
      border-radius: 2px;
    }

    &::-webkit-scrollbar {
      width: 4px;
      background: #ffffff 0% 0% no-repeat padding-box;
      border: 0.5px solid #707070;
      border-radius: 2px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #707070;
      border: 0.5px solid #707070;
      border-radius: 2px;
    }


}

.b-sidebar-header{

div{
  margin: 0px !important;
}

}
</style>
