<template>
    <Row class="layout-header">
        <Col :span="12" class="brand-title">{{userInfo.name}}</Col>
        <Col :span="12" class="shop-info">
            <span class="name">{{userInfo.currentShop.shopName}}</span>
            <span>|</span>
            <Dropdown @on-click="switchShop">
                <a class="swtich-shop" href="javascript:void(0)">
                    [切换店铺]
                </a>
                <Dropdown-menu slot="list">
                    <Dropdown-item v-for="shop in userInfo.shops" :key="shop.id" :name="shop.id">{{shop.shopName}}</Dropdown-item>
                </Dropdown-menu>
            </Dropdown>
            <a class="logout" href="javascript:;" @click="logout">[退出]</a>
        </Col>
    </Row>
</template>

<script>
import Vue from 'vue';

export default {
    name: 'user-info',
    data() {
        return {
            userInfo: this.$user
        };
    },
    created() {
    },
    methods: {
        logout() {
            Vue.logout();
        },
        switchShop(shop) {
            console.log(shop)
        }
    }
};
</script>

<style lang="scss">
.layout-header {
    height: 60px !important;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    font-size: 14px;
    line-height: 20px;
    padding: 20px;
    
    .shop-info {
        text-align: right;
        padding-right: 20px;

        .name {
            margin-right: 5px;
        }

        .swtich-shop {
            margin-left: 5px;
            font-size: 12px;
            color: #444;
        }

        .logout {
            color: #F44545;
            font-size: 12px;
            margin-left: 5px;
        }
    }
}
</style>