<template>
  <template v-if="shouldShowWatermark">
    <el-watermark :font="font"
      :content="content"
      class="wm-class"
      :class="{'wm-mobile-class': isMobile}">
      <router-view />
    </el-watermark>
  </template>
  <template v-else>
    <router-view />
  </template>
</template>

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

const route = useRoute()

/*************** 水印相关 *************** */
const isInWhiteList = computed(() => isWhiteList(route.path))

const isInFeishu = computed(() => {
  const userAgent = navigator.userAgent.toLowerCase()
  // 检测飞书用户代理标识
  return userAgent.includes('lark') || userAgent.includes('feishu')
})

const shouldShowWatermark = computed(() => {
  // 既不在飞书也不在白名单则显示水印
  return !isInWhiteList.value && !isInFeishu.value
})

// 水印显示内容
const content = computed(() => {
  return useUserStore().userInfo.nickName + ' ' + useUserStore().userInfo.phonenumber?.substring(7)
})

// 水印字体，暗黑模式切换水印文字颜色
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 {
    min-height: 100%;
    height: 100%;
  }

  .wm-mobile-class{
    min-height: 100%;
    height: auto;
  }
</style>
