<template>
  <nav
    class="nav-extended"
    :class="primaryColor"
  >
    <div class="nav-wrapper container" />
    <div class="nav-content container">
      <ul class="tabs tabs-transparent">
        <li class="tab">
          <a
            class="active"
            @click.stop.prevent="changeTab('inventory', $event)"
          >Inventur</a>
        </li>
        <li class="tab">
          <a
            @click.stop.prevent="changeTab('article', $event)"
          >Artikelliste</a>
        </li>
        <li class="tab">
          <a
            @click.stop.prevent="changeTab('calc', $event)"
          >Rechner</a>
        </li>
      </ul>
    </div>
  </nav>
</template>

<script>
import M from 'materialize-css';

export default {
  props: {
    primaryColor: {
      type: String,
      default: "red"
    }
  },
  data() {
    return {
      tabs: [] 
    }
  },
  mounted() {
    var tabs = document.getElementsByClassName("tabs")[0];
    M.Tabs.init(tabs, {});
    this.tabs = M.Tabs.getInstance(tabs);
  },
  methods: {
    changeTab(tabId, event) {
      this.view = tabId;
      this.tabs._handleTabClick(event);
      this.tabs.updateTabIndicator();
      this.$emit("changed-tab", this.view);
    },
  }
}
</script>

<style>

</style>