<template>
    <Row class="layout-header">
        <Col :span="12" class="brand-title">
            <i class="iconfont icon-alignjustify" aria-hidden="true" @click="$emit('menu-trigger')"></i>
            {{userInfo.name}}
        </Col>
        <Col :span="12" class="shop-info">
            <span v-if="!showLoading" class="name">{{userInfo.currentShop.shopName}}</span>
            <span v-if="showLoading" class="loading">切换中...</span>
            <span>|</span>
            <Dropdown @on-click="switchShop" trigger="click">
                <a class="swtich-shop" href="javascript:void(0)">
                    [切换店铺]
                </a>
                <Dropdown-menu slot="list">
                    <Dropdown-item v-for="shop in userInfo.shops" :key="shop.shopsId" :name="shop.shopsId" :selected="userInfo.currentShop.shopsId === shop.shopsId">{{shop.shopName}}</Dropdown-item>
                </Dropdown-menu>
            </Dropdown>
            <a class="logout" href="javascript:;" @click="logout">[退出]</a>
        </Col>
    </Row>
</template>

<script>
import Vue from 'vue';
import userService from 'user-service';

export default {
    name: 'UserInfo',
    data() {
        return {
            userInfo: this.$user,
            showLoading: false
        };
    },
    methods: {
        logout() {
            Vue.logout();
        },
        switchShop(id) {
            if (this.userInfo.currentShop.shopsId !== id) {
                this.showLoading = true;
                userService.switchShop(id).then(res => {
                    this.showLoading = false;
                    if (res.code === 200) {
                        this.userInfo.currentShop = this.userInfo.shops.find(shop => shop.shopsId === id);
                        Vue.switchShop(id);
                        this.$emit('shop-change', this.userInfo.currentShop);
                        this.$Message.success(`当前店铺切换为：${this.userInfo.currentShop.shopName}`);
                    } else {
                        this.$Message.error(`切换失败：${res.message}`);
                    }
                });
            }
        }
    }
};
</script>

<style lang="scss">
.layout-header {
    height: 50px !important;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    font-size: 14px;
    line-height: 20px;
    padding: 15px;
    position: relative;

    &.user-collapse {
        height: 0 !important;
        padding: 0 !important;
        overflow: hidden;

        .fa-bars {
            position: absolute;
            color: #000;
        }
    }

    &.print-hide {
        display: none;
    }

    .fa {
        font-size: 20px;
        vertical-align: middle;
        margin-right: 10px;
        cursor: pointer;
    }

    .shop-info {
        text-align: right;
        padding-right: 20px;

        .name {
            margin-right: 5px;
        }

        .loading {
            color: #ccc;
        }

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

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