<template>
    <a-dropdown class="lang header-item">
        <div><a-icon type="global" /> {{ langAlias }}</div>
        <a-menu @click="val => setLang(val.key)" :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 { mapState, mapMutations } from 'vuex';
import { globalConfig } from '@/config';

export default {
    name: 'LayoutTopHeaderLang',
    data() {
        return {
            langList: globalConfig.langs,
        };
    },
    computed: {
        ...mapState('settingModule', ['lang']),
        langAlias() {
            let lang = this.langList.find(item => item.key == this.lang);
            return lang.alias;
        },
    },
    methods: {
        ...mapMutations('settingModule', ['setLang']),

    },
};
</script>
