<template>
  <n-config-provider
    :theme-overrides="themeOverrides"
    :locale="zhCN"
    :date-locale="dateZhCN"
  >
    <n-message-provider>
      <div id="main">
        <Main />
      </div>
      <m-loader v-if="showLoading" />
    </n-message-provider>
  </n-config-provider>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import {
  NConfigProvider,
  NMessageProvider,
  GlobalThemeOverrides,
  zhCN,
  dateZhCN,
} from 'naive-ui'
import Main from './view/main.vue'
import store from '@/store'

const showLoading = computed(() => store.state.showLoading)
const themeOverrides: GlobalThemeOverrides = {
  common: {
    primaryColor: '#dd505E',
    fontSize: '0.09rem',
    errorColor: '#E59B00',
  },
  Button: {
    paddingTiny: '.03rem .1rem',
    paddingSmall: '.03rem .16rem',
    borderRadiusSmall: '.05rem',
    textColorHover: '#dd505E',
    textColorPressed: '#dd505E',
    textColorFocus: '#dd505E',
    borderHover: '#dd505E',
    borderPressed: '#dd505E',
    borderFocus: '#dd505E',
    colorHoverPrimary: '#faadbb',
    colorPressedPrimary: '#dd505E',
    colorFocusPrimary: '#dd505E',
    textColorHoverPrimary: '#dd505E',
    borderHoverPrimary: '#dd505E',
    borderPressedPrimary: '#dd505E',
    borderFocusPrimary: '#dd505E',
    colorError: '#faadbb',
    textColorError: '#dd505E',
    borderError: '#dd505E',
    borderHoverError: '#dd505E',
    borderPressedError: '#dd505E',
  },
  Input: {
    borderFocus: '#FCF4F5',
    iconSize: '0.14rem',
  },
  InternalSelection: {
    borderHover: 'dd505E',
  },
  Checkbox: {
    textColor: '#6E798C',
  },
  Card: {
    borderRadius: '.06rem',
  },
  Tag: {
    borderRadius: '.04rem',
    colorPrimary: '#FCF4F5',
    borderPrimary: '#FCF4F5',
    textColorPrimary: '#DD505E',
    colorInfo: '#ECEFFA',
    borderInfo: '#ECEFFA',
    textColorInfo: '#3D7FE9',
    colorSuccess: '#E9F7F0',
    borderSuccess: '#E9F7F0',
    textColorSuccess: '#2BB480',
    colorWarning: '#FFF4E6',
    borderWarning: '#FFF4E6',
    textColorWarning: '#E59B00',
    colorError: '#F5F0F9',
    borderError: '#F5F0F9',
    textColorError: '#AC60CA',
  },
  Message: {
    padding: '.02rem .1rem',
    colorSuccess: '#269D74',
    iconColorSuccess: '#fff',
    textColorSuccess: '#fff',
  },
  Form: {
    feedbackTextColorError: '#E59B00',
    labelTextColor: '#6E798C',
    labelFontSizeTopSmall: '.09rem',
  },
  Menu: {
    borderRadius: '.06rem',
    fontSize: '.13rem',
    itemIconColor: '#b9bdc5',
    itemTextColor: 'rgba(0,0,0,0.5)',
    arrowColor: 'rgba(0,0,0,0.5)',
    itemTextColorHover: '#dd505E',
    itemIconColorHover: '#dd505E',
    arrowColorHover: '#dd505E',
    itemColorActive: '#fcf4f5',
  },
  DataTable: {
    fontSizeSmall: '.01rem',
  },
}
</script>

<style lang="stylus">
@font-face
  font-family DIN
  src url(./assets/font/DIN-Medium.otf)
@font-face
  font-family PingFang
  src url(./assets/font/PingFang.ttf)
@font-face
  font-family PingFangMedium
  src url(./assets/font/PingFangMedium.ttf)

html, body
  background #000
  font-family PingFang, DIN, Avenir, Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  width 100%
  height 100%
  user-select none
  font-size 15.8vh
  line-height 1.5
  overflow hidden
  p
    margin 0
#app
  width 100%
  height 100%
  overflow hidden
  font-size .1rem
  background url('/src/assets/images/background.jpg') center/cover no-repeat
  color #000

/* 设置滚动条的样式 */
::-webkit-scrollbar
  width .04rem

/* 滚动条滑块 */
::-webkit-scrollbar-thumb
  background rgba(221, 80, 94, 0.5)
  -webkit-box-shadow inset006pxrgba(0,0,0,0.5)

::-webkit-scrollbar-thumb:window-inactive
  background rgba(221, 80, 94, 0.5)
</style>
