<template>
  <n-config-provider
    :theme-overrides="store.state.themeOverrides"
    :theme="store.theme === 'dark' ? darkTheme : null"
    :locale="zhCN"
    :date-locale="dateZhCN"
    style="height: 100%"
  >
    <n-loading-bar-provider>
      <n-dialog-provider>
        <SideBar />
        <MainLayout />
      </n-dialog-provider>
    </n-loading-bar-provider>
  </n-config-provider>
</template>

<script setup>
import { darkTheme, zhCN, dateZhCN } from "naive-ui";
import { computed, onBeforeUnmount, onMounted, getCurrentInstance,onBeforeMount,reactive,watch } from "vue";
import { DeviceType } from "@/types/store";
import { useLayoutStore } from "@/components/skeleton/index.js";
import autofit from "autofit.js";
import { Session, Local } from "@/utils/storage.js";
import SideBar from '@/components/skeleton/sidebar/SideBar.vue'
import MainLayout from '@/components/skeleton/MainLayout.vue'
const store = useLayoutStore();
const isShowHeader = computed(() => store?.isShowHeader());
const state = reactive({
  ResolutionRatio: false,
});
onMounted(() => {
  handleScreenResize();
  window.addEventListener("resize", handleScreenResize);
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", handleScreenResize);
});
onBeforeMount(() => {
  getUser();
});
watch(
    () => state.ResolutionRatio,
    (newValue, oldValue) => {
      if (newValue) {
        console.log("newValue", newValue);
        autofit.init({
          dh: 924,
          dw: 1872,
          el: "#app",
          resize: true
        }, false)
      } else {
        autofit.init()
        autofit.off()
      }
    }
);
const currentInstance = getCurrentInstance();
const { $request, $hadRule } =
  currentInstance.appContext.config.globalProperties;
const getUser = async () => {
  $request.HTTP.permission
    .userDetail({ ID: Local.get("userInfo") ? Local.get("userInfo").ID : "" })
    .then((res) => {
      if (res.status == 0) {
        state.ResolutionRatio = res.data.Extend.ResolutionRatio;
      } else {
      }
    })
    .catch((e) => {
    });
};
function handleScreenResize() {
  const width = document.body.clientWidth;
  if (width <= 768) {
    store?.changeDevice(DeviceType.MOBILE);
    store?.toggleCollapse(true);
  } else if (width < 992 && width > 768) {
    store?.changeDevice(DeviceType.PAD);
    store?.toggleCollapse(true);
  } else if (width < 1200 && width >= 992) {
    store?.changeDevice(DeviceType.PC);
    store?.toggleCollapse(false);
  } else {
    store?.changeDevice(DeviceType.PC);
    store?.toggleCollapse(false);
  }
}
function closeMenu() {
  store?.toggleCollapse(true);
}
</script>

<style scoped lang="scss">
@import "@/assets/styles/variables.scss";
.vaw-layout-container {
  height: 100%;
  max-width: 100%;
  overflow-x: hidden;
  .mobile-shadow {
    display: none;
  }
  .layout-mode-ttb {
    margin-top: $logoHeight;
    transition: all $transitionTime;
  }
}
.is-mobile {
  .mobile-shadow {
    background-color: #000000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 997;
  }
  .close-shadow {
    display: none;
  }
  .show-shadow {
    display: block;
    opacity: 0.5;
    transition: all $transitionTime;
  }
}
</style>
