<header class="main-header">
    <!-- Logo -->
    <a href="javascript:void(0);" class="logo">
        <span class="logo-mini"><b>${config.getKeyToValue("SYS_CONFIG_TITLE_MINI")}</b></span>
        <span class="logo-lg">${config.getTitle()}</span>
    </a>
    <!-- Header Navbar: style can be found in header.less -->
    <nav class="navbar navbar-static-top">
        <!-- Sidebar toggle button-->
        <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
            <span class="sr-only">导航切换</span>
        </a>
        <div class="navbar-custom-menu pull-left">
            <ul class="nav navbar-nav" id="topMenu">
                <#if modules?? && (modules?size > 0)>
                    <#list modules as c>
                            <li class="treeview"><a href="javascript:" class="addTabPage" title="${c['moduleName']}" data-code="${c['moduleCode']}"><i class="fa-fw ${c['icon']}"></i> <span class="hidden-xs"><@ctx.i18n text = "${c['moduleName']}"/></span></a></li>
                    </#list>
                </#if>
            </ul>
            <script>
                $(function () {
                    /*顶部菜单ID*/
                    var topMenuId = 'topMenu';
                    var code = $('#' + topMenuId).children('li:first-child').find('a').attr('data-code');
                    if(typeof(code) != "undefined"){
                        $("#leftMenu-" + code).css('display','block').addClass('active');
                        $('#' + topMenuId).children('li:first-child').addClass('active');
                    }
                    /*顶部菜单添加事件*/
                    $('#'+topMenuId).on('click', '.addTabPage', function (e) {
                        $('#'+topMenuId+' li').removeClass('active');
                        $(this).closest('li').addClass('active');
                        var code = $(this).data("code");
                        if ($("#leftMenu-" + code).length > 0) {
                            $("#leftMenu > ul").each(function () {
                                if($(this).attr('id') != 'leftMenu-'+ code){
                                    $(this).removeClass('active').css('display','none');
                                }
                            });
                            if(!$("#leftMenu-" + code).hasClass('active')){
                                $("#leftMenu-" + code).fadeIn(500).addClass('active');
                            }
                        }
                    });
                    /*设置菜单新*/
                    <#--
                    setTimeout(function(){
                        $('.navbar-nav [data-code="bpm"]').append('<span data-index="_new" class="label label-danger"><@ctx.i18n text = "新"/></span>');
                    },2000); -->
                })
            </script>
        </div>
        <div class="navbar-custom-menu">
            <ul class="nav navbar-nav" id="top-navbar-menu">
                <!-- Messages: style can be found in dropdown.less-->
                <li class="dropdown messages-menu">
                    <a href="#" id="fullScreen" data-toggle="tooltip"
                       data-placement="bottom"
<#--                       data-custom-class="tooltip-primary"-->
                       title="<@ctx.i18n text = "全屏显示"/>" class="dropdown-toggle">
                        <i class="fa icon-size-fullscreen"></i>
                        <span class="hidden-xs"><@ctx.i18n text = "全屏显示"/></span>
                    </a>
                </li>
                <li class="dropdown messages-menu">
                    <a href="#" id="lockOs" data-toggle="tooltip"
                       data-placement="bottom"
<#--                       data-custom-class="tooltip-primary"-->
                       title="<@ctx.i18n text = "锁屏"/>" class="dropdown-toggle">
                        <i class="fa fa-lock"></i>
                        <span class="hidden-xs"><@ctx.i18n text = "锁屏"/></span>
                    </a>
                </li>
                <li class="dropdown messages-menu">
                    <a href="#" id="sticky" data-toggle="tooltip"
                       data-placement="bottom"
                       title="<@ctx.i18n text = "便签"/>" class="dropdown-toggle">
                        <i class="fa fa-tags"></i>
                        <sapn class="hidden-xs"><@ctx.i18n text = "便签"/></sapn>
<#--                        <span data-index="_new" class="label label-danger"><@ctx.i18n text = "新"/></span>-->
                    </a>
                </li>
                <!-- Notifications: style can be found in dropdown.less -->
                <li class="dropdown messages-menu">
                    <a href="#" data-toggle="control-sidebar">
                        <i class="fa fa-bell-o"></i>
                        <span class="label label-warning">10</span>
                    </a>
                </li>
                <!--  -->
                <li class="dropdown tasks-menu">
                    <a href="javascript:void(0);" class="dropdown-toggle">
                        <i class="fa fa-language"></i>
                        <sapn class="hidden-xs"><@ctx.i18n text = "中文(简体)"/></sapn>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="mt5"></li>
                        <#list dict.getType('sys_lang_type')>
                            <#items as d>
                                <#if d.status =='0' >
                                    <li><a href="${ctxStatic}/index?_lang=${d.dictValue}">${d.dictLabel}</a></li>
                                </#if>
                            </#items>
                        </#list>
                        <li class="mt5"></li>
                    </ul>
                </li>
                <!-- User Account: style can be found in dropdown.less -->
                <li class="dropdown user user-menu">
<#--                    <a href="javascript:void(0);" class="dropdown-toggle">-->
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <img src="${ctxStatic}<#if user.avatar?? && user.avatar!="">${user.avatar}<#else>/static/img/user2-160x160.jpg</#if>"
                           onerror="imgUserError();"  class="user-image" alt="User Image"/>
                        <span class="hidden-xs">${user.name}</span>
                    </a>
                    <ul class="dropdown-menu">
                        <!-- 头像图片User image -->
                        <li class="user-header">
                            <img src="${ctxStatic}<#if user.avatar?? && user.avatar!="">${user.avatar}<#else>/static/img/user2-160x160.jpg</#if>"
                              onerror="imgUserError();"   class="img-circle" alt="User Image" />
                            <p>
                            <h4><@ctx.i18n text = "上次登陆时间"/> :
                                <#if user.loginTime?exists>
                                    ${user.loginTime?string('yyyy-MM-dd HH:mm:ss')}
                                </#if>
                                </h4>
                            <small><@ctx.i18n text = "上次登陆地点"/>:${user.loginLocation?default("/")}</small>
                            </p>
                        </li>
                        <!-- Menu Body -->
                        <li class="user-body">
                            <div class="row">
                                <div class="col-xs-6 text-left">
                                    <a click-id="userInfo" href="javascript:void(0);"><i class="fa fa-address-card"></i> <@ctx.i18n text = "个人中心"/></a>
                                </div>
                                <div class="col-xs-6 text-right">
                                  <a id="switchSkin" href="javascript:void(0);"><i class="fa fa-dashboard"></i> <@ctx.i18n text = "切换主题"/></a>
                                </div>
                                <!-- <div class="col-xs-4 text-center">
                                  <a href="#">Friends</a>
                                </div>-->
                            </div>
                        </li>
                        <!-- Menu Footer-->
                        <li class="user-footer">
                            <div class="pull-left">
                                <a id="updatePassword" href="javascript:void(0);" title="<@ctx.i18n text = "修改密码"/>" class="btn btn-default btn-flat" style="width: 120px;overflow: hidden;
                                 white-space: nowrap;text-overflow: ellipsis;"><i class="fa icon-lock-open"></i> <@ctx.i18n text = "修改密码"/></a>
                            </div>
                            <div class="pull-right">
                                <a click-id="logout" href="javascript:void(0);" title="<@ctx.i18n text = "退出"/>" class="btn btn-default btn-flat"><i class="fa icon-power"></i> <@ctx.i18n text = "退出"/></a>
                            </div>
                        </li>
                    </ul>
                </li>
                <!-- Control Sidebar Toggle Button
                <li>
                    <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
                </li>
                -->
            </ul>
        </div>
    </nav>
</header>
<script id="noteTemp" type="text/template">//<!--
<div class="note-wrapper"></div>
<div class="note-empty" style="display: block;">
	<i class="layui-icon layui-icon-face-surprised"></i>
	<p>便签中的内容会存储在本地,这样即便你关掉了浏览器,在下次打开时,依然会读取到上一次的记录。是个非常小巧实用的本地备忘录</p>
</div>
<div class="btn-notadd" id="noteAddBtn" title="<@ctx.i18n text = "添加便签"/>" style="position: absolute;">
	<i class="layui-icon layui-icon-add-1"></i>
</div>
<script>
		/* 便签列表*/
		var dataList = [];
        var $noteWrapper = $('.note-wrapper');
        /* 渲染列表 */
        function renderList() {
        	console.log("NOTE_LIST:"+opt.storage.get("NOTE_LIST"));
            $noteWrapper.empty();
            try {
            	 if(opt.common.isNotEmpty(opt.storage.get("NOTE_LIST"))){
            		 dataList = JSON.parse(opt.storage.get("NOTE_LIST"));
            	 }
            } catch (a) {
                dataList = [];
            }
            if (opt.common.isEmpty(dataList)) dataList = [];
            for (var i = 0; i < dataList.length; i++) {
                var item = dataList[i];
                $noteWrapper.prepend([
                    '<div class="note-item" data-id="', item.id, '">',
                    '   <div class="note-item-content">', opt.common.escape(item.content), '</div>',
                    '   <div class="note-item-time">', item.time, '</div>',
                    '   <i class="layui-icon layui-icon-close-fill note-item-del"></i>',
                    '</div>'
                ].join(''));
            }
            if(dataList.length === 0){
            	$('.note-empty').css('display', 'block');
            	$noteWrapper.css('display', 'none');
            }else{
            	$('.note-empty').css('display', 'none');
            	$noteWrapper.css('display', 'block');
            }
            /* 点击修改 */
            $('.note-item').click(function () {
                var index = parseInt($(this).attr('data-id'));
                showNote(dataList[index]);
            });
            /* 点击删除 */
            $('.note-item-del').click(function (e) {
                var id = parseInt($(this).parent().attr('data-id'));
                opt.modal.confirm('确认删除吗?',function (index) {
                    opt.selfLayer.close(index);
                    dataList.splice(id, 1);
                    for (var i = 0; i < dataList.length; i++) dataList[i].id = i;
                    putDataList();
                    renderList();
                });
                e.stopPropagation();
            });
        }

        renderList();

        /* 添加 */
        $('#noteAddBtn').click(function () {
            showNote();
        });

        /* 显示编辑弹窗 */
        function showNote(data) {
            var id = data ? data.id : undefined, content = data ? data.content : '';
            opt.layer.open({
                id: 'layer-note-edit',
                title: '<i class="fa fa-sticky-note"></i> '+ "<@ctx.i18n text = "便签"/>",
                type: 1,
                skin:'layui-layer-note',
				shade: 0.1,
                offset: '90px',
                area: 'auto',
                scrollbar: false,
                shadeClose: true,
                content: '<div class="el-context"><div class="el-textarea"><textarea id="stikyText" placeholder="记笔记...">'+content+'</textarea></div></div>',
                success: function (layero, index) {
                	/*重写关闭图标*/
               		$(layero).find('.layui-layer-setwin').html('<i class="layui-icon layui-layer-close layui-layer-close1" close="">ဆ</i>');
               		$(layero).css('height','');
				    $(layero).css('width','');
                    $('#stikyText').change(function () {
                        content = $(this).val();
                    });
                },
                end: function () {
                    if (id !== undefined) {
                        if (!content) {
                            dataList.splice(id, 1);
                            for (var i = 0; i < dataList.length; i++) dataList[i].id = i;
                        } else if (content !== dataList[id].content) {
                            dataList[id].content = content;
                            dataList[id].time = opt.common.toDateString(new Date(), 'yyyy-MM-dd HH:mm');
                        }
                    } else if (content) {
                        dataList.push({
                            id: dataList.length,
                            content: content,
                            time: opt.common.toDateString(new Date(), 'yyyy-MM-dd HH:mm')
                        });
                    }
                    putDataList();
                    renderList();
                },
               /* 处理便签拉伸 */
			   resizing: function(layero){
				 $(layero).find('#stikyText').height($(layero).height()-66);
				 $(layero).find('#stikyText').width($(layero).width()-43);
				 $(layero).css('height','');
				 $(layero).css('width','');
			   }
            });
        }
        /* 更新本地缓存 */
        function putDataList() {
            opt.storage.set('NOTE_LIST',JSON.stringify(dataList));
        }
</script>
//-->
</script>