<template>
    <div class="Navside">
        <div class="logoContainer">
            <img src="../assets/img/nav/logo.png" height="40" width="180"/>
        </div>
        <div class="userContainer">
            <img src="../assets/img/nav/head.png" height="51" width="51"/>
            <span>{{ShopName}}</span>
            <em>{{userLevelText}}</em>
        </div>
        <el-row :class="[{'shortnav':isCollapse},{'longNav':!isCollapse}]">
            <el-col :span="24">
                <el-menu
                        :default-active="userLevelDeafult"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                        @select="handleSelect"
                        background-color="#ffffff"
                        text-color="#777777"
                        active-text-color="#fff"
                        router
                >
                    <el-menu-item :index="nav.clmid" :route="nav.clmurl" v-for="nav in navs" v-if="nav.show == userLevel">
                        <i :class="nav.icon"></i>
                        <span slot="title">{{nav.clmname}}</span>
                    </el-menu-item>
                </el-menu>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    import Navs from '../api/Navs';
    import {ManagerSelfQuery} from '../api/getApiRes.js'
    import {ShopListQuery} from "../api/getApiRes";

    let qs = require('qs');
    export default {
        data() {
            return {
                wildState: 0,
                navs: [],
                ShopName: '',
                userLevelText: '',
                userLevel: 0,
                userLevelDeafult: "",
            }
        },
        props: ['isCollapse'],
        mounted() {
            this.userLevelDeafult = this.$route.meta.clmid;
            this.getTableQuery();
            this.getManagerSelfQuery();

        },
        methods: {
            handleSelect(i, s, t) {
                // this.$emit('TabsAdd', i);//触发事件
            },
            getTableQuery() {
                // 菜单
                this.navs = Navs;
            },
            getManagerSelfQuery(){
                let that = this;
                let param = {
                token: localStorage.token,
                };
                let postdata = qs.stringify(param);
                ManagerSelfQuery(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.userLevelText = json.Rs.Role.Name;
                        // 1 会员 2 系统 3 店铺
                        that.userLevel = json.Rs.Role.Id;
                        localStorage.shopId = json.Rs.ShopId;
                        this.panelSelect(json.Rs.ShopId);
                    } else {
                        if(json.Code == 1010){
                            that.$message.error(json.Memo);
                            that.$router.push({path: '/login', query: {status: 1}});
                            return false
                        }
                        that.$message.error(json.Memo);
                    }
                })
            },
            // 获取所属店铺
            panelSelect(ShopId){
                let that = this;
                let param = {
                    token: localStorage.token,
                };
                let postdata = qs.stringify(param);
                ShopListQuery(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                       json.Rs.map(function (item) {
                            if(item.ShopID ==  ShopId){
                                that.ShopName = item.ShopName;
                                console.log(item.ShopName);
                            }
                       })
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
            handleOpen(key, keyPath) {
                // console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                // console.log(key, keyPath);
            },
        },
        watch: {
            $route(to,from){
              this.userLevelDeafult = to.meta.clmid
            },
        },
    }
</script>
<style scoped>
    /*注释*/
    .Navside {
        width: 100%;
        height: 910px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        /*overflow-y: scroll;*/
        overflow-y: hidden;
        background-color: #fff;
        z-index: 4444;
    }
    .logoContainer {
        width: 256px;
        height: 72px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: #3799FF;
    }
    .logoContainer img {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 1px;
    }
    .userContainer {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-bottom: 16px;
        padding-top: 19px;
        padding-bottom: 19px;
        border-bottom: 1px solid #F0F2F5;
        background: #fff;
    }
    .userContainer img {
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-bottom: 16px;
    }
    .userContainer span {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        color: #565656;
        font-size: 16px;
    }
    .userContainer em {
        width: 125px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        color: #fff;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: #E75296;
        border-radius: 250px;
        font-style: normal;
        margin-top: 8px;
    }
    /deep/ .el-menu {
        border: none;
    }
    /deep/ .el-menu-item {
    }
    /deep/ .el-menu-item span {
        text-align: left;
        float: left;
        margin-left: 70px;
    }
    /deep/ .el-menu-item.is-active {
        background-color:#3799FF!important;
        color: #fff!important;
    }
    /deep/ .el-menu-item:hover {
        background-color:#3799FF!important;
        color: #fff!important;
    }
    /deep/ .el-menu-item:hover i {
        color: #fff!important;
    }
    /deep/ .el-menu-item i{
        position: relative;
        float: left;
        line-height: 55px;
        left: 60px;
    }

</style>
