import { RouterView, useRoute } from 'vue-router'
import {
  NLayout,
  NLayoutHeader,
  NLayoutContent,
  NLayoutSider,
  NLayoutFooter,
  NScrollbar,
} from 'naive-ui'
import MenuCom from './components/Menu'

const border = 'border border-[var(--border-color)] rounded-lg shadow-sm'
export default defineComponent({
  setup() {
    const route = useRoute()

    return () =>
      route.meta.new ? (
        <RouterView></RouterView>
      ) : (
        <div class="w-h-full">
          <NLayout class="w-h-full" content-class="flex flex-col w-h-full">
            <NLayoutHeader class="h-12">
              <div class={`h-full ${border}`}>title</div>
            </NLayoutHeader>
            <div class="h-5"></div>
            <NLayout has-sider class="flex-1" content-class="w-h-full">
              <NLayoutSider
                class={`${border}`}
                show-trigger
                collapse-mode="width"
                collapsed-width={64}
                width={240}
                content-class="w-h-full"
                native-scrollbar={false}
              >
                <MenuCom />
              </NLayoutSider>
              <div class="p-3"></div>
              <NLayoutContent class={`h-full ${border}`} content-style="padding: 24px">
                <NScrollbar>
                  <RouterView class="w-h-full" />
                </NScrollbar>
              </NLayoutContent>
            </NLayout>
            {/* <NLayoutFooter class="bg-slate-400 h-[40px]">成府路</NLayoutFooter> */}
          </NLayout>
        </div>
      )
  },
})