<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'
import VScaleScreen from 'v-scale-screen'
import img from '@/assets/images/bg.jpg'
// 全屏
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
// console.log('🚀 ~ screenWidth:', screenWidth)
// console.log('🚀 ~ screenHeight:', screenHeight)
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 pageStyle = computed(() => {
	// 根据路由信息返回不同的页面样式
	if (route.name === 'Entry') {
		return { 'background-color': '#fff !important' } // 假设关于页的类名为 page-about
	} else if (route.name === 'DataBase') {
		return { 'background-color': '#fff !important' }
	} else if (route.name === 'ExternalLogin' || route.name === 'Login') {
		return { 'background-color': '#f3f3f3 !important' } // 假设关于页的类名为 page-about
	}
	return {
		'background-image': `url(${img}) !important`,
		'background-position': '0 0',
		'background-repeat': 'no-repeat',
		'background-size': 'cover'
	} // 默认类名
})

const locale = computed(() => zhCn)

const scaleChange = ({
	widthRatio,
	heightRatio
}: {
	widthRatio: number
	heightRatio: number
}) => {
	console.log('scaleChange', widthRatio, heightRatio)
}
const beforeCalculate = (scale) => {
	console.log('🚀 ~ scale:', scale)
	return false
}
// ref="fitscreenRef"
// :width="screenWidth"
// :height="screenHeight"
// mode="fit"
// :class="pageClass"
// executeMode="debounce"
// waitTime="300"
// @scaleChange="scaleChange"
// :beforeCalculate="beforeCalculate"
</script>

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

<style scoped lang="less">
.fit-screen {
	text-rendering: optimizeLegibility !important;
}
.page,
.v-screen-box {
	// background-image: url('@/assets/images/bg.jpg') !important;
	// background-position: 0 0;
	// background-repeat: no-repeat;
	// background-size: cover;
}
.pages {
	background-color: #fff;
}
.pagess {
	background-color: #f3f3f3;
}
</style>
