<template>
  <el-config-provider
      :size="getGlobalComponentSize"
      :locale="zhCn"
      :message="messageConfig"
      :button="buttonConfig"
  >
    <el-watermark class="h100" :font="config.font" :content="config.content"
                  :z-index="config.zIndex"
                  :rotate="config.rotate"
                  :gap="config.gap"
                  :offset="config.offset">
      <RouterView/>
    </el-watermark>
  </el-config-provider>
</template>
<script setup lang="ts">
import {computed, reactive, watch} from "vue";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import signalR from "@/utils/signalR";
import {RouterView, useRoute} from "vue-router";
import {useTitle} from "@/utils/tools";
//  signalR 初始化signalr
signalR.init();
signalR.joinGroup("BigScreen-DataShow"); //index
signalR.joinGroup("BigScreen-SeatState"); // seat
signalR.joinGroup("BigData-Screen"); // home
// 获取全局组件大小
const getGlobalComponentSize = computed(() => {
  return 'default';
});
// 可同时显示的消息最大数量
const messageConfig = reactive<any>({
  max: 3,
});
// 自动在两个中文字符之间插入空格
const buttonConfig = reactive<any>({
  autoInsertSpace: false,
});
// 水印配置
const config = reactive({
  content: [''],
  font: {
    fontSize: 16,
    color: 'rgba(0,0,0,.15)',
  },
  zIndex: 999999,
  rotate: -22,
  gap: [100, 100] as [number, number],
  offset: [] as unknown as [number, number],
})
const route = useRoute();
// 监听路由的变化，设置网站标题
watch(
    () => route.path,
    () => {
      useTitle();
    },
    {
      deep: true,
    }
);
</script>
