<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import Header from "./components/Header.vue";
import Sider from "./components/Sider.vue";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  FullscreenExitOutlined,
} from "@ant-design/icons-vue";
import { useEventListener } from "@vueuse/core";
import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper'

const __POWERED_BY_QIANKUN__ = computed(() => {
  return qiankunWindow.__POWERED_BY_QIANKUN__ || window.proxy?.__POWERED_BY_QIANKUN__
})

// const userInfoStore = useUserInfoStore();
const isCollapsed = ref(false);
const isFullscreen = ref(false);
const container = ref<HTMLDivElement>();

onMounted(() => {
  // userInfoStore.fetchUserInfo();
});

useEventListener(window, "fullscreenchange", () => {
  isFullscreen.value = !!document.fullscreenElement;
});

const handleFullscreen = () => {
  if (container.value) {
    container.value.requestFullscreen();
  }
};
const handleExitFullscreen = () => {
  document.exitFullscreen?.();
};
</script>

<template>
  <section v-if="!__POWERED_BY_QIANKUN__" class="root">
    <section
      class="left-aside"
      :class="{ 'left-aside-collapsed': isCollapsed }"
    >
      <Sider :inlineCollapsed="isCollapsed" />
      <div class="collapsed-icon">
        <component
          :is="isCollapsed ? MenuUnfoldOutlined : MenuFoldOutlined"
          @click="isCollapsed = !isCollapsed"
        />
      </div>
    </section>
    <section
      class="container"
      :class="{
        'container-fullscreen': isFullscreen,
        'container-collapsed': isCollapsed,
      }"
      ref="container"
    >
      <header class="header">
        <Header @requestFullscreen="handleFullscreen" />
      </header>
      <div class="i-container">
        <router-view />
      </div>
      <a-float-button @click="handleExitFullscreen" v-if="isFullscreen">
        <template #icon>
          <FullscreenExitOutlined />
        </template>
      </a-float-button>
    </section>
  </section>
  <router-view v-else />
</template>

<style lang="less" scoped>
@header-height: 60px;
@aside-width: 220px;
@aside-width-collapsed: 60px;
@header-margin: 12px;

.root {
  height: 100%;
  .header {
    height: @header-height;
    position: fixed;
    width: calc(100% - 220px);
    z-index: 1;
    top: 0;
  }
  .left-aside {
    width: @aside-width;
    position: fixed;
    left: 0;
    z-index: 1;
    height: 100vh;
    overflow-y: hidden;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    background-color: #fff;
    transition: width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
    .collapsed-icon {
      flex-shrink: 0;
      display: flex;
      justify-content: center;
      margin-bottom: 8px;
      font-size: 18px;
    }
  }
  .container {
    padding-left: @aside-width;
    padding-top: @header-height + @header-margin;
    height: calc(100% - @header-height - @header-margin);
    position: relative;
    background-color: #f8f8f8;
    transition: padding 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
    margin-right: 8px;
  }
  .container-collapsed {
    padding-left: @aside-width-collapsed + 8px;
  }
  .container-fullscreen {
    padding: 0;
    height: 100%;
  }
  :deep(
      :where(.css-dev-only-do-not-override-1hsjdkk).ant-menu-inline-collapsed
    ),
  .left-aside-collapsed {
    width: @aside-width-collapsed;
  }
}
</style>
