<template>
  <div 
    class="h-100"
    :class="level === 0 ? 'd-flex align-items-center' : ''"
  >
    <div  
      v-for="(item,index) in nodes"
      :key="index"
      class="nav-link-item d-flex align-items-center"  
    >
      <div @click="toChange"  v-if="item.children.length === 0">
        <nuxt-link 
          :to="item.to"
        >
          {{ item.label }}
        </nuxt-link>
      </div>
      <b-nav-item-dropdown 
        v-else
        :id="item.id"
        :text="item.label" 
        right
        @show="isDropdown=true"
        v-model="isDropdown"
        @toggle="dropdownToggle($event, item)"
        @hide="dropdownHide($event, item)"
      >
        <header-nav 
          :nodes="item.children" 
          :level="level + 1" 
          @dropDownHide="dropDownHide"
        />
      </b-nav-item-dropdown>
    </div>
  </div>
</template>

<script>

export default {
  name: 'HeaderNav',
  props: {
    level: {
      type: Number,
      default: 0
    },
    nodes: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      isDropdown: false,
    }
  },
  methods: {
    toChange() {
      this.isDropdown = false
      this.$emit('dropDownHide')
    },
    dropDownHide() {
      this.isDropdown = false
      this.$emit('dropDownHide')
    },
    dropdownToggle(e, item) {
      this.isDropdown = false
      if (item.catgLevel === 1) {
        this.$emit('dropDownHide')
      }
    },
    dropdownHide(e, item) { 
      if (this.isDropdown) {
        e.preventDefault()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@mixin activeNav {
  &:hover {
    position: relative;
    color: #015fe8;
    background: linear-gradient( 180deg, rgba(1,95,232,0) 0%, rgba(1,95,232,0.08) 100%);
    &::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: .125rem;
      background: #015fe8;
    }
    >a {
      color: #015fe8;
    }
  }
}
.nav-link-item {
  height: 100%;
  padding: 0 1.4375rem;
  >a {
    color: #151516;
    span {
      width: 100%;
      height: 100%;
      display: inline-block;
    }
  }
  @include activeNav;
}
.active-item {
  @include activeNav;
}

</style>