<script setup lang="tsx">
import { computed, onMounted } from 'vue';
import type { WatermarkProps } from 'naive-ui';
import { useAppStore } from './store/modules/app';
import { useThemeStore } from './store/modules/theme';
import { naiveDateLocales, naiveLocales } from './locales/naive';
import { NConfigProvider, darkTheme, NButton, NImage, NSpace, NTag, useMessage, useNotification, NDropdown, NRow, NCol, NEllipsis } from 'naive-ui';

// 视频地址
// export const videdUrl = 'ws://192.168.1.221:9999';
// 固定接口地址
// export const apiUrl = 'http://192.168.1.120:9995';
// WS 地址
// export const wsUrl = 'ws://192.168.1.120:9995';


defineOptions({
  name: 'App'
});

// const notification = useNotification();

const options = [
  {
    label: '暂停提醒',
    key: '1'
  },
  {
    label: '继续提醒',
    key: '2'
  }
];

const handleSelect = (key: string) => {
  console.log(key);
};

const appStore = useAppStore();
const themeStore = useThemeStore();

const naiveDarkTheme = computed(() => (themeStore.darkMode ? darkTheme : undefined));

const naiveLocale = computed(() => {
  return naiveLocales[appStore.locale];
});

const naiveDateLocale = computed(() => {
  return naiveDateLocales[appStore.locale];
});

const watermarkProps = computed<WatermarkProps>(() => {
  return {
    content: themeStore.watermark?.text || 'SoybeanAdmin',
    cross: true,
    fullscreen: true,
    fontSize: 16,
    lineHeight: 16,
    width: 384,
    height: 384,
    xOffset: 12,
    yOffset: 60,
    rotate: -15,
    zIndex: 9999
  };
});
</script>

<template>
  <NConfigProvider :theme="naiveDarkTheme" :theme-overrides="themeStore.naiveTheme" :locale="naiveLocale"
    :date-locale="naiveDateLocale" class="h-full">
    <AppProvider>
      <RouterView class="bg-layout" />
      <NWatermark v-if="themeStore.watermark?.visible" v-bind="watermarkProps" />
    </AppProvider>
  </NConfigProvider>
</template>

<style scoped></style>
