import { createApp, watch } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import router from "./router";
import i18n from "./i18n";
import { useLanguageStore } from "./stores/language";
import { ElDialog, ElDrawer, ElIcon, ElInputNumber } from "element-plus";
import "element-plus/dist/index.css";
import "./assets/main.css";

const app = createApp(App);
const pinia = createPinia();

app.use(pinia);
app.use(router);
app.use(i18n);
app.component("ElDialog", ElDialog);
app.component("ElDrawer", ElDrawer);
app.component("ElIcon", ElIcon);
app.component("ElInputNumber", ElInputNumber);

const languageStore = useLanguageStore(pinia);

// 监听 Pinia store 中的 locale 变化，并更新 i18n
watch(
  () => languageStore.locale,
  (newLocale) => {
    i18n.global.locale.value = newLocale;
  },
);

// 初始化时，确保 i18n 的 locale 与 store 同步
i18n.global.locale.value = languageStore.locale;

app.mount("#app");
