// lang/index.js
import Vue from "vue"
import ElementUI from "element-ui"
import VueI18n from "vue-i18n"
// elment-ui 
import locale from "element-ui/lib/locale"
import zhLocale from "element-ui/lib/locale/lang/zh-CN"
import enLocale from "element-ui/lib/locale/lang/en"
// 自己的多语言文件
import zh from "./zh"
import en from "./en"

Vue.use(VueI18n)

const messages = {
    "zh-CN": {
        ...zh,
        ...zhLocale,
    },
    "en": {
        ...en,
        ...enLocale,
    }
}

const i18n = new VueI18n({
    messages,
    fallbackLocale: "zh-CN", // 匹配不到时默认的语言
    silentTranslationWarn: true,  // 控制台的warning
    locale: localStorage.getItem("browserLanguage") || "zh-CN", // set locale
})

locale.use(ElementUI, {
    i18n: (key, value) => i18n.t(key, value),
})

// *** 
// 非 vue 文件中使用这个方法
const translate = (localeKey) => {
    const locale = localStorage.getItem("language") || "zh-CN"
    const hasKey = i18n.te(localeKey, locale)  // 使用i18n的 te 方法来检查是否能够匹配到对应键值
    const translatedStr = i18n.t(localeKey) 
    if (hasKey) {
        return translatedStr
    }
    return localeKey
}

export { messages, translate }
export default i18n