<template>
  <el-config-provider :locale="elLocale">
    <router-view />
  </el-config-provider>
</template>

<script setup>
import useSettingsStore from '@/store/modules/settings';
import { handleThemeStyle } from '@/utils/theme';
import { ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import en from 'element-plus/es/locale/lang/en';
import vi from 'element-plus/es/locale/lang/vi';

const { locale } = useI18n();

const elLocaleMap = { 'zh-CN': zhCn, 'en': en, 'vi': vi };
const elLocale = ref(elLocaleMap[locale.value] || zhCn);

watch(locale, (newLocale) => {
  elLocale.value = elLocaleMap[newLocale] || zhCn;
});

onMounted(() => {
  nextTick(() => {
    handleThemeStyle(useSettingsStore().theme);
  });
});
</script>
