<script setup lang="ts">
import { ref } from "vue";
import { menuData } from "@/store/store.ts";
import router from "@/router/router.ts";
const isCollapsed = ref(true);
</script>

<template>
  <el-menu
    class="yl-layout-menu"
    :collapse="isCollapsed"
    style="height: 100%"
    :default-active="menuData.default || 'home'"
    @dblclick="isCollapsed = !isCollapsed"
  >
    <template v-for="item in menuData.data.filter((e) => !e.route_only)">
      <el-sub-menu
        v-if="item.detail && item.detail.length > 0"
        :index="item.menu_id"
      >
        <template #title>
          <el-icon><i :class="item.icon" /></el-icon>
          <span style="min-width: 6rem">{{ item.name }}</span>
        </template>
        <el-menu-item
          v-for="m in item.detail"
          :index="m.menu_id"
          @click="router.push(m.path)"
        >
          <el-icon> <i :class="m.icon" /></el-icon>
          <span style="min-width: 6rem">{{ m.name }}</span>
        </el-menu-item>
      </el-sub-menu>
      <el-menu-item
        v-else
        :index="item.menu_id"
        @click="router.push(item.path)"
      >
        <el-icon> <i :class="item.icon" /></el-icon>
        <span style="min-width: 6rem">{{ item.name }}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<style scoped>
.yl-layout-menu {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
</style>
