<template>
  <v-list density="compact"
          nav>
    <template v-for="(child,i) in routes">
      <template v-if="child.children && child.children.length > 1">
        <v-list-item :key="i"
                     :prepend-icon="child.meta.icon"
                     :title="child.meta.title"
                     :value="i"
                     @click="navigationfold(i)">
        </v-list-item>
        <template v-if="child.meta.isopen">
          <template v-for="(c,n) in child.children"
                    :key="n">
            <v-list-item class="ml-2"
                         :prepend-icon="c.meta.icon"
                         :title="c.meta.title"
                         :value="child.path +'/'+c.path">
            </v-list-item>
          </template>
        </template>
      </template>
      <template v-else>
        <v-list-item :key="i"
                     :prepend-icon="child.meta.icon"
                     :title="child.meta.title"
                     :value="child.path"
                     :to="child.path">
        </v-list-item>
      </template>
    </template>
  </v-list>
</template>

<script>
export default {
  name: 'Navigation',
  props: {
    routes: {
      type: Array,
      default: function () {
        return [
          {
            path: '/',
            meta: {
              title: 'Console',
              icon: 'mdi-console',
            },
            children: [
              {
                path: 'pro',
                meta: { title: 'ProjjectInfo', icon: 'mdi-card-text' },
              },
              {
                path: 'host',
                meta: { title: 'HostInfo', icon: 'mdi-laptop' },
              },
              {
                path: 'cluster',
                meta: { title: 'ClusterInfo', icon: 'mdi-server-network' },
              },
            ],
          },
        ]
      },
    },
  },
  methods: {
    navigationfold(v) {
      this.routes[v].meta.isopen = !this.routes[v].meta.isopen
      console.log(this.routes)
    },
  },
}
</script>

<style>
</style>