@{
    ViewData["Title"] = "AdminWindos";
    Layout = "~/Views/Shared/_Admin.cshtml";
}
    <style>
        .lr-logo-title {
            position: relative;
            margin-left: 10px;
            height: 50px;
            line-height: 50px;
            cursor: pointer;
            text-decoration: none;
        }
        /*顶部*/
        .lr-frame-top {
            background: #24A1E7;
            height: 48px;
            line-height: 48px;
        }

        /*菜单*/
        .lr-frame-menu {
            left: 0;
            bottom: 32px !important;
            height: 100%;
            height: calc(100% - 110px);
            width: 100%;
            max-height: 450px;
            max-width: 380px;
            z-index: 4;
            background-color: #F7FEFF;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            box-shadow: #D2D8D9 0px 0px 10px 1px;
            display: none;
            overflow: hidden;
        }

        .lr-frame-menu-overlay {
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background: #fff;
            filter: alpha(opacity=1);
            opacity: 0.01;
            -moz-opacity: 0.01;
            z-index: -1;
        }

        .lr-frame-menu-wrap {
            position: absolute;
            width: 160px;
            background-color: #24A1E7;
            border-top-left-radius: 5px;
            padding-top: 10px;
        }

        .lr-first-menu-list > li > .lr-menu-item {
            color: #fff;
            height: 40px;
            line-height: 40px;
            padding: 0px 10px 0px 20px;
        }

            .lr-first-menu-list > li > .lr-menu-item:hover {
                background: #178cce;
            }

            .lr-first-menu-list > li > .lr-menu-item > .lr-menu-item-arrow {
                display: block;
                position: absolute;
                text-indent: 0;
                font-weight: bold;
            }

        .lr-first-menu-list > li.active .lr-menu-item-arrow {
            width: 0;
            height: 0;
            right: 0;
            top: 50%;
            margin-top: -8px;
            text-indent: -99999px;
            border-style: solid;
            border-width: 8px;
            border-color: transparent;
            border-right-color: #f7feff;
            border-left: none;
        }

        .lr-second-menu-wrap {
            position: absolute;
            top: 0;
            right: 0;
            width: 220px;
            height: 100%;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            padding-top: 10px;
        }

        .lr-second-menu-list .lr-menu-item {
            height: 40px;
            line-height: 40px;
            color: #000;
            padding: 0px 15px 0px 20px;
            cursor: pointer;
        }

            .lr-second-menu-list .lr-menu-item:hover {
                background-color: #dfe5e6;
            }

        .lr-three-menu-list .lr-menu-item {
            padding-left: 50px;
        }

        .lr-four-menu-list {
            display: none;
        }

            .lr-four-menu-list .lr-menu-item {
                padding-left: 60px;
            }

        .lr-second-menu-list .lr-menu-item-arrow .fa-angle-left {
            position: absolute;
            right: 15px;
            top: 16px;
        }

        .lr-second-menu-list .open .lr-menu-item-arrow .fa-angle-left {
            -webkit-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
            -o-transform: rotate(-90deg);
            transform: rotate(-90deg);
        }

        /*tabs条*/
        .lr-frame-tabs {
            padding: 0px 55px 0px 88px;
            background: #24A1E7;
            top: 48px;
        }

        .lr-frame-tabs-wrap {
            height: 32px;
        }

        .lr-frame-tabItem {
            height: 29px;
            line-height: 29px;
            background: #24A1E7;
            color: #fff;
            border-radius: 4px 4px 0 0;
        }

            .lr-frame-tabItem i {
                display: none;
            }

            .lr-frame-tabItem.active {
                border-bottom: 0px;
                height: 32px;
                background: #F7FEFF;
                color: #2e99d4;
                font-weight: bold;
            }

            .lr-frame-tabItem .reomve {
                top: 8px;
                right: 4px;
            }
        /*功能窗口*/
        .lr-frame-main {
            padding: 80px 0px 32px 0px;
            background: #F7FEFF;
        }
        /*个人设置和头像*/
        .lr-frame-personCenter {
            top: 0;
            right: 10px;
            height: 40px;
            line-height: 40px;
        }

            .lr-frame-personCenter > a {
                color: #fff;
            }

            .lr-frame-personCenter > .dropdown-toggle > img {
                border: 2px solid #fff;
            }
        /*全屏按钮*/
        .lr_frame_fullscreen {
            top: 50px;
        }

            .lr_frame_fullscreen a {
                color: #fff;
            }

                .lr_frame_fullscreen a:hover {
                    color: #96CCE9;
                }

        /*炫动版独有*/
        /*应用列表按钮*/
        .lr-applist-btn {
            position: absolute;
            left: 10px;
            top: 51px;
            background: #F7FEFF;
            padding: 0px 15px;
            line-height: 29px;
            height: 29px;
            color: #2e99d4;
            font-weight: bold;
            border-radius: 4px 4px 0 0;
            cursor: pointer;
            z-index: 3;
        }

            .lr-applist-btn.off {
                background: #24A1E7;
                color: #fff;
                font-weight: initial;
            }
        /*开始菜单按钮*/
        .lr-windows-bottom-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 32px;
            width: 100%;
            background: #24A1E7;
            z-index: 3;
        }

        .lr-windows-start {
            position: absolute;
            top: 0px;
            left: 10px;
            height: 31px;
            line-height: 31px;
            z-index: 5;
            color: #fff;
            cursor: pointer;
        }

            .lr-windows-start > i {
                font-size: 16px;
            }

            .lr-windows-start > span {
                margin-left: 4px;
            }

            .lr-windows-start:hover {
                color: #96CCE9;
            }
        /*应用列表*/
        .lr-applist-content {
            position: absolute;
            padding: 80px 0px 68px 0px;
            height: 100%;
            width: 100%;
            z-index: 1;
        }

        .lr-applist-slidebox-slider {
            position: absolute;
            left: 0;
            bottom: 45px;
            height: 23px;
            width: 100%;
        }

        .lr-applist-slidebox-slider-content {
            display: table; /*重点就是这个属性,这个样式会告知浏览器当前元素的宽度,采用最小的宽度.不是默认全宽*/
            margin: 0 auto;
        }

        .lr-applist-slidebox-slider li {
            position: relative;
            float: left;
            cursor: pointer;
            text-align: center;
            border: 0;
            margin: 10px;
        }

            .lr-applist-slidebox-slider li.active i {
                color: #24A1E7;
            }

            .lr-applist-slidebox-slider li:first-child i {
                margin-left: 3px;
            }

            .lr-applist-slidebox-slider li i {
                color: #B3E1F9;
            }

        .lr-applist-slidebox {
            position: relative;
            width: 100%;
            height: 100%;
        }

            .lr-applist-slidebox ul {
                display: none;
            }

                .lr-applist-slidebox ul.active {
                    display: block;
                }

            .lr-applist-slidebox .appItem {
                position: relative;
                float: left;
                margin: 30px;
                /*width: 130px;*/
                /*padding: 20px 10px 10px 10px;*/
                /*margin:5px 15px 15px 15px;*/
                border-radius: 10px;
                cursor: pointer;
            }

                .lr-applist-slidebox .appItem .icon {
                    position: relative;
                    width: 100px;
                    height: 100px;
                    margin: 0 auto;
                    border-radius: 3px;
                    text-align: center;
                }

                .lr-applist-slidebox .appItem:nth-of-type(7n+1) .icon {
                    background-color: #68ADEA;
                }

                .lr-applist-slidebox .appItem:nth-of-type(7n+1):hover .icon {
                    background-color: #429BE9;
                }

                .lr-applist-slidebox .appItem:nth-of-type(7n+2) .icon {
                    background-color: #C96BF0;
                }

                .lr-applist-slidebox .appItem:nth-of-type(7n+2):hover .icon {
                    background-color: #AD27E5;
                }

                .lr-applist-slidebox .appItem:nth-of-type(7n+3) .icon {
                    background-color: #58DFE7;
                }

                .lr-applist-slidebox .appItem:nth-of-type(7n+3):hover .icon {
                    background-color: #3DC8D0;
                }

                .lr-applist-slidebox .appItem:nth-of-type(7n+4) .icon {
                    background-color: #FADD1B;
                }

                .lr-applist-slidebox .appItem:nth-of-type(7n+4):hover .icon {
                    background-color: #F3C60A;
                }

                .lr-applist-slidebox .appItem:nth-of-type(7n+5) .icon {
                    background-color: #D775E1;
                }

                .lr-applist-slidebox .appItem:nth-of-type(7n+5):hover .icon {
                    background-color: #E44BF3;
                }

                .lr-applist-slidebox .appItem:nth-of-type(7n+6) .icon {
                    background-color: #F4A944;
                }

                .lr-applist-slidebox .appItem:nth-of-type(7n+6):hover .icon {
                    background-color: #E7890C;
                }

                .lr-applist-slidebox .appItem:nth-of-type(7n) .icon {
                    background-color: #F37E8D;
                }

                .lr-applist-slidebox .appItem:nth-of-type(7n):hover .icon {
                    background-color: #F4485D;
                }

                .lr-applist-slidebox .appItem .icon i {
                    text-align: center;
                    line-height: 80px;
                    font-size: 45px;
                    color: #fff;
                }

                .lr-applist-slidebox .appItem .icon-text {
                    position: relative;
                    margin: 0 auto;
                    line-height: 20px;
                    text-align: center;
                    text-align: center;
                    margin-top: -24px;
                    color: #fff;
                }

        /*即时通讯*/

        .lr-im-bell {
            position: absolute;
            right: 8px;
            bottom: 0;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 16px;
            color: #FFFFFF;
            cursor: pointer;
            display: none;
        }

            .lr-im-bell > .point {
                background: #D71012;
                position: absolute;
                right: 5px;
                top: 5px;
                width: 7px;
                height: 7px;
                border-radius: 50%;
                display: none;
            }

        .lr-im-body {
            bottom: 32px;
        }
        /*语言设置*/
        .lr-lg-setting {
            position: absolute;
            top: 21px;
            left: 333px;
            font-size: 14px;
            z-index: 4;
            color: #c6c6c6;
        }

        .lr-lg-setting > a {
            color: #c6c6c6;
        }

        .lr-lg-setting span {
            color: #fff;
        }
    </style>
<div class="lr-frame-top">
    <a class="lr-logo-title">
        <img src="~/LR_SystemModule/Img/Down?id=logo_windows">
    </a>
</div>

<div class="lr-applist-btn off" id="lr_applist_btn">应用列表</div>
<div class="lr-applist-content" id="lr_applist_content">
    <div class="lr-applist-slidebox-slider">
        <ul class="lr-applist-slidebox-slider-content"></ul>
    </div>
    <div class="lr-applist-slidebox" id="lr_applist_slidebox"></div>
</div>

<div class="lr-windows-bottom-bar">
    <div class="lr-windows-start" id="lr_windows_start" title="开始菜单"><i class="fa fa-windows"></i><span>开始菜单</span></div>
    <div class="lr-im-bell" title="消息中心">
        <span class="point"></span>
        <i class="fa fa-bell"></i>
    </div>
</div>

@*<div class="lr-lg-setting" id="lr_lg_setting">
    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">[<span></span>]</a>
    <ul class="dropdown-menu"></ul>
</div>*@

<script>
    var bootstrap = function ($, learun) {
        "use strict";

        // 菜单操作
        var meuns = {
            init: function () {
                var $menuwarp = $('.lr-frame-menu');
                $menuwarp.append('<div class="lr-second-menu-wrap" id="lr_second_menu_wrap"></div><div class="lr-frame-menu-overlay" id="lr_frame_menu_overlay"></div>');
                this.load();
                this.bind();
            },
            load: function () {
                var modulesTree = learun.clientdata.get(['modulesTree']);
                // 第一级菜单
                var parentId = '0';
                var modules = modulesTree[parentId] || [];
                var $firstmenus = $('<ul class="lr-first-menu-list"></ul>');
                for (var i = 0, l = modules.length; i < l; i++) {
                    var item = modules[i];
                    if (item.F_IsMenu == 1) {
                        var $applistul = $('<ul></ul>');// 应用列表
                        if (item.F_Target != 'expand') {
                            $applistul.append(meuns.getAppItem(item));
                        }
                        var $firstMenuItem = $('<li></li>');
                        if (!!item.F_Description) {
                            $firstMenuItem.attr('title', item.F_Description);
                        }
                        var menuItemHtml = '<a id="' + item.F_ModuleId + '" href="javascript:void(0);" class="lr-menu-item">';
                        menuItemHtml += '<i class="' + item.F_Icon + ' lr-menu-item-icon"></i>';
                        menuItemHtml += '<span class="lr-menu-item-text">' + item.F_FullName + '</span>';
                        menuItemHtml += '<span class="lr-menu-item-arrow"></span></a>';
                        $firstMenuItem.append(menuItemHtml);
                        // 第二级菜单
                        var secondModules = modulesTree[item.F_ModuleId] || [];
                        var $secondMenus = $('<ul class="lr-second-menu-list"></ul>');
                        var secondMenuHad = false;
                        for (var j = 0, sl = secondModules.length; j < sl; j++) {
                            var secondItem = secondModules[j];
                            if (secondItem.F_IsMenu == 1) {

                                if (secondItem.F_Target != 'expand') {
                                    $applistul.append(meuns.getAppItem(secondItem));
                                }

                                secondMenuHad = true;
                                var $secondMenuItem = $('<li></li>');
                                if (!!secondItem.F_Description) {
                                    $secondMenuItem.attr('title', secondItem.F_Description);
                                }
                                var secondItemHtml = '<a id="' + secondItem.F_ModuleId + '" href="javascript:void(0);" class="lr-menu-item" >';
                                secondItemHtml += '<i class="' + secondItem.F_Icon + ' lr-menu-item-icon"></i>';
                                secondItemHtml += '<span class="lr-menu-item-text">' + secondItem.F_FullName + '</span>';
                                secondItemHtml += '</a>';

                                $secondMenuItem.append(secondItemHtml);
                                // 第三级菜单
                                var threeModules = modulesTree[secondItem.F_ModuleId] || [];
                                var $threeMenus = $('<ul class="lr-three-menu-list"></ul>');
                                var threeMenuHad = false;
                                for (var m = 0, tl = threeModules.length; m < tl; m++) {
                                    var threeItem = threeModules[m];
                                    if (threeItem.F_IsMenu == 1) {
                                        if (threeItem.F_Target != 'expand') {
                                            $applistul.append(meuns.getAppItem(threeItem));
                                        }

                                        threeMenuHad = true;
                                        var $threeMenuItem = $('<li></li>');
                                        $threeMenuItem.attr('title', threeItem.F_FullName);
                                        var threeItemHtml = '<a id="' + threeItem.F_ModuleId + '" href="javascript:void(0);" class="lr-menu-item" >';
                                        threeItemHtml += '<i class="' + threeItem.F_Icon + ' lr-menu-item-icon"></i>';
                                        threeItemHtml += '<span class="lr-menu-item-text">' + threeItem.F_FullName + '</span>';
                                        threeItemHtml += '</a>';
                                        $threeMenuItem.append(threeItemHtml);
                                        $threeMenus.append($threeMenuItem);

                                        // 第四级菜单
                                        var fourModules = modulesTree[threeItem.F_ModuleId] || [];
                                        var $fourMenus = $('<ul class="lr-four-menu-list"></ul>');
                                        var fourMenuHad = false;
                                        for (var fi = 0, fl = fourModules.length; fi < fl; fi++) {
                                            var fourItem = fourModules[fi];
                                            if (fourItem.F_IsMenu == 1) {

                                                if (fourItem.F_Target != 'expand') {
                                                    $applistul.append(meuns.getAppItem(fourItem));
                                                }

                                                fourMenuHad = true;
                                                var $fourMenuItem = $('<li></li>');
                                                $fourMenuItem.attr('title', fourItem.F_FullName);
                                                var fourItemHtml = '<a id="' + fourItem.F_ModuleId + '" href="javascript:void(0);" class="lr-menu-item" >';
                                                fourItemHtml += '<i class="' + fourItem.F_Icon + ' lr-menu-item-icon"></i>';
                                                fourItemHtml += '<span class="lr-menu-item-text">' + fourItem.F_FullName + '</span>';
                                                fourItemHtml += '</a>';
                                                $fourMenuItem.append(fourItemHtml);
                                                $fourMenus.append($fourMenuItem);
                                            }
                                        }
                                        if (fourMenuHad) {
                                            $threeMenuItem.addClass('lr-meun-had');
                                            $threeMenuItem.find('a').append('<span class="lr-menu-item-arrow"><i class="fa fa-angle-left"></i></span>');
                                            $threeMenuItem.append($fourMenus);
                                        }

                                    }
                                }
                                if (threeMenuHad) {
                                    $secondMenuItem.addClass('lr-meun-had');
                                    $secondMenuItem.find('a').append('<span class="lr-menu-item-arrow"><i class="fa fa-angle-left"></i></span>');
                                    $secondMenuItem.append($threeMenus);
                                }
                                $secondMenus.append($secondMenuItem);
                            }
                        }
                        if (secondMenuHad) {
                            $secondMenus.attr('data-value', item.F_ModuleId);
                            $('#lr_second_menu_wrap').append($secondMenus);
                        }
                        $firstmenus.append($firstMenuItem);
                        if ($applistul.find('li').length > 0) {
                            $("#lr_applist_slidebox").append($applistul);
                            $(".lr-applist-slidebox-slider-content").append('<li><i class="fa fa-circle"></i></li>');
                        }

                    }
                }
                $('#lr_frame_menu').html($firstmenus);

                // 语言包翻译
                $('.lr-menu-item-text').each(function () {
                    var $this = $(this);
                    var text = $this.text();
                    learun.language.get(text, function (_text) {
                        $this.text(_text);
                        $this.parent().parent().attr('title', _text);
                    });
                });
                $('.icon-text').each(function () {
                    var $this = $(this);
                    var text = $this.text() || '';
                    learun.language.get(text.replace(/^\s+|\s+$/g, ""), function (_text) {
                        $this.text(_text);
                    });
                });
            },
            bind: function () {
                $("#lr_frame_menu").lrscroll();
                $("#lr_second_menu_wrap").lrscroll();
                $('#lr_windows_start').on('click', meuns.startMenuClick);
                $('#lr_frame_menu_overlay').on('click', meuns.startMenuClick);
                // 添加点击事件
                $('#lr_frame_menu a').on('click', function () {
                    var $obj = $(this);
                    var id = $obj.attr('id');
                    var _module = learun.clientdata.get(['modulesMap', id]);
                    switch (_module.F_Target) {
                        case 'iframe':// 窗口
                            meuns.startMenuClick();
                            setTimeout(function () {
                                if (learun.validator.isNotNull(_module.F_UrlAddress).code) {
                                    learun.frameTab.open(_module);
                                }
                                else {

                                }
                            }, 250);
                            break;
                        case 'expand':
                            var $li = $obj.parent();
                            if (!$li.hasClass('active')) {
                                $('#lr_frame_menu li.active').removeClass('active');
                                $li.addClass('active');
                                $('#lr_second_menu_wrap .lr-second-menu-list').hide();
                                $('#lr_second_menu_wrap .lr-second-menu-list[data-value="' + _module.F_ModuleId + '"]').show();
                            }
                            break;
                    }
                });

                $('#lr_second_menu_wrap a').on('click', function () {
                    var $obj = $(this);
                    var id = $obj.attr('id');
                    var _module = learun.clientdata.get(['modulesMap', id]);
                    switch (_module.F_Target) {
                        case 'iframe':// 窗口
                            meuns.startMenuClick();
                            setTimeout(function () {
                                if (learun.validator.isNotNull(_module.F_UrlAddress).code) {
                                    learun.frameTab.open(_module);
                                }
                                else {

                                }
                            }, 250);
                            break;
                        case 'expand':
                            var $ul = $obj.next();
                            if ($ul.is(':visible')) {
                                $ul.slideUp(500, function () {
                                    $obj.removeClass('open');
                                });
                            }
                            else {
                                if ($ul.hasClass('lr-three-menu-list')) {
                                    $ul.parents('.lr-second-menu-list').find('.lr-three-menu-list').slideUp(300, function () {
                                        $(this).prev().removeClass('open');
                                    });
                                }
                                else {
                                    $ul.parents('.lr-three-menu-list').find('.lr-four-menu-list').slideUp(300, function () {
                                        $(this).prev().removeClass('open');
                                    });
                                }

                                $ul.slideDown(300, function () {
                                    $obj.addClass('open');
                                });
                            }
                            break;
                    }
                });

                $('.lr-first-menu-list>li').eq(0).find('a').trigger('click');

                $(".lr-applist-slidebox-slider-content li").click(function () {
                    var $this = $(this);
                    if (!$this.hasClass("active")) {
                        var $oldli = $(".lr-applist-slidebox-slider-content li.active");
                        $oldli.removeClass("active");
                        $this.addClass("active");

                        var oldindex = $oldli.index();
                        var index = $(this).index();

                        $("#lr_applist_slidebox ul").eq(oldindex).hide();
                        $("#lr_applist_slidebox ul").eq(index).fadeIn("slow");
                    }
                });

                $('#lr_applist_btn').on('click', function () {
                    meuns.openApplist();
                });

                $('#lr_applist_slidebox .appItem').on('click', function () {
                    var $obj = $(this);
                    var id = $obj.attr('data-id');
                    var _module = learun.clientdata.get(['modulesMap', id]);
                    if (learun.validator.isNotNull(_module.F_UrlAddress).code) {
                        learun.frameTab.open(_module);
                    }
                });
                $('#lr_applist_content').hide();
                $(".lr-applist-slidebox-slider-content li").eq(0).trigger('click');

                //learun.frameTab.leaveFocus();

            },
            startMenuClick: function () {
                var $lr_frame_menu = $('.lr-frame-menu');
                if ($lr_frame_menu.is(':visible')) {
                    $lr_frame_menu.slideUp(300);
                }
                else {
                    $lr_frame_menu.show();
                }
            },
            getAppItem: function (item) {
                var colorindex = Math.round(Math.random() * 9 + 1);
                var _html = '';
                _html += '<li class="appItem" data-id="' + item.F_ModuleId + '" href="' + item.F_UrlAddress + '">';
                _html += '<div class="icon" >';
                _html += '<i class="fa ' + item.F_Icon + '"></i>';
                _html += '</div>';
                _html += '<div class="icon-text">';
                _html += item.F_FullName;
                _html += '</div>';
                _html += '</li>';
                return _html;
            },
            closeApplist: function () {
                var appBtn = $('#lr_applist_btn');
                if (!appBtn.hasClass('off')) {
                    $('#lr_applist_btn').addClass('off');
                    $('#lr_applist_content').hide();
                }
            },
            openApplist: function () {
                var appBtn = $('#lr_applist_btn');
                if (appBtn.hasClass('off')) {
                    learun.frameTab.leaveFocus();
                    $('#lr_applist_btn').removeClass('off');
                    $('#lr_applist_content').show();
                }
            }
        };

        learun.frameTab.opencallback = function () {
            meuns.closeApplist();
        };
        learun.frameTab.closecallback = function () {
            if (learun.frameTab.iframeId == '') {
                meuns.openApplist();
            }
        };

        meuns.init();
    };
</script>