/**
* author: Louie Butch
* date: 2020/12/14
* email: 844089357@qq.com
* desc:
*/
<template>
<div class="hd-head">
    <div class="head-left-box">
        <div class="system-title" :style="{width: !isCollapse ? titleWidth + 'px' : '44px'}">
            <el-tooltip content="采购供应链系统" placement="right" :disabled="!isCollapse">
                <hd-icon :icon-name="systemIconName" color="#ffffff" :size="18"></hd-icon>
            </el-tooltip>
            <span class="system-name" v-if="!isCollapse">{{systemName}}</span>
        </div>

        <div class="collapse-btn">
            <el-button type="primary"
                       @click="isCollapse = !isCollapse"
                       size="small" style="font-size: 18px">
                <hd-icon :icon-name="isCollapse ? 'hd-icon-unfold' : 'hd-icon-fold'" color="#ffffff" :size="18"></hd-icon>
            </el-button>
        </div>

        <slot></slot>
    </div>
    <div class="head-right-box">
        <span class="login-name">{{userName}}</span>
        <span class="login-out" @click="$emit('loginOut')">退出登录</span>
    </div>
</div>
</template>

<script>
import hdIcon from '../../hdIcon/src/hdIcon';
export default {
    name: 'hd-head',
    components: {
        hdIcon
    },
    props: {
        systemIconName: {
            type: String,
            default: ''
        },
        systemName: {
            type: String,
            default: ''
        },
        value: {
            type: Boolean,
            default: false
        },
        titleWidth: {
            type: Number,
            default: 160
        },
        userName: {
            type: '',
            default: ''
        }
    },
    watch: {
        value(val) {
            this.isCollapse = val;
        },
        isCollapse(val) {
            this.$emit('input', val);
        }
    },
    data(){
        return {
            isCollapse: false
        }
    }
};
</script>

<style scoped lang="scss">
    .hd-head {
        width: calc(100% - 40px);
        padding: 0 20px;
        height: 40px;
        background-color: #096db6;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #ffffff;

        .head-left-box {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .system-title {
                font-size: 16px;
                line-height: 16px;
                width: 160px;

                .system-name {
                    margin-left: 8px;
                    line-height: 16px;
                }
            }
        }

        .head-right-box {
            line-height: 14px;

            .login-name {
                font-size: 14px;
                margin-right: 24px;
            }

            .login-out {
                font-size: 12px;
                cursor: pointer;
            }
        }
    }
</style>