<template>
    <header>
        <div :class="className === 'side' ? 'flex-between' : ''">
            <div class="logo" :style="logoStyle">
                <a href="/">
                    <img src="../../resources/img/logo.png" alt="BI MANAGER LOGO">
                </a>
            </div>
            <div class="user-info flex-end">
                <div class="sms">
                    <svg-icon type="mdi" :path="mdiEmail" color="#213f99"></svg-icon>
                </div>
                <div class="user flex">
                    <div class="user-img">
                        <svg-icon type="mdi" :path="mdiAccountCircle" color="#213f99"></svg-icon>
                    </div>
                    <span class="user-name">000님</span>
                </div>
                <button class="logout-btn">로그아웃</button>
            </div>
        </div>
    </header>
</template>

<script>
import SvgIcon from '@jamescoyle/vue-icon'
import { mdiEmail, mdiAccountCircle } from '@mdi/js'
export default {
    props: {
        className: String
    },
    data() {
        return {
            mdiEmail: mdiEmail,
            mdiAccountCircle: mdiAccountCircle
        }
    },
    methods: {

    },
    watch: {

    },
    computed: {
        logoStyle() {
            if (this.className === 'top') {
                return {
                    position: 'absolute',
                    top:'50%',
                    left:'50%',
                    transform: 'translate(-50%,-50%)'
                }
            } else {
                return {}
            }
        }
    },
    components: {
        'SvgIcon': SvgIcon
    },
    mounted() {
        console.log('Header mounted');
    }
}
</script>