<template>
  <el-config-provider :size="globalComSize" :locale="currentLocale">
    <router-view v-if="isRouterAlive"></router-view>
  </el-config-provider>
</template>

<script lang="ts" setup>
  import { computed, provide, nextTick, onMounted, ref, getCurrentInstance } from 'vue'
  import zhCn from 'element-plus/es/locale/lang/zh-cn'
  import en from 'element-plus/es/locale/lang/en'
  import { useSettingStore } from '@/store/modules/setting'
  import Pigeon from './lib/pigeon.js'
  import Session from './lib/session.js'
  import { useStore } from 'vuex'

  const store = useStore()
  // 切换语言
  const currentLocale = computed(() => {
    return store.state.home.locale === 'cn' ? zhCn : en
  })

  let isRouterAlive = ref(true)
  const SettingStore = useSettingStore()
  // 配置全局组件大小
  const globalComSize = computed((): string => SettingStore.themeConfig.globalComSize)
  const reload = () => {
    isRouterAlive.value = false
    nextTick(function () {
      isRouterAlive.value = true
    })
  }
  const { proxy } = getCurrentInstance()
  // 注册全局弹窗组件
  const $pigeon = new Pigeon(proxy)
  provide('reload', reload)
  provide('pigeon', $pigeon)
  provide('session', Session)

  onMounted(() => {
    window.document.documentElement.setAttribute('data-theme', 'theme1')
  })
</script>

<style lang="scss">
  #app {
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
      '微软雅黑', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    width: 100%;
    height: 100%;
    min-width: 1080px;
    overflow: hidden;
    overflow-x: auto;
    font-size: 12px;
  }
</style>
