<template>
 
    <b-navbar  >
      <b-navbar-nav class="col-md-12 header-menu-manager-sales-consultant">
        <b-nav-item-dropdown class="col d-flex flex-fill" right>
          <template v-slot:button-content>
            <!--font-awesome-icon icon="home" /-->Planejamento
          </template>

          <b-dropdown-item @click.prevent="$router.push({name: 'Em Desenvolvimento'})" class="text-left" href="#">Agenda</b-dropdown-item>
          <b-dropdown-item @click.prevent="$router.push({name: 'Em Desenvolvimento'})" class="text-left" href="#">PDV</b-dropdown-item>
          <b-dropdown-item @click.prevent="$router.push({name: 'Em Desenvolvimento'})"  class="text-left" href="#">Minhas metas</b-dropdown-item>
        </b-nav-item-dropdown>

        <b-nav-item-dropdown class="col d-flex flex-fill" right>
          <template v-slot:button-content>
           Cadastro
          </template>

          <b-dropdown-item @click.prevent="$router.push({name:'Documentos'})" href="#">Incluir</b-dropdown-item>
          <b-dropdown-item @click.prevent="$router.push({name:'Em Desenvolvimento'})" href="#">Consultoras</b-dropdown-item>
          <b-dropdown-item @click.prevent="$router.push({name:'Consultas SPC'})" href="#">Consultar SPC</b-dropdown-item>
          <b-dropdown-item @click.prevent="$router.push({name:'Em Desenvolvimento'})"  href="#">Crédito SPC</b-dropdown-item>
          <b-dropdown-item @click.prevent="$router.push({name:'Em Desenvolvimento'})"  href="#">Informar alteração de endereço</b-dropdown-item>

        </b-nav-item-dropdown>

        <b-nav-item-dropdown class="col d-flex flex-fill" right>
          <template v-slot:button-content>
            Pedido
          </template>

          <b-dropdown-item  @click.prevent="$router.push({name:'Digitar Pedido'})" href="#" >Digitar</b-dropdown-item>
          <b-dropdown-item  @click.prevent="$router.push({name:'Meus Pedidos'})" href="#">Acompanhar</b-dropdown-item>
          <b-dropdown-item  @click.prevent="$router.push({name:'Em Desenvolvimento'})" href="#">Excluídos</b-dropdown-item>
        </b-nav-item-dropdown>

        <b-nav-item-dropdown class="col d-flex flex-fill" right>
          <template v-slot:button-content>
            Financeiro
          </template>

          <b-dropdown-item  @click.prevent="$router.push({name:'Em Desenvolvimento'})"  href="#">Pedidos liberados</b-dropdown-item>
          <b-dropdown-item  @click.prevent="$router.push({name:'Em Desenvolvimento'})"  href="#">Pedidos retidos</b-dropdown-item>
          <b-dropdown-item  @click.prevent="$router.push({name:'Em Desenvolvimento'})"  href="#">Pedidos inadimplentes</b-dropdown-item>
          <b-dropdown-item  @click.prevent="$router.push({name:'Em Desenvolvimento'})"  href="#">Inadimplência por campanha</b-dropdown-item>
          <b-dropdown-item  @click.prevent="$router.push({name:'Em Desenvolvimento'})"  href="#">Consultas SPC</b-dropdown-item>
          <b-dropdown-item  @click.prevent="$router.push({name:'Em Desenvolvimento'})"  href="#">Aumento de limite de crédito</b-dropdown-item>
          <b-dropdown-item @click.prevent="$router.push({name:'Financeiro'})"  href="#">Emitir boleto</b-dropdown-item>
        </b-nav-item-dropdown>

        <b-nav-item-dropdown class="col d-flex flex-fill" right>
          <template v-slot:button-content>
            Relatórios
          </template>

          <b-dropdown-item href="#">Gerenciais</b-dropdown-item>
          <b-dropdown-item @click.prevent="$router.push({name:'Em Desenvolvimento'})" href="#">Acompanhamento de cadastros | analítico</b-dropdown-item>
          <b-dropdown-item @click.prevent="$router.push({name:'Em Desenvolvimento'})" href="#">Acompanhamento de adições | analítico</b-dropdown-item>
          <b-dropdown-item @click.prevent="$router.push({name:'Em Desenvolvimento'})" href="#">Acompanhamento de atividade</b-dropdown-item>
          <b-dropdown-item @click.prevent="$router.push({name:'Em Desenvolvimento'})" href="#">Acompanhamento de consultoras | analítico</b-dropdown-item>
          <b-dropdown-item @click.prevent="$router.push({name:'Em Desenvolvimento'})" href="#">Acompanhamento de digitação por nível</b-dropdown-item>
          <b-dropdown-item @click.prevent="$router.push({name:'Em Desenvolvimento'})" href="#">Resumo geral da campanha</b-dropdown-item>
          <b-dropdown-item @click.prevent="$router.push({name:'Em Desenvolvimento'})" href="#">Analise setor diário</b-dropdown-item>
          <b-dropdown-item @click.prevent="$router.push({name:'Em Desenvolvimento'})" href="#">Vendas por setor</b-dropdown-item>
          <b-dropdown-item @click.prevent="$router.push({name:'Em Desenvolvimento'})" href="#">Vendas (captação de pedidos)</b-dropdown-item>
          <b-dropdown-item @click.prevent="$router.push({name:'Em Desenvolvimento'})" href="#">Vendas por produto</b-dropdown-item>
          <b-dropdown-item @click.prevent="$router.push({name:'Em Desenvolvimento'})" href="#">Intenção de compra</b-dropdown-item>
          <b-dropdown-item @click.prevent="$router.push({name:'Em Desenvolvimento'})" href="#">Tendência de vendas</b-dropdown-item>
          <b-dropdown-item @click.prevent="$router.push({name:'Em Desenvolvimento'})" href="#">Tendência de vendas diário</b-dropdown-item>
          
        </b-nav-item-dropdown>
      </b-navbar-nav>
    </b-navbar>
  
  
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: false
    },
    icon: {
      type: String
    },
    routerName: {
      type: String
    }
  },
  methods: {
    goTo() {
      if (this.$router.history.current.name === this.routerName) {
        return;
      }
      this.$router.push({ name: this.routerName });
    }
  }
};
</script>

<style lang="scss">

.nav-manager-sales-consultant{
    width: 100%;
    nav{
        ul{
            width: 100%;
        }
    }
}





.btn-text {
  text-align: center;
  display: block;
  width: 100%;
}
.navbar{

    .nav-item {
        .navbar-light,
  .navbar-nav,
  .nav-link {
      color: #fff !important;
  }
svg{
    
    }
  .navbar-light .navbar-nav .nav-link {
      span {
          color: #fff !important;
    }
  }
}

.btn-nav,
.nav-item {
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.5);
}

.btn-hover:hover,
.nav-item:hover {
  background: #ed8626;
}
    }

.header-menu-manager-sales-consultant{

  .dropdown-menu{
  background-color: #ffcdb2;
      color: #fff !important;
  }
.nav-item{
        margin: 0px 6px;

&:first-child{
    margin-left: 0px;
}
        &:last-child{
            margin-right: 0px;
        }
}
.dropdown-toggle::after{
    position: absolute;
    top: 18px;
    right: 10px;
}
a{
    display: block;
    width: 100%;
    text-align: center;
    &.dropdown-item{
      text-align: left;
    }
svg{
        position: absolute;
    left: 13px;
    top: 12px;
}
    ul{
        text-align: left;
    }
}
}
</style>

