<template>
    <v-navigation-drawer style="border: 0;"class="pa-4" v-model="drawer" :width="380">
    <!-- <v-navigation-drawer temporary class="blue lighten-2" v-model="drawer" dark fixed app> -->
      <v-list>
        <v-list-item class="my-5">
          <v-img :aspect-ratio="1" max-height="42px" max-width="132px" class="bg-white" src="../globalimages/logo.png"></v-img>
        </v-list-item>
        <!-- LEVEL 0 -->
        <template v-for="(lev_0, i) in level_0" :key="lev_0.id" >
          <v-list-item v-if="!level_1['p_' + lev_0.id] && lev_0.is_parent === 'N'" @click="goto(lev_0.url)" color="primary" rounded="lg" class="my-2">
            <v-list-item-title >{{ lev_0.name }}</v-list-item-title>
          </v-list-item>
          <v-list-group v-else :value="lev_0.name" >
            <template v-slot:activator="{ props }">
              <v-list-item v-bind="props" color="primary" rounded="lg" class="mb-3">
                <v-list-item-title>{{ lev_0.name }}</v-list-item-title>
              </v-list-item>
            </template>
            <!-- LEVEL 1 -->
            <template v-for="(lev_1, j) in level_1['p_' + lev_0.id]" :key="lev_1.id">
              <v-list-item v-if="!level_2['p_' + lev_1.id] && lev_1.is_parent === 'N'" @click="goto(lev_1.url)" color="primary" rounded="lg" class="{'primary--text': activeItem === lev_2.id}">
                <v-list-item-title><v-icon>mdi-circle-small</v-icon>{{ lev_1.name }}</v-list-item-title>
              </v-list-item>
              <v-list-group v-else :value="lev_1.state" v-show="level_2['p_' + lev_1.id]" sub-group no-action >
                <template v-slot:activator="{ props }">
                  <v-list-item v-bind="props" color="primary"rounded="lg"  >
                    <v-list-item-title><v-icon>mdi-circle-small</v-icon>{{ lev_1.name }}</v-list-item-title>
                  </v-list-item>
                </template>
                <!-- LEVEL 2 -->
                <template v-for="(lev_2, k) in level_2['p_' + lev_1.id]" :key="lev_2.id">
                  <v-list-item class="" @click="goto(lev_2.url)"  color="primary" rounded="lg">
                    <v-list-item-title><v-icon>mdi-circle-small</v-icon>{{ lev_2.name }}</v-list-item-title>
                  </v-list-item>
                </template>
              </v-list-group>
            </template>
          </v-list-group>
        </template>

      </v-list>
    </v-navigation-drawer>
</template>

<script type="module">
export default {
  name: "MenuComponent",
  data() {
    return {activeItem: null};
  },
  mounted() {
    // Memuat data saat komponen di-mount
    this.$store.dispatch('system/loadMenuData');
  },
  computed: {
    // Akses state dari store
    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
    },
    drawer: {
      get() {
        return this.$store.state.system.drawer;
      },
      set(val) {
        this.$store.commit("system/update_drawer", val);
      },
    },
  },
  methods: {
    goto(url) {
      console.log("menuju ke- ", url)
    }
  },
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>
