<template>
    <el-dropdown trigger="click" class="international" @command="handleSetLanguage">
        <div class="avatar-wrapper">
            <el-tooltip :content="$t('message.gjh')" :effect="effect">
                {{ $t('message.language') }}
            </el-tooltip>
        </div>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item :disabled="language === 'zh-CN'" command="zh-CN">
                    中文
                </el-dropdown-item>
                <el-dropdown-item :disabled="language === 'en-KO'" command="en-KO">
                    한국어
                </el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<script setup>
import { createI18n } from 'vue-i18n';
import { useI18n } from 'vue-i18n';
import { defineProps, computed, getCurrentInstance } from 'vue';
// 引入 Pinia 仓库
import { useLanguageStore } from '@/store/modules/language.js';

defineProps({
    effect: {
        type: String,
        default: 'dark',
        validator: function (value) {
            // 这个值必须匹配下列字符串中的一个
            return ['dark', 'light'].includes(value);
        },
    },
});

// 获取 Pinia 仓库实例
const languageStore = useLanguageStore();
// 从 Pinia 仓库中获取 language 状态（直接访问，无需 getters）
const language = computed(() => languageStore.language);

// 切换语言的方法
const i18n = useI18n();
const handleSetLanguage = async lang => {
    i18n.locale.value = lang;
    // 调用 Pinia 仓库的 setLanguage 方法（替代 Vuex 的 commit）
    languageStore.setLanguage(lang);
};
</script>

<style scoped lang="scss">
.avatar-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 8px;
    cursor: pointer;
}
</style>
