<template>
  <v-navigation-drawer  temporary class="blue lighten-2" v-model="xdrawer" dark  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: #1E88E5;
  }
  .tile:active {
    background: #bec5b7;
  }
  .v-list__group__header__prepend-icon .v-icon {
    color: white;
}
.v-list__tile__title:hover {
    color: #BBDEFB;
}

.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>
