<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>

<style lang="less">

</style>
