<script setup lang="ts">
import LayoutMenu from './components/menu/index.vue'
import LayoutHeader from './components/header.vue'
import LayoutFooter from './components/footer.vue'
import LayoutMain from './components/main.vue'
import SiderDragBar from './components/sider/sider-dragbar.vue'

// import { useDragLine } from './components/sider/drag'

defineOptions({
  name: 'LeftMenuLayout',
})
const {
  getShowMenu,
  getCollapsed,
  getShowCenterTrigger,
  setSiderWidth,
  getCanDrag,
} = useMenuSetting()

const {
  headerRef,
  footerRef,
  contentRef,
  contentStyle,
  mainStyle,
} = useLayout()

const {
  toggleCollapse,
  sidebar,
} = useAppConfig()

const { getShowFooter } = useRootSetting()

const { isSidebarDark } = useAppTheme()
// useDragLine(siderRef, dragBarRef)
</script>

<template>
  <NLayout has-sider class="h-full">
    <NLayoutSider
      v-if="getShowMenu"
      :show-trigger="getShowCenterTrigger"
      bordered
      :collapsed-width="sidebar.collapsedWidth"
      :width="sidebar.width"
      collapse-mode="width"
      :collapsed="getCollapsed"
      :inverted="!!isSidebarDark"
      @update:collapsed="toggleCollapse"
    >
      <slot name="sider">
        <div class="static h-full">
          <SiderDragBar
            v-if="getCanDrag"
            :mix="sidebar.mixSidebarWidth"
            :width="sidebar.width"
            :fn="setSiderWidth"
          />
          <LayoutMenu />
        </div>
      </slot>
    </NLayoutSider>
    <NLayout>
      <NLayout ref="headerRef">
        <slot name="header">
          <LayoutHeader />
        </slot>
      </NLayout>
      <NLayout :content-style="contentStyle">
        <NLayoutContent ref="contentRef" :content-style="mainStyle">
          <LayoutMain>
            <slot name="main" />
          </LayoutMain>
        </NLayoutContent>
        <NLayoutFooter v-if="getShowFooter" ref="footerRef">
          <slot name="footer">
            <LayoutFooter />
          </slot>
        </NLayoutFooter>
      </NLayout>
    </NLayout>
  </NLayout>
</template>
