<template>
  <v-navigation-drawer temporary style="background-color:#F2E5D3" v-model="xdrawer" fixed app>
    <v-list>
      <!-- LEVEL 0 -->
      <template v-for="(lev_0, i) in level_0">
        <v-list-tile
          class="tile"
          :key="lev_0.id + 10000"
          v-if="!level_1['p_' + lev_0.id] && lev_0.is_parent == 'N'"
          @click="goTo(lev_0.url)"
        >
          <v-list-tile-action>
            <v-icon>{{ lev_0.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-title>{{ lev_0.name }}</v-list-tile-title>
        </v-list-tile>

        <v-list-group
          :key="lev_0.id"
          :prepend-icon="lev_0.icon"
          :value="lev_0.state"
          v-if="level_1['p_' + lev_0.id]"
        >
          <template v-slot:activator>
            <v-list-tile class="tile">
              <v-list-tile-title>{{ lev_0.name }}</v-list-tile-title>
            </v-list-tile>
          </template>

          <!-- LEVEL 1 -->
          <template v-for="(lev_1, j) in level_1['p_' + lev_0.id]">
            <v-list-tile
              class="tile"
              :key="lev_1.id + 10000"
              v-if="!level_2['p_' + lev_1.id] && lev_1.is_parent == 'N'"
              sub-group
              no-action
              @click="goTo(lev_1.url)"
            >
              <v-list-tile-action>
                <!-- <v-icon>home</v-icon> -->
              </v-list-tile-action>
              <v-list-tile-title>{{ lev_1.name }}</v-list-tile-title>
            </v-list-tile>

            <v-list-group
              :key="lev_1.id"
              :value="lev_1.state"
              v-show="level_2['p_' + lev_1.id]"
              sub-group
              no-action
            >
              <template v-slot:activator>
                <v-list-tile>
                  <v-list-tile-title>{{ lev_1.name }}</v-list-tile-title>
                </v-list-tile>
              </template>

              <!-- LEVEL 2 -->
              <template v-for="(lev_2, k) in level_2['p_' + lev_1.id]">
                <v-list-tile class="tile" :key="lev_2.id" @click="goTo(lev_2.url)">
                  <!-- <v-list-tile-action>
                            <v-icon>home</v-icon>
                            </v-list-tile-action> -->
                  <v-list-tile-title>{{ lev_2.name }}</v-list-tile-title>
                </v-list-tile>
              </template>
            </v-list-group>
          </template>
        </v-list-group>
      </template>
    </v-list>
  </v-navigation-drawer>
</template>

<style scoped>
.tile {
  margin: 5px;
  border-radius: 4px;
}
.tile:hover {
  background-color: #829672;
  color:white;
}
.tile:active {
  background: #829672;
  color:white;
}
.v-list__group__header__prepend-icon .v-icon {
  color: rgb(117, 61, 28);
}
.v-list__tile__title:hover {
  color: white;
}

.v-navigation-drawer {
  z-index: 1003;
}
</style>

<style>
.v-overlay--active {
  z-index: 1002;
}
</style>
<script>
module.exports = {
  props: {
    drawer: Boolean,
  },

  computed: {
    xdrawer: {
      get() {
        return this.drawer;
      },
      set(v) {
        this.$emit("togleDrawer");
      },
    },
    level_0() {
      return this.$store.state.system.menu_level_0;
    },

    level_1() {
      return this.$store.state.system.menu_level_1;
    },

    level_2() {
      return this.$store.state.system.menu_level_2;
    },
  },

  mounted() {
    this.$store.dispatch("system/get_menu");
  },

  methods: {
    goTo(url) {
      window.location = BASE_URL + "/one-ui/" + url;
    },
  },
};
</script>
