<template>
  <el-config-provider :locale="locale">
    <router-view v-show="themeConfig.lockScreenTime !== 0" />
    <!-- 切换是否锁屏的时候 会自动生成和销毁组件 组件内部有定时器 会计算锁屏的时间 -->
    <LockScreen v-if="themeConfig.isLockScreen" />
    <!-- 设置全局主题的组件 -->
    <ThemeSettings v-show="themeConfig.lockScreenTime !== 0" />
  </el-config-provider>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";
import zhCN from "element-plus/lib/locale/lang/zh-cn";
import enUS from "element-plus/lib/locale/lang/en";
import LockScreen from "@/plugins/lock-screen/index.vue";
import ThemeSettings from "@/plugins/theme-settings/index.vue";
import store from "@/hooks/useStore";

export default defineComponent({
  name: "App",

  setup() {
    const themeConfig = computed(() => {
      return store.state.themeConfig;
    });

    const locale = computed(() => {
      const { globalI18n } = store.state.themeConfig;
      return globalI18n === "zh-cn" ? zhCN : enUS;
    });

    return {
      locale,
      themeConfig,
    };
  },

  components: {
    LockScreen,
    ThemeSettings,
  },
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>
