<script setup lang="ts">
import { onMounted } from 'vue'
import { NConfigProvider } from 'naive-ui'
import { NaiveProvider } from '@/components/common'
import { useTheme } from '@/hooks/useTheme'
import { useLanguage } from '@/hooks/useLanguage'
import { getCustomStyle } from '@/api/system/customStyle'
import type { CustomStyle } from '@/api/system/customStyle'

const { theme, themeOverrides } = useTheme()
const { language } = useLanguage()

// 注入自定义 CSS/JS
onMounted(async () => {
  try {
    const res = await getCustomStyle<CustomStyle>()
    if (res.code === 0 && res.data) {
      if (res.data.css) {
        const style = document.createElement('style')
        style.id = 'sun-panel-custom-css'
        style.textContent = res.data.css
        document.head.appendChild(style)
      }
      if (res.data.js) {
        const script = document.createElement('script')
        script.id = 'sun-panel-custom-js'
        script.textContent = res.data.js
        document.body.appendChild(script)
      }
    }
  }
  catch {}
})
</script>

<template>
  <NConfigProvider
    class="h-full"
    :theme="theme"
    :theme-overrides="themeOverrides"
    :locale="language"
  >
    <NaiveProvider>
      <RouterView />
    </NaiveProvider>
  </NConfigProvider>
</template>
