<script lang="ts" setup>
import { computed, unref } from 'vue'
import { Logo } from './components/Logo'
import { MainView } from './components/Main'
import { AsideMenu } from './components/Menu'
import { PageHeader } from './components/Header'
import { useProjectSetting } from '@/hooks/setting/useProjectSetting'

const {
  menuSetting,
} = useProjectSetting()

const leftMenuWidth = computed(() => {
  const { minMenuWidth } = unref(menuSetting)
  return minMenuWidth
})


</script>

<template>
  <div class="layout">
    <!-- 左侧sider -->
    <div class="layout-sider" :style="{ width: `${leftMenuWidth}px` }">
      <Logo />
      <AsideMenu />
    </div>

    <!-- 右侧内容区域 -->
    <div class="layout-main">
      <div class="layout-main-header">
        <PageHeader />
      </div>

      <div class="layout-main-content">
        <MainView />
      </div>
    </div>
    <div />
  </div>
</template>

<style lang="less" scoped>
.layout {
  display: flex;
  flex-direction: row;
  flex: auto;
  background-image: url('../assets/images/bg.png');
  background-size: cover;
  height: 100%;

  .layout-sider {
    min-height: 100vh;
    border-right: 1px solid #dae4f3;
  }

  .layout-main {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    box-sizing: border-box;
    border-left: 1px solid #ffffff;
    width: 100%;
    min-height: 100vh;

    &-header {
      box-sizing: border-box;
      width: 100%;
      z-index: 11;
    }

    &-content {
      display: flex;
      flex: auto;
      height: 100%;
      padding: 0px 16px 24px 16px;
      overflow-x: hidden;
      box-sizing: border-box;
    }
  }
}
</style>
