<template>
	<a-config-provider :theme="themeV" :locale="locale">
		<div
			:style="{
				'--ant-primary-color': useAppStore().theme.primaryColor,
				'--vxe-primary-color': useAppStore().theme.primaryColor,
				'--vxe-loading-color': useAppStore().theme.primaryColor,
			}"
		>
			<a-watermark :content="config.layout.waterMark">
				<router-view />
			</a-watermark>
		</div>
	</a-config-provider>
</template>
<script lang="ts" setup>
	import { useAppStore } from '@/stores/app'
	import { theme } from 'ant-design-vue'
	import { config } from './settings/application'
	import { storeToRefs } from 'pinia'
	import { useI18n } from 'vue-i18n'
	import 'dayjs/locale/zh-cn'
	import { messages, setI18nLanguage } from './locales'

	const locale = computed(() => {
		return useAppStore().language === 'zh_CN' ? messages.zh_CN : messages.en_US
	})
	setI18nLanguage(useAppStore().language as 'zh_CN' | 'en_US')
	useI18n().locale.value = useAppStore().language
	const themeV = computed(() => {
		return {
			algorithm: app.layout.value.navTheme === 'real-dark' ? theme.darkAlgorithm : theme.defaultAlgorithm,
			token: {
				colorPrimary: useAppStore().theme.primaryColor,
				borderRadius: 2,
			},
		}
	})

	const app = storeToRefs(useAppStore())
	useTitle(app.isCN.value ? config.title : config.name)
	const colorWeak = computed(() => {
		return app.layout.value.colorWeak
	})
	const gray = computed(() => {
		return app.layout.value.gray
	})
	watch(
		colorWeak,
		(newVal) => {
			const body = document.body
			if (newVal) {
				app.layout.value.gray = false
				body.style.filter = 'invert(80%)'
			} else {
				body.style.removeProperty('filter')
			}
		},
		{ immediate: true },
	)
	watch(
		gray,
		(newVal) => {
			const body = document.body
			if (newVal) {
				app.layout.value.colorWeak = false
				body.style.filter = 'grayscale(0.95)'
			} else {
				body.style.removeProperty('filter')
			}
		},
		{ immediate: true },
	)
</script>
<style lang="css">
	:deep(.ant-btn-link) {
		color: var(--ant-primary-color) !important;
	}
</style>
