<template>
  <div v-if="finishLoading" class="no-border">
    <q-list class="rounded-borders text-primary">
      <div v-for="ind1 in getmenu" :key="ind1">
        <!--<div class="q-list-header">{{replaceUnderlineToSpace(index)}}</div>-->
        <div v-for="(myitemmenu, ind2) in myroutes" :key="ind2">
          <div v-if="myitemmenu.active">
            <div
              v-if="
                myitemmenu.routes2 &&
                myitemmenu.inmenu &&
                tools.visumenu(myitemmenu)
              "
            >
              <span v-if="myitemmenu.isseparator">
                <q-separator></q-separator>
              </span>
              <span v-else>
                <q-expansion-item
                  :content-inset-level="myitemmenu.level_parent"
                  :header-class="getmymenuclass(myitemmenu)"
                  :header-inset-level="myitemmenu.level_parent"
                  :icon="myitemmenu.materialIcon"
                  :label="tools.getLabelByItem(myitemmenu)"
                  active-class="my-menu-active"
                  expand-icon-class="my-menu-separat"
                >
                  <div
                    v-for="(child2, index) in myitemmenu.routes2"
                    :key="index"
                  >
                    <div v-if="child2.active && tools.visumenu(child2)">
                      <span v-if="child2.isseparator">
                        <q-separator></q-separator>
                      </span>
                      <span v-else>
                        <q-expansion-item
                          v-if="!child2.routes2"
                          :class="
                            `item item-link drawer-closer cursor-pointer ` +
                            clBase
                          "
                          :duration="300"
                          :header-inset-level="child2.level_child"
                          :icon="child2.materialIcon"
                          :label="tools.getLabelByItem(child2)"
                          :to="getroute(child2)"
                          active-class="my-menu-active"
                          expand-icon="none"
                          expand-icon-class="my-menu-icon-none"
                        >
                          <q-item-section avatar>
                            <q-avatar v-if="child2.img">
                              <div
                                :class="getimgiconclass(child2)"
                                :icon="`img:` + child2.img"
                                style="font-size: 2rem"
                              ></div>
                            </q-avatar>
                            <div v-else>
                              <q-avatar
                                :icon="child2.materialIcon"
                                :size="child2.iconsize"
                                class="clicon"
                                color="primary"
                                text-color="white"
                              >
                              </q-avatar>
                            </div>
                          </q-item-section>

                          <q-item-section>
                            {{ tools.getLabelByItem(child2) }}
                          </q-item-section>
                        </q-expansion-item>
                        <q-expansion-item
                          v-else
                          :content-inset-level="child2.level_parent"
                          :header-class="getmymenuclass(child2)"
                          :header-inset-level="child2.level_parent"
                          :icon="child2.materialIcon"
                          :label="tools.getLabelByItem(child2)"
                          active-class="my-menu-active"
                          expand-icon-class="my-menu-separat"
                        >
                          <div
                            v-for="(child3, index) in child2.routes2"
                            :key="index"
                          >
                            <div v-if="child3.active">
                              <q-expansion-item
                                :class="
                                  `item item-link drawer-closer cursor-pointer ` +
                                  clBase
                                "
                                :duration="300"
                                :header-inset-level="child3.level_child"
                                :icon="child3.materialIcon"
                                :label="tools.getLabelByItem(child3)"
                                :to="getroute(child3)"
                                active-class="my-menu-active"
                                expand-icon-class="my-menu-icon-none"
                              >
                                <div
                                  v-for="(child4, index) in child3.routes2"
                                  :key="index"
                                >
                                  <q-expansion-item
                                    v-if="!!child3.routes2 && child3.active"
                                    :key="index"
                                    :class="
                                      `item item-link drawer-closer cursor-pointer ` +
                                      clBase
                                    "
                                    :duration="300"
                                    :expand-icon="child4.icon"
                                    :header-inset-level="child4.level_child"
                                    :icon="child4.materialIcon"
                                    :label="tools.getLabelByItem(child4)"
                                    :to="getroute(child4)"
                                    active-class="my-menu-active"
                                    expand-icon-class="my-menu-separat"
                                  >
                                  </q-expansion-item>
                                </div>
                              </q-expansion-item>
                            </div>
                          </div>
                        </q-expansion-item>
                      </span>
                    </div>
                  </div>
                </q-expansion-item>
              </span>
            </div>
            <div
              v-else-if="
                myitemmenu.mainMenu &&
                myitemmenu.inmenu &&
                tools.visumenu(myitemmenu)
              "
            >
              <span v-if="myitemmenu.isseparator">
                <q-separator></q-separator>
              </span>
              <span v-else>
                <q-expansion-item
                  :content-inset-level="myitemmenu.level_parent + 1"
                  :header-class="getmymenuclass(myitemmenu)"
                  :header-inset-level="myitemmenu.level_parent + 1"
                  :icon="myitemmenu.materialIcon"
                  :label="tools.getLabelByItem(myitemmenu)"
                  active-class="my-menu-active"
                  expand-icon-class="my-menu-separat"
                >
                  <div
                    v-for="(child2, index) in myitemmenu.sottoMenu"
                    :key="index"
                  >
                    <div
                      v-if="
                        getmenuByPath(child2).active &&
                        tools.visumenu(getmenuByPath(child2))
                      "
                    >
                      <span v-if="getmenuByPath(child2).isseparator">
                        <q-separator></q-separator>
                      </span>
                      <span v-else>
                        <q-expansion-item
                          v-if="true"
                          :class="
                            `item item-link drawer-closer cursor-pointer ` +
                            clBase
                          "
                          :duration="300"
                          :header-inset-level="
                            getmenuByPath(child2).level_child + 3
                          "
                          :icon="getmenuByPath(child2).materialIcon"
                          :label="tools.getLabelByItem(getmenuByPath(child2))"
                          :to="getroute(getmenuByPath(child2))"
                          active-class="my-menu-active"
                          expand-icon="none"
                          expand-icon-class="my-menu-icon-none"
                        >
                          <q-item-section avatar>
                            <q-avatar v-if="getmenuByPath(child2).img">
                              <div
                                :class="getimgiconclass(getmenuByPath(child2))"
                                :icon="`img:` + getmenuByPath(child2).img"
                                style="font-size: 2rem"
                              ></div>
                            </q-avatar>
                            <div v-else>
                              <q-avatar
                                :icon="getmenuByPath(child2).materialIcon"
                                :size="getmenuByPath(child2).iconsize"
                                class="clicon"
                                color="primary"
                                text-color="white"
                              >
                              </q-avatar>
                            </div>
                          </q-item-section>

                          <q-item-section>
                            {{ tools.getLabelByItem(getmenuByPath(child2)) }}
                          </q-item-section>
                        </q-expansion-item>
                        <q-expansion-item
                          v-else
                          :content-inset-level="
                            getmenuByPath(child2).level_parent + 1
                          "
                          :header-class="getmymenuclass(getmenuByPath(child2))"
                          :header-inset-level="
                            getmenuByPath(child2).level_parent + 2
                          "
                          :icon="getmenuByPath(child2).materialIcon"
                          :label="tools.getLabelByItem(getmenuByPath(child2))"
                          active-class="my-menu-active"
                          expand-icon-class="my-menu-separat"
                        >
                          <div
                            v-for="(child3, index) in getmenuByPath(child2)
                              .sottoMenu"
                            :key="index"
                          >
                            <div v-if="getmenuByPath(child3).active">
                              <q-expansion-item
                                :class="
                                  `item item-link drawer-closer cursor-pointer ` +
                                  clBase
                                "
                                :duration="300"
                                :header-inset-level="
                                  getmenuByPath(child3).level_child + 1
                                "
                                :icon="getmenuByPath(child3).materialIcon"
                                :label="
                                  tools.getLabelByItem(getmenuByPath(child3))
                                "
                                :to="getroute(getmenuByPath(child3))"
                                active-class="my-menu-active"
                                expand-icon-class="my-menu-icon-none"
                              >
                                <div
                                  v-for="(child4, index) in getmenuByPath(
                                    child3
                                  ).sottoMenu"
                                  :key="index"
                                >
                                  <q-expansion-item
                                    v-if="
                                      !!getmenuByPath(child3).sottoMenu &&
                                      getmenuByPath(child3).active
                                    "
                                    :key="index"
                                    :class="
                                      `item item-link drawer-closer cursor-pointer ` +
                                      clBase
                                    "
                                    :duration="300"
                                    :expand-icon="child4.icon"
                                    :header-inset-level="child4.level_child + 4"
                                    :icon="child4.materialIcon"
                                    :label="tools.getLabelByItem(child4)"
                                    :to="getroute(child4)"
                                    active-class="my-menu-active"
                                    expand-icon-class="my-menu-separat"
                                  >
                                  </q-expansion-item>
                                </div>
                              </q-expansion-item>
                            </div>
                          </div>
                        </q-expansion-item>
                      </span>
                    </div>
                  </div>
                </q-expansion-item>
              </span>
            </div>
            <div v-else>
              <div
                v-if="
                  myitemmenu.inmenu &&
                  !myitemmenu.submenu &&
                  tools.visumenu(myitemmenu)
                "
              >
                <q-slide-transition :duration="200">
                  <div v-show="true">
                    <span v-if="myitemmenu.isseparator">
                      <q-separator inset></q-separator>
                    </span>
                    <span v-else>
                      <q-list>
                        <q-item
                          clickable
                          :content-inset-level="myitemmenu.level_parent"
                          :header-inset-level="myitemmenu.level_parent"
                          :to="getroute(myitemmenu)"
                          active-class="my-menu-active"
                          expand-icon="none"
                        >
                          <q-item-section thumbnail>
                            <q-avatar
                              :icon="myitemmenu.materialIcon"
                              :size="
                                !!myitemmenu.iconsize
                                  ? myitemmenu.iconsize
                                  : '2.5rem'
                              "
                              :font-size="
                                !!myitemmenu.iconsize
                                  ? myitemmenu.iconsize
                                  : '2.5rem'
                              "
                              text-color="primary"
                              style="margin-left: 4px"
                              square
                              rounded
                            >
                            </q-avatar>
                          </q-item-section>

                          <q-item-section>
                            <span :class="myitemmenu.extraclass">{{
                              tools.getLabelByItem(myitemmenu)
                            }}</span>
                            <span v-if="myitemmenu.subtitle" class="subtitle">{{
                              myitemmenu.subtitle
                            }}</span>
                          </q-item-section>
                        </q-item>
                      </q-list>
                    </span>
                  </div>
                </q-slide-transition>
              </div>
            </div>
          </div>
        </div>
      </div>
    </q-list>
  </div>
</template>

<script lang="ts" src="./menuOne.ts">
</script>

<style lang="scss">
@import './menuOne.scss';
</style>
