<template>
    <div>
        <Navbar v-bind:HasAuth="HasAuth" v-on:subMenuChange="subMenuChange" v-bind:SiderData="this.Data"></Navbar>
        <div class="main-container container-fluid" id="main-container">
            <div class="page-container" id="page-container">
                <template v-if="HasAuth">
                    <div class="page-sidebar sidebar-fixed" id="sidebar">
                        <ul class="nav sidebar-menu">
                            <template v-if="(Data.MenuGroupList==null || Data.MenuGroupList.length==0)">
                                <template v-for="item in Data.Menu">
                                    <li class="" v-bind:id="item.MenuId" v-bind:title="item.Description">
                                        <a href="javascript:void(0)" class="menu-dropdown ">
                                            <i class="menu-icon fa fa-table"></i>
                                            <span class="menu-text"> {{item.FullName}} </span>
                                            <i class="menu-expand"></i>
                                        </a>

                                        <ul class="submenu">
                                            <template v-for="subitem in item.childList">
                                                <li class="vue-menu" v-bind:id="subitem.MenuId" v-bind:title="subitem.Description">
                                                    <a v-bind:href="subitem.NavigateUrl + (subitem.NavigateUrl.indexOf('?')==-1?'?':'&') +'mid=' + subitem.MenuId">
                                                        <span class="menu-text"> {{subitem.FullName}} </span>
                                                    </a>
                                                </li>
                                            </template>

                                        </ul>
                                    </li>
                                </template>
                            </template>
                            <template v-else>
                                <template v-for="item in Data.MenuGroup">
                                    <li class="" v-bind:id="item.MenuId" v-bind:title="item.Description">
                                        <a href="javascript:void(0)" class="menu-dropdown ">
                                            <i class="menu-icon fa fa-table"></i>
                                            <span class="menu-text"> {{item.FullName}} </span>
                                            <i class="menu-expand"></i>
                                        </a>

                                        <ul class="submenu">
                                            <template v-for="subitem in item.childList">
                                                <li class="vue-menu" v-bind:id="subitem.MenuId" v-bind:title="subitem.Description">
                                                    <a v-bind:href="subitem.NavigateUrl + (subitem.NavigateUrl.indexOf('?')==-1?'?':'&') +'mid=' + subitem.MenuId">
                                                        <span class="menu-text"> {{subitem.FullName}} </span>
                                                    </a>
                                                </li>
                                            </template>

                                        </ul>
                                    </li>
                                </template>
                            </template>


                        </ul>
                    </div>
                </template>
                <div class="page-content" v-bind:style="HasAuth?'':'margin-left:0 !important'">
                    <template v-if="HasAuth">
                        <div id="page-header" class="page-header position-relative page-header-fixed">
                            <!-- 面包屑导航 -->
                            <div id="page-breadcrumbs" class="page-breadcrumbs">
                                <!-- 面包屑导航 -->
                                <div class="header-title hidden-xs">
                                    <h1 style="margin-left:12px" id="breadcrumbs">
                                        <a class="hidden-xs" href="javascript:void(0)" title="返回首页" style="color: #737373;" v-on:click="toIndexPage">
                                            <i class="fa fa-home" style="font-size:20px"></i>首页
                                        </a>


                                    </h1>
                                </div>
                                <div class="header-title hidden-lg hidden-md hidden-sm" style="width:100%;padding-left:5px;padding-right:5px;z-index:2">
                                    <h1 style="width:33%;" id="breadcrumbsForMobie">
                                        <a href="javascript:void(0)" title="返回首页" style="color: #737373;text-decoration:none;" v-on:click="backOnMobile">
                                            <i class="fa fa-angle-left" style="font-size:32px;vertical-align:middle;line-height:42px;"></i>
                                            <span style="vertical-align:middle;line-height:42px;font-size:16px;padding-left:1px;">菜单</span>
                                        </a>


                                    </h1>
                                    <h1 style="width:33%;display:none" id="breadcrumbsForSetting">
                                        <a href="javascript:void(0)" title="返回设置" style="color: #737373;text-decoration:none;" v-on:click="backSetting">
                                            <i class="fa fa-angle-left" style="font-size:32px;vertical-align:middle;line-height:42px;"></i>
                                            <span style="vertical-align:middle;line-height:42px;font-size:16px;padding-left:1px;">设置</span>
                                        </a>


                                    </h1>

                                </div>
                                <h1 class="hidden-lg hidden-md hidden-sm" style="line-height: 42px;vertical-align:middle;width:100%;text-align:center;margin:0;
                                position: absolute;top:0;left:0;font-size:15px;height:50px;">
                                    {{this.$route.name}}
                                </h1>
                            </div>
                            <!-- /面包屑导航 -->
                            <div class="header-buttons hidden-xs">
                                <a class="sidebar-toggler hidden-xs" href="#" title="隐藏左边栏">
                                    <i class="glyphicon glyphicon-resize-horizontal"></i>
                                </a>
                                <a class="refresh hidden-xs " id="refresh-toggler" href="javascript:void(0)" v-on:click="refresh" title="刷新页面">
                                    <i class="glyphicon glyphicon-refresh"></i>
                                </a>
                                <a class="refresh hidden-lg hidden-md hidden-sm" id="refresh-toggler" href="javascript:void(0)" onclick="window.location.reload();" title="刷新页面">
                                    <i class="glyphicon glyphicon-refresh"></i>
                                </a>
                                <a class="fullscreen hidden-xs" id="fullscreen-toggler" href="javascript:void(0)" title="全屏模式">
                                    <i class="glyphicon glyphicon-fullscreen"></i>
                                </a>
                                <a class="hidden-xs" id="favorite-toggler" href="javascript:void(0)" title="收藏">
                                    <i class="glyphicon glyphicon-star-empty"></i>
                                </a>

                            </div>
                        </div>
                    </template>
                    <router-view class="page-body margintop0" id="page-body"></router-view>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Navbar from './Navbar.vue'

    export default{
        data(){

            var hasAuth = window.location.href.indexOf("NoAuth")==-1;
            if(!hasAuth)return {};
            var ret;

            getDataSync(FrameSGHost+"WRPFrame-GetPageSideBar", "get", { applicationName:window.ApplicationID}, function (result) {
                if (result.state == "1") {
                    ret = result.data;
                } else {
                    NotifyError(result.errmsg);
                    ret = "[]";
                }
            });


            return{
                Data:ret,
                HasAuth:hasAuth
            }
        },
        mounted(){

            if(!this.HasAuth)
                $("#sidebar").addClass("hide")

            var that = this;
            $('.vue-menu').click(function(event){

                event.preventDefault();
                event.stopPropagation();
                //if(!isPC())return;
                var $a = $(this).find('a');
                $(".sidebar-menu").find(".submenu > li").each(function () {
                    $(this).removeClass("active");
                });
                $(this).addClass("active");

                var url = $a.attr("href");
                var menuText = $a.find("span").eq(0).text();
                var appendHtml = '<small><i class="fa fa-angle-right"></i>' + menuText + '</small>';
                $("#breadcrumbs").find("small").remove();
                $("#breadcrumbs").append(appendHtml);

                rememberMid(url);

                saveCondition(that,null);
                //window.sessionStorage.clear()
                window.operatorList=[];

                that.$router.push(url);

            });
        },

        components:{
            "Navbar":Navbar
        },
        methods:{
            refresh:function () {
                //var url = this.$route.path;
                this.$router.go(0)
            },
            subMenuChange:function (groupid,notClick) {
                var that = this;

                if(!notClick)
                    this.toIndexPage()
                //var appid = window.FrameApplicationInfo[this.p_context.SubApplication]

                //eraseCookie(getMenuCookieKey())
                createCookie(getMenuGroupCookieKey(), groupid);
                //var ret;

                //saas系统时，默认的key为saas
                //var appkey = this.p_context.SubApplication
                if(this.saasInfo && window.getApplicationId(appkey) == -1){
                    appkey = "saas"
                }

                //var appid = this.p_context.isPlatformIndex?window.ApplicationID:window.getApplicationId(appkey)

                getDataAsync(FrameSGHost+"WRPFrame-GetPageSidebarPartial&applicationId="+window.ApplicationID+"&groupId="+groupid, "get", {}, function (psp) {
                    if (psp.hasOwnProperty("ErrorInfo")==false) {
                        that.Data.Menu = psp.data.Menu;

                        that.$nextTick(function () {
                            $('.vue-menu').click(function(event){
                                event.preventDefault();
                                //if(!isPC())return;
                                var $a = $(this).find('a');
                                $(".sidebar-menu").find(".submenu > li").each(function () {
                                    $(this).removeClass("active");
                                });
                                $(this).addClass("active");

                                var url = $a.attr("href").replace("/#","");

                                var menuText = $a.find("span").eq(0).text();
                                var appendHtml = '<small><i class="fa fa-angle-right"></i>' + menuText + '</small>';
                                $("#breadcrumbs").find("small").remove();
                                $("#breadcrumbs").append(appendHtml);

                                rememberMid(url);
                                saveCondition(that,null);
                                that.$router.push(url);

                            });
//                    if(!notClick){
//
//                        $(".sidebar-menu").find("li.active").parent().css("display", "none").closest("li").removeClass("open");
//
//                         $(".sidebar-menu").find("li").removeClass("active")
//                         $(".sidebar-menu").find("li").eq(0).addClass("open")
//                         $(".sidebar-menu").find(".vue-menu").eq(0).click()
//                    }

                            window.resetSelectedMenu()
                        });
                    } else {
                        NotifyError(psp.ErrorInfo);
                        //ret = {Menu:[]};
                    }
                });



                //this.SiderData.Menu = ret.Menu




            },
            toIndexPage : function () {
                this.$router.push("/");
                $('#breadcrumbs').find('small').remove();
            },
            backOnMobile:function(){
                this.$router.push("/");
                $('#breadcrumbs').find('small').remove();
            },
            backSetting:function(){

                $("#breadcrumbsForMobie").css("display", "inline-block");
                $("#breadcrumbsForSetting").css("display", "none");
                $("#mobileSettingUl").css("display","inline-block");
                $("#mobileSettingUl").find("li.active").removeClass("active");
                $("#mobileSettingUl").parent().find("div.tab-pane.active").removeClass("active");
                this.$router.push("/Frame/Setting");
            }
        }
    }
</script>
