<template>
  <div ref="app" :class="classObj" style="height:100%">
    <van-config-provider theme="dark" :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 { getCurrentInstance } from '@vue/runtime-core';
import { nextTick } from 'vue'
const store = useStore();
// const theme = computed(() => store.state.settings.theme);
const currentInstance = getCurrentInstance()
const classObj = computed(() => ({
  mobile: store.state.app.device == 'mobile',
  desktop: store.state.app.device == 'desktop'
}))
watch(() => store.state.data.tabbarActive, (newValue, oldValue) => {
  store.state.data.tabbarPageScrollTop[oldValue] = currentInstance.ctx.$refs.app.scrollTop;
  nextTick(() => {
    currentInstance.ctx.$refs.app.scrollTo(
      0,
      store.state.data.tabbarPageScrollTop[newValue]
    );
  });
})
</script>


<style>

</style>