<template>
  <el-watermark :font="font"
    :content="content"
    class="wm-class">
    <router-view />
  </el-watermark>
  <back-to-up />
</template>

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

const content = computed(() => {
  return useUserStore().userInfo.nickName + ' ' + useUserStore().userInfo.phone
})
const isDark = computed(() => {
  return useSettingsStore().isDark
})
const font = reactive({
  color: 'rgba(0, 0, 0, .15)',
})
watch(
  isDark,
  () => {
    font.color = isDark.value
      ? 'rgba(255, 255, 255, 0.15)'
      : 'rgba(0, 0, 0, .15)'
  },
  {
    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>
