<template>
  <div>
    <q-page padding v-if="checkMain">
      <q-card>
        <q-card-section>
          <q-list
            v-for="(mainRoute, index) in mainRoutes"
            :key="'mainRoute' + index"
          >
            <essential-link
              v-for="(route, index2) in mainRoute.children"
              :key="'route' + index2"
              :title="route.title"
              :icon="route.icon"
              :link="route.name"
              v-if="hasPermissions(route.permissions)"
            />
          </q-list>
        </q-card-section>
      </q-card>
    </q-page>
    <router-view />
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from '@vue/composition-api';
import EssentialLink from 'src/components/navigation/EssentialLink.vue';
import mainRoutes from 'src/plugins/balance/routes';
export default defineComponent({
  // name: 'PageName'
  components: { EssentialLink },
  setup(_, { root }) {
    const checkMain = computed(() => {
      return root.$route.matched.length == 2;
    });
    function hasPermissions(permissions: FG.Permission[] | undefined) {
      if (permissions) {
        return permissions.every(permission => {
          return root.$store.getters['user/permissions'].includes(permission)
        })
      }
      return true
    }
    return { checkMain, mainRoutes, hasPermissions };
  }
});
</script>