<template>
    <a-dropdown class="lang header-item">
        <div><a-icon type="global" /> {{ langAlias }}</div>
        <a-menu @click="changeLang" :selected-keys="[lang]" slot="overlay">
            <a-menu-item v-for="lang in langList" :key="lang.key">
                {{ lang.key.toLowerCase() + ' ' + lang.name }}
            </a-menu-item>
        </a-menu>
    </a-dropdown>
</template>

<script>
import langUtils from '@/utils/langUtils';

export default {
    name: 'LayoutTopHeaderLang',
    data() {
        return {
            langList: langUtils.langList,
            lang: langUtils.get(),
        };
    },
    computed: {
        langAlias() {
            const lang = this.langList.find(item => item.key == this.lang);
            return lang.alias;
        },
    },
    methods: {
        change(langKey) {
            this.$i18n.locale = langKey;
            this.lang = langKey;
            langUtils.set(langKey);
        },
    },
};
</script>
