<template>
    <a-dropdown>
        <div class="tw-inline-flex tw-cursor-pointer tw-items-center">
            <a-avatar class="tw-mr-3" size="small" shape="circle" :src="userAvatar" />
            <span>{{ userInfo.userName }}</span>
        </div>
        <a-menu style="width: 150px" slot="overlay">
            <a-menu-item @click="toUserCenter">
                <a-icon type="user" />
                <span>{{ profile }}</span>
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item @click="logout">
                <a-icon class="tw-mr-2" type="poweroff" />
                <span>{{ loginOut }}</span>
            </a-menu-item>
        </a-menu>
    </a-dropdown>
</template>

<script>
import { mapState } from 'vuex';
import { logout } from '@/pages/frame/services/accountService';
import layoutTopHeaderI18n from './i18n';

export default {
    name: 'LayoutTopHeaderAvatar',
    i18n: layoutTopHeaderI18n,
    computed: {
        ...mapState(['userInfo']),
        userAvatar() {
            return this.userInfo.userAvatar ? `${this.$fileUrl}${this.userInfo.userAvatar}` : null;
        },
        profile() {
            return this.$t('profile');
        },
        setting() {
            return this.$t('setting');
        },
        loginOut() {
            return this.$t('loginOut');
        },
    },
    mounted() {
        this.$store.dispatch('getUserInfo');
    },
    methods: {
        logout() {
            logout();
            this.$router.push('/login');
        },
        toUserCenter() {
            this.$router.push('/user_center');
        },
    },
};
</script>
