<template>
        <el-menu default-active="$route.path"
                 :class="collapsed?'logo-collapse-width':'logo-width'"
                 background-color="#26384c"
                 text-color="#fff"
                 active-text-color="#ffd04b"
                 style="overflow-y:scroll;border-right:none;"
                 @open="handleopen"
                 @close="handleclose"
                 @select="handleselect"
                 unique-opened
                 router
                 :collapse="collapsed">
            <!--                 class="el-menu-vertical-demo"-->

            <!--            <el-radio-group v-model="collapsed" style="margin-left: 200px;">-->
<!--                <el-radio-button :label="false">展开</el-radio-button>-->
<!--                <el-radio-button :label="true">收起</el-radio-button>-->
<!--            </el-radio-group>-->

            <div align="center" style="height: 66px;line-height: 66px;">
<!--                <img id="logo" src="~@/assets/logo1.png">-->
                <h1 id="logo-text" style="color:white;display: inline-block;font-weight: 600;font-size: 15px;line-height: 50px"> &nbsp; &nbsp;物流信息平台</h1>
            </div>
            <template v-for="(item,index) in menu">
                <el-submenu :index="index+''" v-if="item.hasChild">
                    <template slot="title">
                        <i :class="item.iconCls"></i>
                        <span slot="title" class="my-el-menu-item">{{item.name}}</span>
                    </template>
                    <el-menu-item v-for="child in item.children"
                                  :index="child.path"
                                  :key="child.permissionId"
                                  v-if="!child.hidden"
                                  class="el-submenu__title">
                        {{child.name}}
                    </el-menu-item>
                </el-submenu>
                <el-menu-item v-if="!item.hasChild" :index="item.path">
                    <i :class="item.iconCls"></i>
                    <span slot="title" class="my-el-menu-item">{{item.name}}</span>
                </el-menu-item>
            </template>
        </el-menu>
</template>

<script>
    import {userMenu} from '@/api/perm_api';
    import {mapActions, mapGetters} from 'vuex'
    import ChangeIcon from './ChangeIcon'
    export default {
        name: 'NavMenus',
        props:['collapsed'],
        components:{ChangeIcon},
        data() {
            return {
                rotate:false,
                menu:[]
            }
        },
        methods: {
            initMenu:function(){
                if (this.getUserMenuStore.length > 0){
                    this.menu = this.getUserMenuStore;
                }else {
                    this.getUserMenu();
                }
            },
            ...mapActions( // 语法糖
                ['setUserMenuStore'] // 相当于this.$store.dispatch('modifyName'),提交这个方法
            ),
            start(){
                this.rotate=!this.rotate;
            },
            collapse:function(){
                this.collapsed=!this.collapsed;
            },
            onSubmit() {
                console.log('submit!');
            },
            handleopen() {
                console.log('handleopen');
            },
            handleclose() {
                console.log('handleclose');
            },
            handleselect: function (a, b) {
                this.reload()
            },
            showMenu(i,status){
                this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-'+i)[0].style.display=status?'block':'none';
            },
            getUserMenu:function(){
                const _this=this;
                const para={
                    userId:JSON.parse(sessionStorage.getItem('user')).userId
                };
                userMenu(para).then((res) => {
                    console.log("ce"+res.data);
                    _this.menu = res.data.data;
                    this.setUserMenuStore(_this.menu);
                }).catch((error) => {
                    if(null!= error.response && error.response!==undefined){
                        let status= error.response.status;
                        let msg = error.response.statusText;
                        _this.$message({
                            //  饿了么的消息弹窗组件
                            message: msg,
                            type: "error"
                        });
                    }else {
                        _this.$message({
                            //  饿了么的消息弹窗组件
                            message: error,
                            type: "error"
                        });
                    }
                });
            },
            reload() {
                this.$nextTick(function () {
                    this.$router.push({
                        path: this.$router.path,
                        query:{
                            t: new Date().getTime()
                        }
                    })
                })
            },
            changeIcon: function () {
                this.$nextTick(function(){
                    let doms = document.getElementsByClassName('el-submenu__icon-arrow el-icon-arrow-down');
                    if (doms && doms.length>0){
                        let domArr = Array.from(doms)
                        domArr.forEach(function (item,index) {
                            item.className = "el-submenu__icon-arrow el-icon-caret-bottom";
                        })
                    }
                })
            }
        },
        computed: {
            ...mapGetters(['getUserMenuStore']) // 动态计算属性，相当于this.$store.getters.resturantName
        },
        mounted() {
        },
        created() {
            this.initMenu();
        },
        watch: {
            menu(value) {
                this.$nextTick(function(){
                    this.changeIcon();
                })
            }
        }
    }
</script>
<style>
    .my-el-menu-item{
        color:#bcbfc5;
    }
</style>
<style lang="scss">

</style>
<style scoped lang="scss">
    .go{
        transform:rotate(-180deg);
    }
    .el-menu-vertical-demo{
        position: relative;
    }
    .tools{
        position:absolute;

    }
    .logo-width{
    }
    .logo-collapse-width{
        width:90px;

    }
    /*el-submenu__title:hover {*/
    /*    background-color: #4f6273;*/
    /*    border-left: 3px solid #be1fd9*/

    /*}*/
    /*.el-submenu:hover {*/
    /*    border-left: 25px solid #be1fd9;*/

    /*}*/
    .el-submenu__title:hover {
        border-left: 23px solid #be1fd9
    }
</style>