<script setup>
import AppHeader from './components/AppHeader/index.vue';
import AppSider from './components/AppSider/index.vue';
import AppFooter from './components/AppFooter/index.vue';
import { APP_TITLE } from '~/config/app';

// import Breadcrumb from '~/components/Breadcrumb/index.vue';

const props = defineProps({
  tree: Array,
  index: String || undefined,
})
const emit = defineEmits(['update:index'])

// console.log('app props.index :>> ', props.index);

</script>

<template>
  <div class="flex flex-col w-screen h-screen overflow-hidden">
    <header class="w-full flex-none">
      <AppHeader></AppHeader>
    </header>
    <div class="w-full flex-auto flex flex-row  overflow-hidden">
      <aside class="w-260px flex-none h-full ">
        <el-scrollbar>
          <!-- @update:index="(v) => emit('update:index', v)" -->
          <h2 class="text-center py-4 text-xl font-semibold border-t-border-1px">{{ APP_TITLE }}</h2>
          <AppSider :tree="tree" :index="index"></AppSider>
        </el-scrollbar>
      </aside>
      <main class="flex-auto p-4 flex flex-col">
        <!-- <Breadcrumb class="flex-none mb-4"></Breadcrumb> -->
        <div class="flex-auto overflow-hidden">
          <el-scrollbar view-class="relative h-full flex flex-col">
            <!-- <slot></slot> -->
            <router-view></router-view>
          </el-scrollbar>
        </div>
      </main>
    </div>
    <AppFooter class="w-full flex-none"></AppFooter>
  </div>
</template>

<style lang="scss" scoped>
@import '~/styles/config/color.scss';

main {
  background-color: $mainBgColor;
}
</style>