<script setup lang="ts">
import { RouterView } from "vue-router";
import { useFullscreen, useFavicon, useTitle } from "@vueuse/core";
import zhCn from 'element-plus/dist/locale/zh-cn'
import FitScreen from "@fit-screen/vue";
import { NMessageProvider } from "naive-ui";
import { useUserStore } from "@/stores/modules/user";
import { NConfigProvider } from 'naive-ui'
import { zhCN as NZhCN, dateZhCN } from 'naive-ui'
// 全屏
const fitscreenRef = ref<HTMLElement | null>(null);
const { toggle } = useFullscreen(fitscreenRef);
// console.log(RouterView)
provide("fullscreen", { toggle });
// const screenWidth = window.screen.width;
// const screenHeight = window.screen.height;
const screenWidth = 1920
const screenHeight =1080
const store = useUserStore();
store.getUser();
console.log(screenWidth,screenHeight)
const route = useRoute(); // 获取当前的路由信息

const pageClass = computed(() => {
  // console.log(route.name)
  // if (navigator.userAgent.match(/iPad|Android Tablet/i)) {
  //   // 这是一个平板设备
  //   console.log("平板",navigator.userAgent)
  // } else {
  //     // 这不是一个平板设备
  //     console.log("电脑")
  // }
  // 根据路由信息返回不同的页面类名
  if (route.name === "Entry") {
    return "bg-#fff"; // 假设关于页的类名为 page-about
  }
  else if(route.name==='DataBase'){
    return 'bg-#fff'
  }
  else if (route.name === "ExternalLogin"||route.name === "Login") {
    return "bg-#f3f3f3"; // 假设关于页的类名为 page-about
  }
  return "page"; // 默认类名
});

const locale = computed(() => zhCn)
</script>

<template>
  <NMessageProvider>
    <FitScreen
      ref="fitscreenRef"
      :width="screenWidth"
      :height="screenHeight"
      mode="fit"
      :class="pageClass"
    >
    <n-config-provider :locale="NZhCN" :date-locale="dateZhCN">
      <el-config-provider :locale="locale">
        <RouterView />
      </el-config-provider>
    </n-config-provider>
    </FitScreen>
  </NMessageProvider>
</template>

<style scoped lang="less">
.page {

  background-image: url('@/assets/images/bg.jpg');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
}
.pages{
  background-color: #fff;
}
.pagess{
  background-color: #f3f3f3;
}

</style>
