<template>
  <Loading />
  <el-config-provider :namespace="ns.elNamespace" :locale="i18nLocale" :button="config" :size="layout.elementPlusSize">
    <router-view v-slot="{ Component }">
      <component :is="Component" />
    </router-view>
  </el-config-provider>
</template>

<script setup lang="ts" name="App">
import { reactive, computed, provide } from "vue";
import { storeToRefs } from "pinia";
import { ElConfigProvider } from "element-plus";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import en from "element-plus/es/locale/lang/en";
import { LanguageEnum } from "@/common/enums";
import { GlobalConfigKey, serviceConfig } from "@/common/config";
import { isFunction } from "@/common/utils";
import { useNamespace, useWatchCssVar, useTheme } from "@/composables";
import { useSettingStore, useLayoutStore } from "@/pinia";
import { useIFrame } from "@/layout/components/iframe/use-iframe";
import Loading from "@/layout/components/loading/index.vue";

const ns = useNamespace();

const settingStore = useSettingStore();
const layoutStore = useLayoutStore();

const { layout } = storeToRefs(settingStore);
const { language } = storeToRefs(layoutStore);

// 自定义注入全局参数。ElConfigProvider 会自动使用 provide 全局注入它的 props 到项目里，可以通过 configProviderContextKey 来 inject 获取（先从 element-plus 引入，然后 const config = inject(configProviderContextKey)）
provide(GlobalConfigKey, { size: computed(() => layout.value.elementPlusSize) });

// 初始化主题配置
useTheme().initTheme();
// 监听布局样式变量
useWatchCssVar();
// IFrame 通信
useIFrame(serviceConfig.layout.watchFrame);

// 配置 element 按钮文字中间是否有空格
const config = reactive({ autoInsertSpace: false });

// element 语言配置
const i18nLocale = computed(() => {
  if (language.value === LanguageEnum.ZhCn) return zhCn;
  if (language.value === LanguageEnum.EnUs) return en;
  return document.documentElement.lang === "zh-CN" ? zhCn : en;
});

if (isFunction(log.success)) log.success(__APP_INFO__.pkg.version, "欢迎使用 Teek Design Vue3 系统");
</script>
