<script setup lang="ts">
import AppHeader from './components/AppHeader/index.vue'
import AppSider from './components/AppSider/index.vue'
import { user } from '~/store/index'

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

const ViewRef = $ref<HTMLElement>()
let ViewW = $ref<string>()
onMounted(() => {
  ViewW = `${ViewRef?.getBoundingClientRect().width}px`
})
</script>

<template>
  <div class="flex w-screen h-screen">
    <aside class="w-216px flex-none h-full bg-hex-041220">
      <el-scrollbar view-class="h-full flex flex-col">
        <h1 class="text-xl text-white font-extrabold w-full text-center mt-8 mb-12">
          蒙阴县教育数字平台
        </h1>
        <AppSider :key="user?.lastlogintime" class="flex-auto" />
      </el-scrollbar>
    </aside>
    <div class="h-full flex flex-col flex-auto ">
      <header class="w-full flex-none bg-hex-041220">
        <AppHeader class="bg-white border_lt overflow-hidden" />
      </header>
      <main class="w-full flex-auto flex flex-col overflow-hidden bg-hex-f6f9fd">
        <div class="w-full h-full  mt-7">
          <el-scrollbar always wrap-class="w-full h-full box-border" view-class="relative h-full w-full">
            <div ref="ViewRef" class="h-full" :style="{ width: ViewW }">
              <router-view />
            </div>
          </el-scrollbar>
        </div>
      </main>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.border_lt {
  border-radius: 2.25rem 0px 0px 0px;
}
</style>

