<script setup lang="ts">
import { ref } from 'vue';
import Navbar from './Navbar/index.vue';
import Content from './Content/index.vue';
import Sider from './Sider/index.vue';
import { useUserStore } from 'cube-front/core/stores/user';

const userStore = useUserStore();
const collapsed = ref(false);

const navbarHeight = 56;
const menuWidth = collapsed.value ? 48 : 120;
const paddingLeft = { paddingLeft: menuWidth + 'px' };
const paddingTop = { paddingTop: navbarHeight + 'px' };

const paddingStyle = { ...paddingLeft, ...paddingTop };
</script>

<template>
  <div class="layout">
    <div class="layoutNavbar">
      <Navbar :currentUser="userStore.userInfo" :logout="userStore.logout" :collapsed="false" />
    </div>
    <div class="layoutMain">
      <div class="layoutSidebar" :style="{ ...paddingTop, width: menuWidth + 'px' }">
        <Sider />
      </div>
      <div class="layoutContent" :style="paddingStyle">
        <div class="layoutContentWrapper">
          <!-- <div v-if="breadcrumb.length > 0" class="layoutBreadcrumb">
            <Breadcrumb></Breadcrumb>
          </div> -->
          <Content>
            <slot></slot>
          </Content>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
$nav-size-height: 56px;
$layout-max-width: 1100px;

.layout {
  width: 100%;
  height: 100%;
  background-color: #e9f6fe;
}

.layoutNavbar {
  position: fixed;
  width: 100%;
  min-width: $layout-max-width;
  top: 0;
  left: 0;
  height: $nav-size-height;
  z-index: 100;

  &-hidden {
    height: 0;
  }
}

.layoutMain {
  .layoutSidebar {
    position: fixed;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 99;
    box-sizing: border-box;

    ::-webkit-scrollbar {
      width: 12px;
      height: 4px;
    }

    ::-webkit-scrollbar-thumb {
      border: 4px solid transparent;
      background-clip: padding-box;
      border-radius: 7px;
      background-color: var(--color-text-4);
    }

    ::-webkit-scrollbar-thumb:hover {
      background-color: var(--color-text-3);
    }

    &::after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      right: -1px;
      width: 1px;
      height: 100%;
      background-color: var(--color-border);
    }

    .collapseBtn {
      height: 24px;
      width: 24px;
      background-color: var(--color-fill-1);
      color: var(--color-text-3);
      border-radius: 2px;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      // 位置
      position: absolute;
      bottom: 12px;
      right: 12px;

      &:hover {
        background-color: var(--color-fill-3);
      }
    }
  }

  .layoutContent {
    background-color: #e9f6fe;
    min-width: $layout-max-width;
    min-height: 100vh;
    height: 100vh;
    transition: padding-left 0.2s;
    box-sizing: border-box;
    padding-right: 5px;
    padding-bottom: 5px;
  }

  .layoutContentWrapper {
    height: 100%;
    background-color: #fff;
    border-radius: 14px;
    padding: 16px 6px 0 16px;
    box-sizing: border-box;
  }

  .layoutBreadcrumb {
    margin-bottom: 16px;
  }
}
</style>