<template>
    <Row class="layout-header">
        <Col :span="12" class="layout-header-left">
            <div class="title">
                <i class="iconfont icon-alignjustify" aria-hidden="true" @click="$emit('menu-trigger')"></i>
                <span v-if="!showLoading" class="name">{{userInfo.currentShop.shopName}}</span>
            </div>
            <ul class="notice">
                <li><span>|<a href="/rules.pdf" target="_blank">平台规则</a></span></li>
                <li><span>|<a href="/user-guide.pdf" target="_blank">使用手册</a></span></li>
                <li><span>|</span></li>
            </ul>
        </Col>
        <Col :span="12" class="layout-header-right">
            <span>你好，{{userInfo.name}}</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 'services/user/user-service';

export default {
    name: 'layout-user-info',
    data() {
        return {
            userInfo: this.$user,
            showLoading: false
        };
    },
    created() {
        this.userService = new UserService();
    },
    methods: {
        logout() {
            Vue.logout();
        },
        switchShop(id) {
            if (this.userInfo.currentShop.shopsId !== id) {
                this.showLoading = true;
                this.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;
    }

    .layout-header-right {
        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;
        }
    }

    .layout-header-left {
        .title {
            float: left;
        }

        .notice {
            float: left;
            margin-left: 30px;

            li {
                float: left;
                font-size: 15px;
            }

            span {
                color: #ccc;
            }

            a {
                color: #444;
                margin-left: 10px;
                margin-right: 10px;
            }
        }
    }
}
</style>