<script setup lang="ts">
import useSettingsStore from './settings/useSettingsStore'
import Header from './layout/header'
import Background from './layout/background'
import GLobalModal from './GlobalModal'
import SettingsButton from './settings/SettingsButton'
import SettingsOverlay from './settings/SettingsOverlay'
import Sider from './layout/sider'
import Dock from './layout/dock'
import DirModal from './layout/grid/DirModal'
import GlobalMenu from './layout/GlobalMenu'
import LoginModal from './user/LoginModal'
import { computed } from 'vue'
import asyncLoader from './utils/asyncLoader'
import useLayoutStore from './layout/useLayoutStore'
import WelcomePage from './layout/grid/WelcomePage'
import TomatoPage from './layout/grid/TomatoPage'
import useRouterStore from './useRouterStore'
import BackupRecovery from './user/BackupRecovery'
const Grid = asyncLoader(() => import('./layout/grid'))
const Fox = asyncLoader(() => import('./fox'))
const settings = useSettingsStore()
const blockSize = computed(() => settings.state.blockSize + 'rem')
const blockPadding = computed(() => settings.state.blockPadding + 'rem')
const mainWidth = computed(() => settings.state.mainWidth + '%')
const blockRadius = computed(() => settings.state.blockRadius)
const router = useRouterStore()
const layout = useLayoutStore()
</script>
<template>
  <div class="fixed left-0 top-0 w-full h-screen style-root" @contextmenu.prevent>
    <Header />
    <Background />
    <GLobalModal />
    <SettingsOverlay />
    <SettingsButton />

    <Sider
      v-if="
        !layout.state.simple ||
        (layout.state.simple && settings.state.simpleModeShowString.includes('showSider'))
      "
    />
    <LoginModal v-if="router.path === 'global-login'" />
    <Transition>
      <Grid v-if="layout.ready && !layout.state.simple" />
    </Transition>
    <Dock
      v-if="
        !layout.state.simple ||
        (layout.state.simple && settings.state.simpleModeShowString.includes('showDock'))
      "
    />
    <div
      class="fixed z-40 right-[14%] top-8"
      v-if="
        !layout.state.simple ||
        (layout.state.simple && settings.state.simpleModeShowString.includes('showPet'))
      "
    >
      <Fox />
    </div>
    <DirModal />
    <GlobalMenu />
    <WelcomePage></WelcomePage>
    <TomatoPage></TomatoPage>

    <BackupRecovery v-if="router.path === 'global-backup'"></BackupRecovery>
  </div>
</template>

<style lang="less">
.style-root {
  --block-size: 5.2rem;
  --block-padding: 1rem;
  --main-width: 95%;
  --block-radius: 0.2;

  //   以下是响应式设计, 绑定 settings 中的尺寸
  @media screen and (min-width: 68px) {
    /* 768px 之上，尺寸可以独自设计 */
    --block-size: v-bind(blockSize);
    --block-padding: v-bind(blockPadding);
    --main-width: v-bind(mainWidth);
    --block-radius: v-bind(blockRadius);
  }
}
</style>
