<template>
    <div class="user_box">
        <div class="user_cont">
            <div class="head_box">
                <img class="head" :src="(user&&user.head)||'/img/head.png'"></img>
                <!-- <div class="head_line"></div> -->
            </div>
            <div class="user_name">{{user&&user.name}} <Icon type="ios-arrow-down" /></div>
            <div class="user_tk_box">
                <div class="user_info_box">
                    <div class="user_logout" @click="logout">
                        退出登录
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    data () {
        return {
        }
    },
    computed: {
        ...mapState({
            user: (state) => state.user, //
        }),
    },
    created () {
    },
    methods: {
        logout () {
            this.$http.post(`/call/api/user/logout`).then((response) => {
                let { code, msg } = response
                if (code === 1) {
                    this.$store.dispatch('logout')
                    this.$forceUpdate()
                } else {
                    this.$Notice.warning({
                        desc: msg
                    })
                }
            })
        },
    },
    deactivated () {
    },
    destroyed () {
    }
}
</script>
<style lang="less" scoped>
.user_box{
    display: flex;
    align-items: center;
    .user_cont{
        position: relative;
        height: 48px;
        background: #FFFFFF;
        border-radius: 32px;
        padding: 0 0 0 11px;
        display: flex;
        align-items: center;
        cursor: pointer;
        .head_box{
            width: 26px;
            height: 26px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            .head{
                width: 26px;
                height: 26px;
                border-radius: 10px;
                object-fit: contain;
            }
            .head_line{
                width: 8px;
                height: 8px;
                background: #65D583;
                position: absolute;
                border-radius: 4px;
                bottom: 0;
                right: 0;
            }
        }
        .user_name{
            font-weight: bold;
            font-size: 16px;
            color: #222222;
            line-height: 24px;
            margin: 0 8px;
            min-width: 120px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .ivu-icon{
                margin-left: 5px;
            }
        }
        .user_tk_box{
            padding-top: 8px;
            display: none;
            position: absolute;
            top: 48px;
            right: 0;
            z-index: 999;
            width: 100%;
        }
        .user_info_box{
            width: 100%;
            background: #FFFFFF;
            box-shadow: 0px 10px 20px 1px rgba(0,0,0,0.05);
            border-radius: 15px;
            padding: 5px 0;
            .user_info{
                display: flex;
                align-items: center;
                height: 79px;
                border-bottom: 1px solid #E8E7ED;
                padding: 0 16px;
                .user_head{
                    width: 40px;
                    height: 40px;
                    border-radius: 20px;
                    object-fit: contain;
                    margin-right: 8px;
                }
                .user_text{
                    .user_name{
                        font-weight: bold;
                        font-size: 14px;
                        color: #222222;
                        line-height: 20px;
                        margin-bottom: 7px;
                    }
                    .user_id{
                        font-weight: bold;
                        font-size: 14px;
                        color: #999999;
                        line-height: 20px;
                    }
                }
            }
            .user_logout{
                height: 44px;
                line-height: 44px;
                font-weight: bold;
                font-size: 14px;
                color: #FF4E4E;
                cursor: pointer;
                padding: 0 12px 0 34px;
                background: url('/img/logout_icon@2x.png') no-repeat left 12px center/20px 20px;
            }
            .user_info_item{
                margin: 10px 12px;
                height: 40px;
                line-height: 40px;
                border-radius: 8px;
                padding-left: 32px;
                font-weight: 400;
                font-size: 14px;
                color: #222222;
            }
            .user_info_item:nth-child(1){
                background: url('/img/user_info_icon11.png') no-repeat left 10px center/20px 20px;
            }
            .user_info_item:nth-child(2){
                background: url('/img/user_info_icon21.png') no-repeat left 10px center/20px 20px;
            }
            .user_info_item:nth-child(3){
                background: url('/img/user_info_icon31.png') no-repeat left 10px center/20px 20px;
            }
            .user_info_item:nth-child(4){
                background: url('/img/user_info_icon41.png') no-repeat left 10px center/20px 20px;
            }
            .user_info_item:hover{
                color: #35E89A;
                &:nth-child(1){
                    background: #FAFAFA url('/img/user_info_icon12.png') no-repeat left 10px center/20px 20px;
                }
                &:nth-child(2){
                    background: #FAFAFA url('/img/user_info_icon22.png') no-repeat left 10px center/20px 20px;
                }
                &:nth-child(3){
                    background: #FAFAFA url('/img/user_info_icon32.png') no-repeat left 10px center/20px 20px;
                }
                &:nth-child(4){
                    background: #FAFAFA url('/img/user_info_icon42.png') no-repeat left 10px center/20px 20px;
                }
            }
        }
    }
    .user_cont:hover{
        .user_tk_box{
            display: block;
        }
    }
}
</style>
