<template>
  <n-config-provider
    :locale="zhCN"
    :date-locale="dateZhCN"
    :theme="darkTheme"
    :theme-overrides="themeOverrides"
    style="width: 100%; height: 100%"
  >
    <component :is="MainPage" />
  </n-config-provider>
  <m-loader v-if="showLoading" />
</template>

<script lang="ts" setup>
import { computed, onMounted, nextTick, ref } from 'vue'
import EditPage from './view/edit-page.vue'
import ViewPage from './view/view-page.vue'
import store from '@/store'
import {
  darkTheme,
  NConfigProvider,
  GlobalThemeOverrides,
  zhCN,
  dateZhCN,
} from 'naive-ui'

const showLoading = computed(() => store.state.showLoading)
const themeOverrides: GlobalThemeOverrides = {
  common: {
    fontSizeTiny: '.08rem',
    fontSizeSmall: '.1rem',
    fontSize: '.1rem',
    primaryColor: '#2F86EE',
    borderColor: '#2F86EE',
    primaryColorHover: '#2F86EE',
    popoverColor: 'rgba(2,27,53,.6)',
  },
}

// 根据token判断是否编辑模式
const { searchParams } = new URL(window.location.href)
const token = searchParams.get('token')
const MainPage = token ? EditPage : ViewPage

// // TODO 滚动
// const isWideScreen = ref(false)
// onMounted(async () => {
//   await nextTick()
//   const ratio = document.body.offsetWidth / document.body.offsetHeight
//   isWideScreen.value = ratio > 3
// })
</script>

<style lang="stylus">
@font-face
  font-family DIN
  src url(./assets/font/DIN-Medium.otf)
@font-face
  font-family Pangmenzhengdao
  src url(./assets/font/pangmenzhengdao.ttf)
@font-face
  font-family BarlowExtraBold
  src url(./assets/font/Barlow-ExtraBold.ttf)

html, body
  background #000
  font-family DIN, Avenir, Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  width 100%
  height 100%
  user-select none
  font-size 15vh
  line-height 1.5
  p
    margin 0
#app
  width 100%
  height 100%
  overflow hidden
  font-size .1rem
  // background url('/src/assets/images/map.png') center/100% 100% no-repeat
  color #fff
.orange-count
  font-size .14rem
  font-weight bold
  background-clip text
  -webkit-background-clip text
  -webkit-text-fill-color transparent
  background-image linear-gradient(to bottom, #FFD1B2, #FF8635)
  font-family BarlowExtraBold, DIN, Avenir, Helvetica, Arial, sans-serif

/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: .04rem;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background:rgba(91, 213, 255, 0.3)
  -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
  background:rgba(91, 213, 255, 0.3)
}
</style>
