<template>
  <div>
    <template v-for="(menuLevel1, index) in menus">
      <template v-if="menuLevel1.children && menuLevel1.children.length > 0">
        <!-- 有子集菜单 -->
        <q-expansion-item expand-separator :key="index" :label="menuLevel1.menuName" :icon="menuLevel1.icon">
          <div v-for="(menuLevel2, index) in (menuLevel1.children as menuType[])" :key="index">
            <q-item :class="link == menuLevel2.path && link !== '' ? 'bg-blue-grey-3 text-black shadow-up-3' : ''"
              @click="linkChange(menuLevel2.path)" :to="{ name: menuLevel2.name }" v-ripple exact
              :active="link == menuLevel2.path && link !== ''">
              <q-item-section avatar><q-icon :name="menuLevel2.icon" /></q-item-section>
              <q-item-section>{{ menuLevel2.menuName }}</q-item-section>
            </q-item>
          </div>
        </q-expansion-item>
        <!-- <q-separator color="grey-9" inset /> -->
      </template>
      <template v-else>
        <!-- 无子集菜单 -->
        <!-- shadow-up-3  -->
        <q-item clickable v-ripple exact :key="index" @click="linkChange(menuLevel1.path)"
          v-if="menuLevel1.name !== 'Index'" :to="{ name: menuLevel1.name }" :class="link == menuLevel1.path && link !== ''
            ? 'bg-blue-grey-3 text-black' : ''" :active="link == menuLevel1.path && link !== ''"
          active-class="itemActive">
          <q-item-section avatar><q-icon :name="menuLevel1.icon" /></q-item-section>
          <q-item-section>{{ menuLevel1.menuName }}</q-item-section>
        </q-item>
      </template>
    </template>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';

const props = defineProps<{
  menu: menuType;
}>();

let link = ref('');

let menus = ref([] as menuType[]);

const linkChange = (path: string) => {
  link.value = path;
};

onMounted(() => {
  menus.value = props.menu.children?.filter((val: menuType) => {
    if (val.type === '0') {
      if (val.children && val.children.length > 0) {
        val.children = val.children?.filter((item: menuType) => {
          if (item.type === '0') {
            return item;
          }
        });
      }
      return val;
    }
  }) as menuType[];
});
</script>
<style >
/* item 被激活时的样式 */
.itemActive {
  background: rgba(25, 118, 210, 0.0618);
  /* transition: all .618s; */

  &:after {
    content: '';
    position: absolute;
    width: 3px;
    height: 100%;
    background: #828c92 !important;
    top: 0;
    right: 0;
  }
}
</style>
