<script lang="ts" setup>
import { dateZhCN, zhCN } from "naive-ui";
import { computed, onMounted, nextTick,inject } from "vue";
import { AppProvider } from "@/components/Application";
import { lighten } from "@/utils/index";
import mouseTrapBind from '@/hooks/event/mouseTrapBind'
const mousetrap = inject('mousetrap') as any
onMounted(()=>{
  mouseTrapBind(mousetrap);
})

const getThemeOverrides = computed(() => {
  const theme = "#1980FF";
  const lightenStr = lighten(theme, 6);

  return {
    common: {
      primaryColor: theme,
      primaryColorHover: lightenStr,
      primaryColorPressed: lightenStr,
      primaryColorSuppl: theme,
    },
    Switch: {
      railColorActive: "#07C984",
    },
    Input: {
      borderHover: "0px",
      borderFocus: "0px",
      boxShadowFocus: "#ff0000",
    },
    Tag: {
      colorCheckedHover: "#507afd",
      colorCheckedPressed: "#507afd",
    },
    Slider: {
      fillColor: "#1980FF",
      dotBorderActive: "#1980FF",
      fillColorHover: "#1980FF",
    },
    Card: {
      padding: "0px",
    },
    Dropdown: {
      optionColorHover: "#e8f2ff",
    },
    Upload: {
      draggerBorder: "1px dashed #1980FF",
      draggerBorderHover: "1px dashed #1980FF",
    },
  };
});


</script>

<template>
  <NConfigProvider
    :locale="zhCN"
    :date-locale="dateZhCN"
    :theme-overrides="getThemeOverrides"
  >
    <AppProvider>
      <RouterView />
    </AppProvider>
  </NConfigProvider>
</template>

<style lang="less">
.n-checkbox .n-checkbox__label {
  color: #666666 !important;
  font-size: 14px !important;
}
.n-checkbox.n-checkbox--disabled .n-checkbox__label {
  color: #c9c9c9 !important;
  font-size: 14px !important;
}
.draggable-ul .draggable-li {
  color: #666666 !important;
  font-size: 14px !important;
}
::v-deep(.n-base-clear > .n-base-clear__clear){
  color: #c9c9c9 !important;
}
</style>
