@{
	ViewData["Title"] = "AdminAccordion";
	Layout = "~/Views/Shared/_Admin.cshtml";
}

<style>
	.lr-logo-title {
		display: block;
		position: absolute;
		top: 0;
		height: 100%;
		cursor: pointer;
		text-decoration: none;
		font-size: 18px;
		white-space: nowrap;
		left: 10px;
		line-height: 55px;
		color: #fff !important;
	}

		.lr-logo-title img {
			width: 320px;
		}
	/*顶部*/
	.lr-frame-top {
		height: 60px;
		background: #1d1d1d;
	}
	/*菜单*/
	.lr-frame-menu {
		top: 0;
		width: 200px;
		height: 100%;
		z-index: 1;
		background: #282828;
		box-shadow: 1px 0 20px rgba(0,0,0,0.08);
		padding: 90px 0 35px 0;
	}

		.lr-frame-menu .lr-menu-item {
			height: 36px;
			line-height: 36px;
			padding: 0px 15px;
			color: #fff;
			font-size: 13px;
		}

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

	.lr-first-menu-list > li > .lr-menu-item.open {
		background: #156edb;
	}

	.lr-frame-menu .lr-menu-item-icon {
		font-size: 14px;
		opacity: 0.9;
		filter: alpha(opacity=90);
		width: 17px;
		margin-right: 8px;
		vertical-align: middle;
		margin-bottom: 1px;
	}

	.lr-frame-menu .lr-menu-item-arrow {
		position: absolute;
		right: 10px;
		line-height: 36px;
	}

	.lr-second-menu-list,
	.lr-three-menu-list {
		position: relative;
		width: 100%;
		background-color: #1d1d1d;
	}

		.lr-second-menu-list .lr-menu-item {
			padding-left: 40px;
			padding-right: 15px;
		}

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

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

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

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

	.lr-menu-item.open > .lr-menu-item-arrow > i {
		-webkit-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		transform: rotate(-90deg);
	}
	/*tabs条*/
	.lr-frame-tabs {
		top: 0;
		height: 60px;
		z-index: 2;
		padding: 0px 60px 0px 405px;
	}

	.lr-frame-tabItem:first-child {
		border-left: 1px solid #2a2f32;
	}

	.lr-frame-tabItem {
		height: 60px;
		line-height: 60px;
		font-size: 14px;
		border-right: 1px solid #2a2f32;
		color: #fff;
		margin-left: 0px;
	}

		.lr-frame-tabItem.active {
			background: #444;
		}

		.lr-frame-tabItem .reomve {
			top: 24px;
			right: 4px;
		}
	/*功能窗口*/
	.lr-frame-main {
		padding: 60px 0px 0px 200px;
		background: #eaedf1;
	}
	/*个人设置和头像*/
	.lr-frame-personCenter {
		bottom: 0;
		left: 0;
		height: 35px;
		width: 200px;
		line-height: 35px;
		padding: 0 10px;
		background: #282828;
	}

		.lr-frame-personCenter > .dropdown-toggle {
			height: 100%;
			line-height: 35px;
			border-top: 1px solid rgba(248,248,248,0.2);
			color: #fff;
		}

			.lr-frame-personCenter > .dropdown-toggle > img {
				float: left;
				width: 18px;
				height: 18px;
				border: 2px solid #fff;
				border-radius: 50%;
				margin: 8px 10px 0 0;
			}

		.lr-frame-personCenter .dropdown-menu {
			height: 168px;
			position: absolute;
			left: 10px;
			top: -172px;
			background: #282828;
		}

			.lr-frame-personCenter .dropdown-menu > li > a {
				padding: 10px 15px;
				color: #fff;
				font-size: 12px;
			}

				.lr-frame-personCenter .dropdown-menu > li > a:hover {
					background: #393939;
					color: #fff;
				}

		.lr-frame-personCenter .divider {
			background-color: #63656B;
		}

	/*风尚版独有-菜单缩进按钮*/
	.lr-frame-menu-btn {
		position: absolute;
		left: 0;
		top: 60px;
		height: 30px;
		line-height: 30px;
		width: 200px;
		text-align: center;
		font-size: 14px;
		cursor: pointer;
		color: #aeb9c2;
		background-color: #4A5064;
		z-index: 2;
	}

		.lr-frame-menu-btn:hover {
			background-color: #4A5064;
			color: #fff;
		}

		.lr-frame-menu-btn i {
			opacity: .5;
		}

	/*全屏*/
	.lr_frame_fullscreen {
		top: 0;
		right: 0;
		height: 60px;
		width: 30px;
		line-height: 60px;
		text-align: center;
		z-index: 3;
	}

		.lr_frame_fullscreen a {
			font-size: 14px;
			color: #c1c3c9;
		}

			.lr_frame_fullscreen a:hover {
				color: #fff;
			}

	/*菜单关闭后显示样式*/
	.lr-menu-closed .lr-frame-menu {
		width: 50px;
	}

	.lr-menu-closed .lr-frame-menu-wrap .lr-three-menu-list {
		display: block;
	}

	.lr-menu-closed .lr-frame-menu-wrap .lr-four-menu-list {
		display: block;
	}

	.lr-menu-closed .lr-frame-menu-wrap span,
	.lr-menu-closed .lr-frame-menu-wrap .lr-menu-item-arrow,
	.lr-menu-closed .lr-meun-had > a {
		display: none;
	}

	.lr-menu-closed .lr-frame-menu-wrap a {
		padding: 0px;
		text-align: center;
	}

	.lr-menu-closed .lr-frame-menu-wrap .lr-menu-item-icon {
		margin: 0px;
	}

	.lr-menu-closed .lr-frame-menu-btn {
		-webkit-transform: rotate(-180deg);
		-ms-transform: rotate(-180deg);
		-o-transform: rotate(-180deg);
		transform: rotate(-180deg);
		width: 50px;
	}

	.lr-menu-closed .lr-frame-personCenter {
		width: 50px;
		padding: 0px;
	}

		.lr-menu-closed .lr-frame-personCenter .dropdown-menu {
			padding: 0px;
		}

		.lr-menu-closed .lr-frame-personCenter > .dropdown-toggle {
			line-height: 50px;
			text-align: center;
		}

			.lr-menu-closed .lr-frame-personCenter > .dropdown-toggle > img {
				float: initial;
				margin: 0;
			}

			.lr-menu-closed .lr-frame-personCenter > .dropdown-toggle > span {
				display: none;
			}

	.lr-menu-closed .lr-frame-main {
		padding: 60px 0px 0px 50px;
	}

	/*即时通讯*/

	.lr-im-bell {
		position: fixed;
		right: 30px;
		top: 0;
		width: 20px;
		height: 60px;
		line-height: 63px;
		color: #999;
		text-align: center;
		cursor: pointer;
		z-index: 51;
		display: none;
	}

		.lr-im-bell > i {
			font-size: 16px;
		}

		.lr-im-bell > .point {
			background: #D71012;
			position: absolute;
			right: 0;
			top: 20px;
			width: 8px;
			height: 8px;
			border-radius: 50%;
		}

	/*语言设置*/
	.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_accordion"></a>
</div>
<div class="lr-frame-menu-btn" id="lr_frame_menu_btn"><i class="fa fa-fw fa-dedent"></i></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>*@

<div class="lr-im-bell" title="消息中心">
	<span class="point" style="display:none;"></span>
	<i class="fa fa-bell"></i>
</div>

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

		// 菜单操作
		var meuns = {
			init: function () {
				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 $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"><i class="fa fa-angle-left"></i></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) {
								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) {
										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) {
												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) {
							$firstMenuItem.append($secondMenus);
						}
						$firstmenus.append($firstMenuItem);
					}
				}
				$('#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);
					});
				});
			},
			bind: function () {
				$("#lr_frame_menu").lrscroll();

				$('#lr_frame_menu_btn').on('click', function () {
					var $body = $('body');
					if ($body.hasClass('lr-menu-closed')) {
						$body.removeClass('lr-menu-closed');
					}
					else {
						$body.addClass('lr-menu-closed');
					}
				});

				$('#lr_frame_menu a').hover(function () {
					if ($('body').hasClass('lr-menu-closed')) {
						var id = $(this).attr('id');
						var text = $('#' + id + '>span').text();
						layer.tips(text, $(this));
					}
				}, function () {
					if ($('body').hasClass('lr-menu-closed')) {
						layer.closeAll('tips');
					}
				});

				$('.lr-frame-personCenter .dropdown-toggle').hover(function () {
					if ($('body').hasClass('lr-menu-closed')) {
						var text = $(this).text();
						layer.tips(text, $(this));
					}
				}, function () {
					if ($('body').hasClass('lr-menu-closed')) {
						layer.closeAll('tips');
					}
				});

				// 添加点击事件
				$('#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':// 窗口
							if (learun.validator.isNotNull(_module.F_UrlAddress).code) {
								learun.frameTab.open(_module);
							}
							else {

							}
							break;
						case 'expand':// 打开子菜单
							var $ul = $obj.next();
							if ($ul.is(':visible')) {
								$ul.slideUp(500, function () {
									$obj.removeClass('open');
								});
							}
							else {
								if ($ul.hasClass('lr-second-menu-list')) {
									$('#lr_frame_menu .lr-second-menu-list').slideUp(300, function () {
										$(this).prev().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;
					}
				});
			}
		};
		meuns.init();
	};
</script>