<template>
    <a-dropdown class="lang header-item">
        <div><a-icon type="global" /> {{ langAlias }}</div>
        <a-menu @click="change" :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 { setUserInfoByRequest } from '@/utils';
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: {
        async change({ key }) {
            langUtils.set(key);
            await setUserInfoByRequest();
            window.location.reload();
        },
    },
};
</script>
