<script setup>
import {zhCN, dateZhCN, darkTheme} from 'naive-ui'
import color from '~/tool/color'
import {isDark} from '~/composables'
import {useStore, useConfig} from '~/store'

const $store = useStore()
const $config = useConfig()
const get_theme_overrides = $computed(() => {
  const app_theme = $config.value.app_theme;
  const lighten_str = color.lighten($config.value.app_theme, 6);
  return {
    common: {
      primaryColor: app_theme,
      primaryColorHover: lighten_str,
      primaryColorSuppl: lighten_str,
      primaryColorPressed: lighten_str,
    },
    LoadingBar: {
      colorLoading: app_theme,
    },
  };
});
</script>
<template>
  <n-config-provider :theme-overrides="get_theme_overrides" :theme="isDark?darkTheme:{}" :locale="zhCN"
                     :date-locale="dateZhCN">
    <n-spin class="spin_wrapper" :show="$store.api_loading > 0">
      <n-notification-provider>
        <n-loading-bar-provider>
          <n-message-provider>
            <n-dialog-provider>
              <Mounting/>
              <main font-sans>
                <router-view/>
              </main>
            </n-dialog-provider>
          </n-message-provider>
        </n-loading-bar-provider>
      </n-notification-provider>
    </n-spin>
  </n-config-provider>
</template>
<style>
.form_tag_wrapper {
  width: 80px;
  text-align: center;
}

.form_input_wrapper {
  width: 200px !important;
}
</style>
