<template>
	<div>
		<div>
			<Navbar/>
		</div>
		<AppMain />
	</div>
</template>

<script setup>
import variables from "@/assets/styles/variables.module.scss";
import originElementPlus from "element-plus/theme-chalk/index.css";
import { useWindowSize } from "@vueuse/core";
import { AppMain, Navbar } from "./components";
import MobileNavbar from "@/views/mobile/components/navbar";
import { toggleTheme } from "@/utils/index";
import useCurrencyConfig from "@/hooks/useCurrencyConfig"; // hook

const store = useStore();
const route = useRoute();
const theme = computed(() => store.state.settings.theme);
const sideTheme = computed(() => store.state.settings.sideTheme);
const sidebar = computed(() => store.state.app.sidebar);
const device = computed(() => store.state.app.device);
const needTagsView = computed(() => store.state.settings.tagsView);
const fixedHeader = computed(() => store.state.settings.fixedHeader);
const { proxy } = getCurrentInstance();
let timer;

const classObj = computed(() => ({
  hideSidebar: !sidebar.value.opened,
  openSidebar: sidebar.value.opened,
  withoutAnimation: sidebar.value.withoutAnimation,
  mobile: device.value === "mobile",
}));

const appMainClassObj = computed(() => ({
  showNavBar: store.state.data.showNavBar && route.path != `/index`,
}));

const { width, height } = useWindowSize();
const WIDTH = 780; // refer to Bootstrap's responsive design

watchEffect(() => {
  if (device.value === "mobile" && sidebar.value.opened) {
    store.dispatch("app/closeSideBar", { withoutAnimation: false });
  }
  if (width.value - 1 < WIDTH) {
    store.dispatch("app/toggleDevice", "mobile");
	proxy.$store.state.app.sidebar.opened = false;
    store.dispatch("app/closeSideBar", { withoutAnimation: true });
  } else {
	proxy.$store.state.app.sidebar.opened = true;    
    store.dispatch("app/toggleDevice", "desktop");
  }
});

function handleClickOutside() {
  store.dispatch("app/closeSideBar", { withoutAnimation: false });
}

const settingRef = ref(null);
function setLayout() {
  settingRef.value.openSetting();
}

function setDarkTheme() {
  store.dispatch("settings/changeSetting", {
    key: "sideTheme",
    value: "theme-dark",
  });
  toggleTheme("dark");
  let messageHello = store.state.app.device === "mobile" ? "晚上好😀，" : "";
  proxy.$modal.notify(
    messageHello + "请注意合理安排休息哦！",
    "晚上好😀",
    "bottom-right"
  );
}

// toggleTheme("light");
let nightTime = proxy.parseTime(
  new Date(),
  `${proxy.parseTime(new Date(), "{y}/{m}/{d}")} 18:00:00`
);

let timeToNight = new Date(proxy.parseTime(nightTime)) - new Date();

// if (timeToNight < 0) {
//   setDarkTheme();
// } else {
//   timer = setTimeout(() => {
//     setDarkTheme();
//   }, timeToNight);
// }

useCurrencyConfig();
</script>

<style lang="scss" scoped>
@import "@/assets/styles/mixin.scss";
@import "@/assets/styles/variables.module.scss";

.app-wrapper {
  @include clearfix;
  position: relative;
  // height: 100%;
  width: 100%;

  &.mobile.openSidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    background-color: var(--van-background);
  }
}

.drawer-bg {
  background: #000;
  opacity: 0.3;
  width: 100%;
  top: 0;
  height: 100%;
  position: absolute;
  z-index: 999;
}

.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: calc(100% - #{$base-sidebar-width});
  transition: width 0.28s;
}

.hideSidebar .fixed-header {
  width: calc(100% - 54px);
}

.sidebarHide .fixed-header {
  width: 100%;
}

.mobile .fixed-header {
  width: 100%;
}
</style>