<script setup lang="ts">
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { useWindowSize } from '@vueuse/core'
import settings from '@/settings'
import { useConfigStore } from '@/stores/modules/config'
import { useSettingStore } from '@/stores/modules/setting'

const { width } = useWindowSize()
const configStore = useConfigStore()
const settingStore = useSettingStore()

const watermarkText = computed(() => {
  if (!settingStore.showWatermark) return ''
  if (settingStore.watermarkText) return settingStore.watermarkText
  return configStore.config?.site_name || settings.title || ''
})

watch(
  () => width.value,
  (newWidth: number) => {
    if (newWidth < 768) {
      configStore.toggleWindowSizeLevel(1)
    } else if (newWidth < 1024) {
      configStore.toggleWindowSizeLevel(2)
    } else {
      configStore.toggleWindowSizeLevel(0)
    }
  },
  { immediate: true }
)

watch(
  () => settingStore.fontSize,
  (newSize) => {
    document.documentElement.style.setProperty('--el-font-size-extra-small', `${newSize * 0.75}px`)
    document.documentElement.style.setProperty('--el-font-size-small', `${newSize * 0.8125}px`)
    document.documentElement.style.setProperty('--el-font-size-base', `${newSize * 0.875}px`)
    document.documentElement.style.setProperty('--el-font-size-medium', `${newSize}px`)
    document.documentElement.style.setProperty('--el-font-size-large', `${newSize * 1.125}px`)
    document.documentElement.style.setProperty('--el-font-size-extra-large', `${newSize * 1.25}px`)
  },
  { immediate: true }
)
</script>

<template>
  <el-watermark :content="watermarkText" :z-index="9999">
    <el-config-provider :locale="zhCn" :z-index="3000">
      <router-view />
    </el-config-provider>
  </el-watermark>
</template>
