<template>
  <b-navbar>
    <b-navbar-nav class="col-md-12 header-menu-manager-sales-consultant">
      <!-- Planejamento -->
      <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:'Solicitações de cadastro'})"
          href="#"
        >Agenda</b-dropdown-item>
        <b-dropdown-item
          @click.prevent="$router.push({name:'Consultas SPC'})"
          href="#"
        >Plano diário de visitas (PDV)</b-dropdown-item>
        <b-dropdown-item
          @click.prevent="$router.push({name:'Solicitações de cadastro'})"
          href="#"
        >Minhas metas</b-dropdown-item>
      </b-nav-item-dropdown>

      <!-- Cadastro -->

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

        <b-dropdown-item @click.prevent="$router.push({name:'Documentos'})" href="#">Incluir</b-dropdown-item>
        <b-dropdown-item @click.prevent="$router.push({name:'Consultoras'})" 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:'Solicitações de cadastro'})"
          href="#"
        >Solicitações de cadastro</b-dropdown-item>
        <b-dropdown-item
          @click.prevent="$router.push({name:'Solicitações de cadastro'})"
          href="#"
        >Crédito SPC</b-dropdown-item>
        <b-dropdown-item
          @click.prevent="$router.push({name:'Documentos'})"
          href="#"
        >Informar alteração de endereço</b-dropdown-item>
        <b-dropdown-item
          @click.prevent="$router.push({name:'Solicitações de cadastro'})"
          href="#"
        >Pré Cadastro</b-dropdown-item>
      </b-nav-item-dropdown>

      <!-- Pedidos-->

      <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:'Meus Pedidos'})" href="#">Excluídos</b-dropdown-item>
      </b-nav-item-dropdown>

      <!-- Financeiro -->

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

        <b-dropdown-item href="#">Pedidos liberados</b-dropdown-item>
        <b-dropdown-item href="#">Pedidos retidos</b-dropdown-item>
        <b-dropdown-item href="#">Pedidos inadimplentes</b-dropdown-item>
        <b-dropdown-item href="#">Aumento de limite de crédito</b-dropdown-item>
        <b-dropdown-item @click.prevent="$router.push({name:'Financeiro'})" href="#">Gerar boleto</b-dropdown-item>
      </b-nav-item-dropdown>

      <!-- Relatórios -->

      <b-nav-item-dropdown class="col d-flex flex-fill" right>
        <template v-slot:button-content>Relatório</template>
        <b-dropdown-item href="#">Gerenciais</b-dropdown-item>
        <b-dropdown-item href="#">Acompanhamento de campanha</b-dropdown-item>
        <b-dropdown-item href="#">Acompanhamento</b-dropdown-item>
        <b-dropdown-item href="#">Atividade</b-dropdown-item>
        <b-dropdown-item href="#">Resumo Inadimplencia</b-dropdown-item>
        <b-dropdown-item href="#">Falhas da campanha</b-dropdown-item>
        <b-dropdown-item href="#">Vendas por produto</b-dropdown-item>
        <b-dropdown-item href="#">Acompanhamento de adições</b-dropdown-item>
        <b-dropdown-item href="#">Vendas (captação de pedidos)</b-dropdown-item>
        <b-dropdown-item href="#">Vendas por setor</b-dropdown-item>
        <b-dropdown-item href="#">Análise setor diário</b-dropdown-item>
        <b-dropdown-item href="#">Relatório digitacao por nível</b-dropdown-item>
        <b-dropdown-item href="#">Consultas ao SPC</b-dropdown-item>
        <b-dropdown-item href="#">Cadastros na campanha</b-dropdown-item>
        <b-dropdown-item href="#">Acompanhamento de consultoras</b-dropdown-item>
        <b-dropdown-item href="#">Intenção de compra</b-dropdown-item>
        <b-dropdown-item href="#">Tendência de vendas</b-dropdown-item>
        <b-dropdown-item href="#">Tendencia de vendas diário</b-dropdown-item>
      </b-nav-item-dropdown>
<b-col class="d-flex flex-fill">
          <nav-button v-bind=" {
        title: ' Entregas',
        routerName: 'Entregas',
        icon: 'box',
      }"/>
        </b-col>
      
    </b-navbar-nav>
  </b-navbar>
</template>

<script>
import NavButton from "@/components/navbar/NavButton.vue";

export default {
  props: {
    title: {
      type: String,
      required: false
    },
    icon: {
      type: String
    },
    routerName: {
      type: String
    }
  },
  components: {
    NavButton
  },
  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>

