<template>
  <!-- 水印 -->
  <el-watermark id="watermark" :font="font" :content="watermark ? 'Admin Template' : ''">
    <component :is="LayoutComponents[layout]" />
    <ThemeDrawer />
  </el-watermark>
</template>

<script setup>
  import { computed, reactive, watch } from 'vue';
  import { useGlobalStore } from '@/stores/modules/global';
  import ThemeDrawer from './components/ThemeDrawer/index.vue';
  import LayoutVertical from './LayoutVertical/index.vue';
  import LayoutClassic from './LayoutClassic/index.vue';
  import LayoutTransverse from './LayoutTransverse/index.vue';
  import LayoutColumns from './LayoutColumns/index.vue';

  const LayoutComponents = {
    vertical: LayoutVertical,
    classic: LayoutClassic,
    transverse: LayoutTransverse,
    // columns: LayoutColumns,
  };

  const globalStore = useGlobalStore();

  const isDark = computed(() => globalStore.isDark);
  const layout = computed(() => globalStore.layout);
  const watermark = computed(() => globalStore.watermark);

  const font = reactive({ color: 'rgba(0, 0, 0, .15)' });
  watch(
    isDark,
    () => (font.color = isDark.value ? 'rgba(255, 255, 255, .15)' : 'rgba(0, 0, 0, .15)'),
    {
      immediate: true,
    }
  );
</script>
<style lang="scss" scoped></style>
