<template>
  <n-layout
    has-sider
    class="h_screen"
    :class="{ dark: settingsStore.isDark }"
  >
    <n-layout-sider
      style="box-shadow: rgba(100, 100, 111, 0.2) 0 7px 29px 0"
      :bordered="true"
      collapse-mode="width"
      :collapsed-width="64"
      :width="230"
      :collapsed="collapsed"
      @update:collapsed="collapsed = !collapsed"
    >
      <div class="title">
        <transition enter-active-class="animate__animated animate__fadeInLeft">
          <div
            class="flex-center h-f"
            :key="+collapsed"
          >
            <IndexIcon />
            <span
              style="margin-left: 10px"
              v-if="!collapsed"
            >
              {{ platformName }}
            </span>
          </div>
        </transition>
      </div>
      <LeftMenu />
    </n-layout-sider>
    <n-layout class="h-f">
      <n-layout-header
        class="l-header"
        bordered
      >
        <TopHeader v-model:collapsed="collapsed" />
      </n-layout-header>
      <TopTabs class="l-tabs" />
      <n-layout-content class="l-content">
        <router-view v-slot="{ Component, route }">
          <transition
            name="fade-transform"
            mode="out-in"
          >
            <keep-alive :include="cachedViews">
              <component
                :is="Component"
                :key="route.fullPath"
                v-if="isRouterShow"
              />
            </keep-alive>
          </transition>
        </router-view>
      </n-layout-content>
      <n-layout-footer
        bordered
        position="absolute"
        class="l-footer"
        :style="{ background: settingsStore.isDark ? '#1e1e1e' : '#fff' }"
      >
        <div>Copyright © {{ dayjs().year() }} 湖南长沪信息科技有限公司</div>
      </n-layout-footer>
    </n-layout>
  </n-layout>
</template>
<script setup lang="ts">
  import dayjs from "dayjs";
  import { useTabsStore } from "@/stores/tabsStore";
  import { ref, computed, nextTick, provide } from "vue";
  import { useRoute } from "vue-router";
  import LeftMenu from "./components/LeftMenu.vue";
  import TopTabs from "./components/TopTabs.vue";
  import TopHeader from "./components/TopHeader.vue";
  import { useSettingsStore } from "@/stores/settings";

  const settingsStore = useSettingsStore();
  // import { useThemeVars } from "naive-ui";
  // console.log(useThemeVars);

  const tabStore = useTabsStore();
  const route = useRoute();
  const collapsed = ref(false);
  const platformName = "保安可视化管理系统";

  //缓存的组件列表
  const cachedViews = computed(() =>
    tabStore.tabList
      .map((e) => (e.isKeepAlive ? e.name : null))
      .filter((name): name is string => Boolean(name))
  );
  const isRouterShow = ref(true);
  const refreshCurrentPage = () => {
    setTimeout(() => {
      tabStore.changeTabKeepAlive(route.fullPath);
      isRouterShow.value = false;
      nextTick(() => {
        tabStore.changeTabKeepAlive(route.fullPath);
        isRouterShow.value = true;
      });
    }, 0);
  };
  //提供刷新页面方法 其实就是通过v-if显示销毁组件达到刷新页面的功能
  provide("refreshCurrentPage", refreshCurrentPage);
</script>

<style scoped lang="scss">
  .h_screen {
    width: 100vw;
    height: 100vh;

    .title {
      width: 100%;
      height: 50px;
      font-size: 18px;
      font-weight: bold;
    }

    .logo {
      padding: 10px;
    }

    .l-header {
      height: 50px;
    }

    .l-tabs {
      height: 35px;
    }

    .l-content {
      height: calc(100% - 85px);
      padding: 4px 4px 10px;
      min-height: 280px;
      background-color: #f7fafc;
    }

    .l-footer {
      height: 50px;
      margin-top: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      /* background: white; */
    }
  }

  .dark {
    .l-content {
      background-color: black; // 暗黑模式下的背景色，可自定义
    }
  }
</style>
