<template>
  <template v-if="!isInWhiteList">
    <el-watermark :font="font"
      :content="content"
      class="wm-class">
      <router-view />
    </el-watermark>
  </template>
  <template v-else>
    <router-view />
  </template>
  <back-to-up />
</template>

<script setup>
import useSettingsStore from '@/store/modules/settings'
import { handleThemeStyle } from '@/utils/theme'
import useUserStore from '@/store/modules/user'
import { isWhiteList } from '@/permission'

const route = useRoute()
const isInWhiteList = computed(() => isWhiteList(route.path))

const content = computed(() => {
  return useUserStore().userInfo.nickName + ' ' + useUserStore().userInfo.phone
})
const isDark = computed(() => {
  return useSettingsStore().isDark
})
const font = reactive({
  color: 'rgba(0, 0, 0, .05)',
})
watch(
  isDark,
  () => {
    font.color = isDark.value
      ? 'rgba(255, 255, 255, 0.05)'
      : 'rgba(0, 0, 0, .05)'
  },
  {
    immediate: true,
  }
)

onMounted(() => {
  nextTick(() => {
    // 初始化主题样式
    handleThemeStyle(useSettingsStore().theme)
  })
})
</script>

<style scoped
  lang="scss">
  .wm-class {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
