<template>
    <div id="header">
        <div class="left">
            <span class="trigger" @click="toggleCollapsed">
                <i v-if="collapsed" class="el-icon-s-unfold"></i>
                <i v-else class="el-icon-s-fold"></i>
            </span>
            <bread-crump />
        </div>
        <div class="right">
            <div class="out">
                <el-tooltip content="刷新">
                    <img class="out-icon" :src="refreshIcon" alt="" srcset="" @click="refresh">
                </el-tooltip>
                <el-tooltip content="注销">
                    <img class="out-icon" :src="logoutIcon" alt="" srcset="" @click="onLogout">
                </el-tooltip>
            </div>
            <div class="line"></div>
            <img class="avator" :src="avator" alt="" srcset="">
            <span class="name">{{ user && user.name }}</span>
        </div>
    </div>
</template>

<script>
import BreadCrump from './BreadCrump.vue'

import avatorIcon from '@/assets/avator.png'
import refreshIcon from '@/assets/refresh.png'
import logoutIcon from '@/assets/logout.png'

import { auth } from '@/utils/auth';
import { logout } from '@/api/login';

export default {
    components: {
        BreadCrump
    },
    data() {
        return {
            collapsed: false,
            refreshIcon,
            logoutIcon,
        }
    },
    computed: {
        user() {
            return auth.getUserInfo() //this.$store.state.user.user
        },
        avator() {
            // if (this.user && this.user.userInfo && this.user.userInfo.userHeadportrarit) {
            //     return this.user.userInfo.userHeadportrarit
            // }
            return avatorIcon
        }
    },
    methods: {
        toggleCollapsed() {
            this.collapsed = !this.collapsed
            this.$store.dispatch('app/updateCollapsed', this.collapsed)
        },
        onLogout() {
            logout().then(res => {
                auth.logout()
                location.reload()
            });
        },
        refresh() {
            location.reload()
        }
    }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

#header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
        display: flex;
        align-items: center;
        .trigger {
            margin-right: 8px;
            font-size: 18px;
            line-height: $headerHeight;
            cursor: pointer;
            transition: color 0.3s;
        }
        .trigger:hover {
            color: #1890ff;
        }
    }
    .right {
        display: flex;
        align-items: center;
        .avator {
            width: 24px;
            height: 24px;
            border-radius: 100%;
        }
        .name {
            margin-left: 5px;
            font-weight: bold;
        }
        .line {
            width: 1px;
            height: 20px;
            background: #E4E8EA;
            margin: 0 20px;
        }
        .out {
            // padding: 0 8px;
            display: flex;
            align-items: center;
            &-icon {
                // font-size: 20px;
                // color: rgb(165, 42, 42);
                cursor: pointer;
                width: 48px;
                height: 48px;
            }
        }
    }
}
</style>