<script setup lang="ts">
import AppHeader from './components/AppHeader/index.vue'
import AppSider from './components/AppSider/index.vue'
// import AppMain from './components/AppMain/index.vue';

const router = useRouter()
</script>

<template>
  <div v-if="!router.currentRoute.value.meta.hideLayout" class="h-screen w-screen flex">
    <aside class="h-full w-240px flex-none" style="border-right: 1px solid rgba(63,63,68,0.10);">
      <el-scrollbar view-class="h-full px-20px">
        <AppSider />
      </el-scrollbar>
    </aside>
    <div class="flex flex-1 flex-col bg-hex-f7fbfd overflow-hidden">
      <header class="w-full bg-white">
        <AppHeader />
      </header>

      <main class="flex-1 overflow-hidden">
        <div class="h-full w-full">
          <el-scrollbar always wrap-class="w-full h-full box-border" view-class="relative h-full flex flex-col p-4 pb-0">
            <router-view />
          </el-scrollbar>
        </div>
      </main>
    </div>
  </div>
  <div v-else class="h-screen w-screen bg-hex-f7fbfd">
    <el-scrollbar always wrap-class="w-full h-full" view-class="relative h-full">
      <router-view />
    </el-scrollbar>
  </div>
</template>
