<template>
  <div ref="app" :class="classObj" style="height: 100%">
    <van-config-provider theme="light" :theme-vars="themeVars" style="height: 100%">
      <router-view />
    </van-config-provider>
  </div>
</template>

<script setup>
import themeVars from "@/assets/styles/vant-light.module.scss";
import { nextTick, watch } from "vue";
import { useWindowSize } from "@vueuse/core";
import { toggleTheme } from "@/utils/index";

const store = useStore();
const route = useRoute();
const router = useRouter();
const currentInstance = getCurrentInstance();
const classObj = computed(() => ({
  mobile: store.state.app.device == "mobile",
  desktop: store.state.app.device == "desktop",
  "theme-dark": store.state.settings.sideTheme == "theme-dark",
  "theme-light": store.state.settings.sideTheme == "theme-light",
}));
watch(
  () => store.state.data.tabbarActive,
  (newValue, oldValue) => {
    store.state.data.tabbarPageScrollTop[oldValue] =
      currentInstance.ctx.$refs.app.scrollTop;
  }
);

watch(
  () => router.currentRoute.value,
  (newValue, oldValue) => {
    console.log(newValue);
    if (store.state.app.device == "mobile") {
      if (newValue.path != "/index") {
        console.log("离开首页");
        store.state.data.tabbarPageScrollTop[store.state.data.tabbarActive] =
          currentInstance.ctx.$refs.app.scrollTop;
      }
      if (newValue.path == "/index" && newValue.path == oldValue.path) {
        console.log("tab 切换");
        currentInstance.ctx.$refs.app.scrollTo(
          0,
          store.state.data.tabbarPageScrollTop[store.state.data.tabbarActive]
        );
      } else if (newValue.path == "/index" && newValue.path != oldValue.path) {
        console.log("进入首页");
        // store.state.data.showNavBar = false;
        store.state.data.tabbarActive =
          newValue.query.tab === undefined ? 0 : Number(newValue.query.tab);
        currentInstance.ctx.$refs.app.scrollTo(
          0,
          store.state.data.tabbarPageScrollTop[store.state.data.tabbarActive]
        );
      } else {
        currentInstance.ctx.$refs.app.scrollTo(0, 0);
      }
    }
  }
);

const { width, height } = useWindowSize();

const WIDTH = 992; // refer to Bootstrap's responsive design

watchEffect(() => {
  if (width.value - 1 < WIDTH) {
    store.dispatch("app/toggleDevice", "mobile");
  } else {
    store.dispatch("app/toggleDevice", "desktop");
  }
});

toggleTheme("light");
</script>


<style>
</style>