<script setup lang="ts">
import { RouterView } from 'vue-router'
import type { GlobalThemeOverrides } from 'naive-ui'
import { darkTheme, NMessageProvider, zhCN, dateZhCN } from 'naive-ui'
import Message from '@/components/Message/index.vue'
import Notification from '@/components/Notification/index.vue'

const themeOverrides: GlobalThemeOverrides = {
  common: {
    primaryColor: '#48a8f5',
    primaryColorPressed: '#3771e1',
    fontSize: '16px',
  },
  DataTable: {
    thColor: '#257bb5',
    tdColor: '#0000',
    tdColorStriped: 'rgba(37,123,181,0.3)',
    tdColorHover: 'rgba(37,123,181,0.6)',
    thColorModal: '#257bb5',
    tdColorModal: '#0000',
    tdColorStripedModal: 'rgba(37,123,181,0.3)',
    tdColorHoverModal: 'rgba(37,123,181,0.3)',
  },
}
</script>

<template>
  <n-config-provider
    :theme-overrides="themeOverrides"
    class="h-full w-full"
    :theme="darkTheme"
    :locale="zhCN"
    :date-locale="dateZhCN"
  >
    <!-- <n-theme-editor> -->
    <n-message-provider>
      <message />
    </n-message-provider>
    <n-notification-provider placement="top" :max="10">
      <notification />
    </n-notification-provider>
    <n-dialog-provider> <router-view /></n-dialog-provider>
    <!-- </n-message-provider> -->
    <!-- </n-theme-editor> -->
  </n-config-provider>
</template>

<style lang="scss" scoped></style>
