<template>
        <div v-if="HasAuth" id="navbar" class="navbar navbar-fixed-top">
        <div v-if="HasAuth" style="display:none;" id="noNetwork" class="network fade in"><div><i class="fa fa-warning">重新连接中...</i></div></div>
        <div v-if="HasAuth" class="navbar-inner">
            <div class="navbar-container">
                <!-- 全局参数 -->
                <input type="hidden" id="AppFullName" v-bind:value="AppFullName">

                <!-- Sidebar Collapse -->
                <div class="sidebar-collapse pull-left">
                    <a class="dropdown-toggle" data-toggle="dropdown" title="系统应用" href="javascript:void(0);">
                        <i class="collapse-icon glyphicon glyphicon-th"></i>
                    </a>
                    <ul class="pull-left dropdown-menu subsystem-menu">
                        <li>

                            <div class="clearfix" style="padding: 5px;">
                                <template v-for="item in App">
                                    <a class="subsystem text-center" v-bind:href="item.ApplicationUrl" target="_blank">
                                    <span class="clearfix">
                                        <template v-if="!item.ApplicationIcon"><img  style="width:55px;height:55px;" /></template>
                                        <template v-else>
                                            <img v-bind:src="ResourcePath + item.ApplicationIcon" style="width:55px;height:55px;" />
                                        </template>

                                    </span>
                                        <span><small>{{item.ApplicationName}}</small></span>
                                    </a>
                                </template>
                            </div>

                        </li>
                    </ul>
                </div>
                <!-- /Sidebar Collapse -->
                <!-- Navbar Barnd -->
                <div class="navbar-header ">
                    <a href="javascript:void(0);" class="navbar-brand hidden-xs">
                        <small style="padding-left:5px;">
                            {{AppFullName}}
                        </small>
                    </a>
                </div>
                <!-- /Navbar Barnd -->
                <div class="navbar-header ">

                    <!--配置三级菜单-->
                    <template v-if="SiderData.MenuGroup && SiderData.MenuGroup.length>0">

                        <div class="visible-lg" id="bs-example-navbar-collapse-1">
                            <ul id="pcmenu" class="nav navbar-nav navbar-right">
                                <template v-for="(mge,index) in SiderData.MenuGroup">
                                    <li v-bind:class="index==0?'active':''">
                                        <a v-bind:id="mge.GroupId" class="menu-group" href="javascript:void(0);"  v-on:click="changeMenu(mge.GroupId)">{{mge.GroupName}}</a>
                                    </li>
                                </template>
                            </ul>
                        </div>

                    </template>

                    <!--未配置三级菜单-->
                    <template v-else>
                        <!--菜单配置为顶级显示-->
                        <template v-if="MenuType==1">
                            <ul  class="nav navbar-nav navbar-left visible-lg" >
                                <template v-for="item in SiderData.Menu">
                                    <li class="menu-floor-1" v-bind:id="item.MenuId">
                                        <a href="javascript:void(0)" class="menu-dropdown menu-group top-menu" data-toggle="dropdown">
                                            <!--<i class="menu-icon fa fa-table"></i>-->
                                            {{item.FullName}}<i class="fa fa-caret-down" aria-hidden="true" style="padding-left: 5px;"></i>
                                            <!--<i class="menu-expand"></i>-->
                                        </a>

                                        <ul class="submenu dropdown-menu top-sub-menu" style="overflow-y: auto;max-height: 800px">
                                            <template v-for="subitem in item.childList">
                                                <li class="vue-menu" v-bind:id="subitem.MenuId">
                                                    <a v-bind:href="(subitem.NavigateUrl ==null || subitem.NavigateUrl =='')?'':(SubApplication + subitem.NavigateUrl) + (subitem.NavigateUrl.indexOf('?')==-1?'?':'&') +'mid=' + subitem.MenuId"><span class="menu-text"> {{subitem.FullName}} </span></a>
                                                </li>
                                            </template>
                                        </ul>
                                    </li>
                                </template>
                            </ul>
                        </template>
                    </template>

                </div>
                <!-- Account Area and Settings --->
                <Account v-bind:info="this" v-on:subMenuChange="subMenuChange"></Account>
                <!-- /Account Area and Settings -->
            </div>
        </div></div>
</template>
<style>
   .network {
        width: 100%;
        position: fixed;
        z-index: 999;
        text-align: center;
        color: #4f4f4f;
    }
    .network div{
        width: 300px;
        background: antiquewhite;
        margin: 0 auto
    }
</style>
<script>

    import Account from './Account.vue'
    export default {
        data () {
console.dir(this.SiderData)
            if(!this.HasAuth)
                return {
                    AppFullName:'',
                    App:"",
                }
            var ret;

            getDataSync(FrameHost+"/Spa/GetNavbar?ApplicationID="+window.ApplicationID, "get", { }, function (result) {

                if (result.state == "1") {
                        ret = result.data;
                }

            },null,function (result) {
                ret = "[]";
            });
            var retJson =  JSON.parse(ret);

            if(retJson && retJson.hasOwnProperty("AppFullName") == false){
                window.location.href=window.ResourcePath+"/Content/html/Error401.html";
            }
            retJson.ResourcePath = window.ResourcePath;
            return retJson;
        },
        props: ['HasAuth','SiderData'],
        components:{
            "Account":Account
        },
        methods:{
            subMenuChange:function (groupid) {
                this.$emit("subMenuChange",groupid);
            },
            changeMenu:function (groupid,notClick) {
                this.$nextTick(function () {
                    $("#pcmenu").find("li").each(function () {
                        $(this).removeClass("active");
                    });
                    var menuName = $("#"+groupid).text();
                    $("#mobileMenu").find(".user-name").text(menuName)
                    $("#"+groupid).closest("li").addClass("active")
                });

                this.$emit("subMenuChange",groupid,notClick);
            }
        }
    }
</script>

<style>

</style>
