<script setup>
import {useConfig, useCollapsed} from "~/store"
import {isDark} from '~/composables'

const $config = useConfig()

const layout_content_wrapper_background = ref($config.value.layout.background)
const layout_sider_wrapper_background = ref($config.value.layout.sider.background)

const layout_header_wrapper_height = ref(`${$config.value.layout.header}px`)
const layout_footer_wrapper_height = ref(`${$config.value.layout.footer}px`)

const layout_router_view_margin_bottom = ref('10px');
const layout_router_view_wrapper_min_height = ref(`calc(100vh - ${$config.value.layout.header}px - ${$config.value.layout.footer}px - 1px - ${layout_router_view_margin_bottom.value})`)
const layout_content_wrapper_height = ref(`calc(100vh - ${$config.value.layout.header}px)`)
const layout_content_container_wrapper_height = ref(`calc(100vh - ${$config.value.layout.header}px)`)

const $collapsed = useCollapsed()
const collapsedOnUpdate = (e) => {
  $collapsed.value = e
}
</script>
<template>
  <div class="layout_wrapper">
    <n-layout has-sider class="layout_header_container_wrapper">
      <n-layout-sider :collapsed="$collapsed" :class="[isDark?'':'layout_sider_background']"
                      collapse-mode="width" :collapsed-width="$config.layout.sider.close"
                      :width="$config.layout.sider.open" :inverted="$config.layout.sider.inverted || isDark"
                      :native-scrollbar="false" bordered>
        <Logo></Logo>
      </n-layout-sider>
      <n-layout>
        <n-layout-header class="layout_header_wrapper" bordered>
          <n-button ml-5 text @click="collapsedOnUpdate(!$collapsed)">
            <Icon v-if="$collapsed" type="menu-unfold-one"></Icon>
            <Icon v-else type="menu-fold-one"></Icon>
          </n-button>
          <Breadcrumb></Breadcrumb>
          <User></User>
        </n-layout-header>
      </n-layout>
    </n-layout>
    <n-layout has-sider class="layout_content_container_wrapper">
      <n-layout-sider :collapsed="$collapsed" :class="[isDark?'':'layout_sider_background']"
                      collapse-mode="width" :collapsed-width="$config.layout.sider.close"
                      :width="$config.layout.sider.open" :inverted="$config.layout.sider.inverted || isDark"
                      :native-scrollbar="false" bordered>
        <Menu></Menu>
      </n-layout-sider>
      <n-layout :class="[isDark?'':'layout_content_background']">
        <n-layout position="absolute" :native-scrollbar="false" class="layout_content_wrapper">
          <div class="layout_router_view_wrapper" px-2>
            <router-view v-slot="{ Component }">
              <component :is="Component"/>
            </router-view>
          </div>
          <n-layout-footer class="layout_footer_wrapper" text="xs center gray-500" bordered>
            <span>{{ $config.version.desc }}</span>
            <span mx-3>{{ $config.version.version }}</span>
            <span>{{ $config.version.date }}</span>
          </n-layout-footer>
        </n-layout>
      </n-layout>
    </n-layout>
  </div>
</template>
<style scoped>
.layout_wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.layout_content_container_wrapper {
  height: v-bind(layout_content_container_wrapper_height);
}

.layout_header_container_wrapper {
  height: v-bind(layout_header_wrapper_height);
}

.layout_header_wrapper {
  position: relative;
  height: v-bind(layout_header_wrapper_height);
  display: flex;
  align-items: center;
}

.layout_sider_background {
  background: v-bind(layout_sider_wrapper_background);
}

.layout_content_background {
  background: v-bind(layout_content_wrapper_background);
}

.layout_footer_wrapper {
  line-height: v-bind(layout_footer_wrapper_height);
  height: v-bind(layout_footer_wrapper_height);
}

.layout_content_wrapper {
  top: 0.5rem;
  background: #00000000;
  height: v-bind(layout_content_wrapper_height);
  overflow: hidden;
}

.layout_router_view_wrapper {
  min-height: v-bind(layout_router_view_wrapper_min_height);
  overflow: hidden;
  margin-bottom: v-bind(layout_router_view_margin_bottom);
}
</style>
