<template>
        <el-menu default-active="$route.path"
                 class="el-menu-vertical-demo"
                 background-color="#26384c"
                 text-color="#fff"
                 active-text-color="#ffd04b"
                 style="overflow-y:scroll"
                 @open="handleopen"
                 @close="handleclose"
                 @select="handleselect"
                 unique-opened
                 router
                 :collapse="collapsed">
            <el-radio-group v-model="collapsed" style="margin-bottom: 20px;">
                <el-radio-button :label="false">展开</el-radio-button>
                <el-radio-button :label="true">收起</el-radio-button>
            </el-radio-group>
            <div align="center" style="background-color: #2b2f3a;height: 67px">
                <img src="~@/assets/logo1.png">
                <h1 style="color:white;display: inline-block;font-weight: 600;font-size: 15px;line-height: 50px">航空物流公共信息服务平台</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">{{item.name}}</span>
                    </template>
                    <el-menu-item v-for="child in item.children"
                                  :index="child.path"
                                  :key="child.permissionId"
                                  v-if="!child.hidden">
                        {{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">{{item.name}}</span>
                </el-menu-item>
            </template>
        </el-menu>
</template>

<script>
    import userInfo from '@/api/base';
    import {userMenu} from '@/api/perm_api';
    export default {
        name: 'NavMenus',
        data() {
            return {
                collapsed: false,
                menu:[
                    {
                        permissionId:1,
                        name:'系统设置',
                        permissionOrder:'1',
                        description:'',
                        ismenu:true,
                        hidden:false,
                        parentId:0,
                        path:'/',
                        url:'/',
                        method:'',
                        iconCls:'el-icon-setting',
                        component:'',
                        hasChild:true,
                        children:[
                            {
                                permissionId:2,
                                name:'用户管理',
                                permissionOrder:'1',
                                description:'',
                                ismenu:true,
                                hidden:false,
                                parentId:0,
                                path:'/user',
                                url:'/user/**',
                                method:'',
                                iconCls:'',
                                component:'',
                                children:[]
                            },
                            {
                                permissionId:3,
                                name:'权限管理',
                                permissionOrder:'2',
                                description:'',
                                ismenu:true,
                                hidden:false,
                                parentId:0,
                                path:'/user1',
                                url:'/user/**',
                                method:'',
                                iconCls:'',
                                component:'',
                                children:[]
                            }
                        ]
                    },
                    {
                        permissionId:4,
                        name:'舱单申报',
                        permissionOrder:'1',
                        description:'',
                        ismenu:true,
                        hidden:false,
                        parentId:0,
                        path:'/main',
                        url:'/',
                        method:'',
                        iconCls:'el-icon-setting',
                        component:'',
                        children:[]
                    }
                ]
            }
        },
        methods: {
            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:userInfo.userId
                };
                userMenu(para).then((res) => {
                    console.log("ce"+res.data);
                    _this.menu = res.data.data;
                }).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()
                        }
                    })
                })
            },
        },
        mounted() {
            console.log(userInfo)
            this.getUserMenu();
        }
    }
</script>
<style scoped lang="scss">

</style>
<style>
</style>