<script setup lang="ts">
import { ID_INJECTION_KEY, ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { useAppStore } from './stores/app'
import 'virtual:svg-icons-register'
import { useDark } from '@vueuse/core'
import settings from '~/settings'
import { setThemeColor } from './utils/util'

provide(ID_INJECTION_KEY, {
  prefix: 100,
  current: 0
})
const config = {
  locale: zhCn
}
const appStore = useAppStore()
const headOptions = {
  title: appStore.config?.web_title || '',
  meta: [
    { name: 'description', content: appStore.config?.web_description || '' },
    { name: 'keywords', content: appStore.config?.web_keywords || '' }
  ],
  link: [
    {
      rel: 'icon',
      href: appStore.config.web_logo
    }
  ],
  script: []
}
useHead(headOptions)
setThemeColor(settings.theme, useDark().value ? 'dark' : 'light')
</script>

<template>
  <ElConfigProvider v-bind="config">
    <NuxtLayout>
      <NuxtLoadingIndicator :color="settings.theme" :height="2" />
      <NuxtPage />
    </NuxtLayout>
  </ElConfigProvider>
</template>
