<template>
  <el-container>
    <el-header>
      <layout-header />
    </el-header>
    <el-container>
      <el-aside>
        <el-scrollbar style="height: var(--el-aside-scrollbar-height)">
          <el-menu
            router
            unique-opened
            :default-active="$route.meta.activeMenu || $route.path"
          >
            <layout-menu :menus="routes" />
          </el-menu>
        </el-scrollbar>
      </el-aside>
      <el-main>
        <layout-breadcrumb v-if="route.meta.isBreadcrumb !== false" />
        <el-scrollbar style="height: var(--el-main-scrollbar-height)">
          <router-view v-slot="{ Component }">
            <transition name="view" mode="out-in">
              <div :key="$route.path">
                <component :is="Component"></component>
              </div>
            </transition>
          </router-view>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import LayoutBreadcrumb from "@/components/layout/breadcrumb/index";
import LayoutHeader from "@/components/layout/header/index";
import LayoutMenu from "@/components/layout/menu/index";
import { computed } from "vue";
import { useMenuStore } from "@/pinia/menu";
import { useRoute } from "vue-router";

defineOptions({
  name: "layout",
});
const menuStore = useMenuStore();
const route = useRoute();
const routes = computed(() => menuStore.getMenus);
</script>

<style scoped lang="scss"></style>
