<template>
    <div :class="['header', collapsed ? 'collapsed-header' :'']">
        <div class="header-left">
            <a-layout-header style="background: #fff; padding: 0">
                <a-icon
                    class="trigger"
                    :type="collapsed ? 'menu-unfold' : 'menu-fold'"
                    @click="collapsedFlag"
                />
            </a-layout-header>
        </div>
        <div class="header-right">
            <div class="header-top-right-circle" @click="visible = !visible"></div>
            <a-popover id="popover" v-model="visible" placement="bottom" trigger="click">
                <a href="javascript:;">
                    {{
                    userInfo.name ? userInfo.name : "userName"
                    }}
                </a>
                <div class="flex flex-column" :style="{ 'min-width': '78px' }" slot="content">
                    <a
                        class="block mb16"
                        href="javascript:;"
                        @click="visible = false;$router.push({name: 'center'})"
                    >个人中心</a>
                    <a href="javascript:;" @click="logout">退出登录</a>
                </div>
            </a-popover>
        </div>
    </div>
</template>

<script>
import {mapState, mapMutations, mapGetters} from "vuex";
export default {
    name: "PageHeader",
    computed: {
        ...mapState(["aside_collapsed", "userInfo"]),
        ...mapGetters(['getAside_collapsed'])
    },
    watch: {
        getAside_collapsed: function (newValue) {
            console.log(newValue)
            this.collapsed = newValue
        }
    },
    data() {
        return {
            visible: false,
            collapsed:false
        };
    },

    methods: {
        ...mapMutations(["setState"]),
        logout() {
            this.visible = false;
            localStorage.clear();
            sessionStorage.clear();
            this.$axios({
                url: "/app/userCenter",
                method: "GET"
            }).then(res => {
                window.open(res.data.url + "?action=logout", "_self");
            });
        },
        collapsedFlag(){
            // console.log(11111)
            this.collapsed = !this.collapsed
            this.$store.commit('aside_collapsed',this.collapsed);
        }
    }
};
</script>

<style lang="scss">
.header {
    background: #ffffff;
    display:flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    /*border: solid 1px skyblue;*/
    box-shadow: 0px 2px 5px rgba(0, 21, 41, 0.15);
    /*margin-bottom: 2px;*/
    position: fixed;
    top: 0;
    width: calc(100% - 270px);
    &-left{
        .trigger{
            font-size: 18px;
            line-height: 64px;
            padding: 0 24px;
            cursor: pointer;
            transition: color 0.3s;
        }
    }
    &-right {
        display: flex;
        align-items: flex-start;
        padding-right: 20px;
        &-circle {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background-color: #fff;
            margin-right: 8px;
            cursor: pointer;
        }
    }
}
.collapsed-header{
    width: calc(100% - 80px);
}
</style>
