<template>
    <div class="navbar">
        <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />

        <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav" />
        <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" />

        <div class="right-menu">
            <template v-if="device !== 'mobile'">
                <langSelect id="lang-select" class="right-menu-item hover-effect" />
                <size-select class="right-menu-item hover-effect" />
            </template>

            <el-dropdown class="avatar-container right-menu-item hover-effect">
                <div class="avatar-wrapper">
                    <img class="avatar" :src="avatar" />
                    <span class="name">{{ name }}</span>
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </div>
                <el-dropdown-menu slot="dropdown">
                    <router-link to="/user/profile">
                        <el-dropdown-item>{{ $t('navbar.personalCenter') }}</el-dropdown-item>
                    </router-link>
                    <el-dropdown-item @click.native="setting = true">
                        <span>{{ $t('navbar.layoutSetting') }}</span>
                    </el-dropdown-item>
                    <el-dropdown-item divided @click.native="logout">
                        <span>{{ $t('navbar.logout') }}</span>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import Breadcrumb from '@/components/Breadcrumb';
import TopNav from '@/components/TopNav';
import Hamburger from '@/components/Hamburger';
import SizeSelect from '@/components/SizeSelect';
import langSelect from '@/layout/components/langSelect';

export default {
    components: {
        Breadcrumb,
        TopNav,
        Hamburger,
        SizeSelect,
        langSelect,
    },
    computed: {
        ...mapGetters(['sidebar', 'avatar', 'name', 'device']),
        setting: {
            get() {
                return this.$store.state.settings.showSettings;
            },
            set(val) {
                this.$store.dispatch('settings/changeSetting', {
                    key: 'showSettings',
                    value: val,
                });
            },
        },
        topNav: {
            get() {
                return this.$store.state.settings.topNav;
            },
        },
    },
    methods: {
        toggleSideBar() {
            this.$store.dispatch('app/toggleSideBar');
        },
        async logout() {
            this.$confirm(this.$t('login.989807-31'), this.$t('login.989807-32'), {
                confirmButtonText: this.$t('confirm'),
                cancelButtonText: this.$t('cancel'),
                type: 'warning',
            })
                .then(() => {
                    this.$store.dispatch('LogOut').then(() => {
                        location.href = '/index';
                    });
                })
                .catch(() => {});
        },
    },
};
</script>

<style lang="scss" scoped>
.navbar {
    height: 50px;
    overflow: hidden;
    position: relative;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

    .hamburger-container {
        line-height: 46px;
        height: 100%;
        float: left;
        cursor: pointer;
        transition: background 0.3s;
        -webkit-tap-highlight-color: transparent;

        &:hover {
            background: rgba(0, 0, 0, 0.025);
        }
    }

    .breadcrumb-container {
        float: left;
    }

    .topmenu-container {
        position: absolute;
        left: 50px;
    }

    .errLog-container {
        display: inline-block;
        vertical-align: top;
    }

    .right-menu {
        float: right;
        height: 100%;
        line-height: 50px;

        &:focus {
            outline: none;
        }

        .right-menu-item {
            display: inline-block;
            padding: 0 8px;
            height: 100%;
            vertical-align: text-bottom;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #606266;
            text-align: left;
            font-style: normal;

            &.hover-effect {
                cursor: pointer;
                transition: background 0.3s;

                &:hover {
                    background: rgba(0, 0, 0, 0.025);
                }
            }
        }

        .avatar-container {
            margin-right: 20px;

            .avatar-wrapper {
                font-size: 14px;
                cursor: pointer;
                display: flex;
                flex-direction: row;
                align-items: center;

                .avatar {
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                }

                .name {
                    margin-left: 6px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 14px;
                    color: #606266;
                    text-align: left;
                    font-style: normal;
                }
            }
        }
    }
}
</style>
