<div th:fragment="navbar" class="jax-header">
    <header class="main-header">
        <a href="/admin" class="logo" style="font-size: 18px;">
            <span class="logo-mini"><b>NB</b></span>
            <span class="logo-lg"><b>[[#{system.name}]]</b></span>
        </a>
        <nav class="navbar navbar-static-top">
            <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>

            <div class="navbar-custom-menu">
            	<span style="float:left; vertical-align: middle; color:white; height: 20px;line-height: 20px; padding: 15px 0px;"><shiro:principal property="rolename" /></span>
                <ul class="nav navbar-nav">
                    <li class="dropdown user user-menu">
                        <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" style="float:right;">
                            <img th:src="@{/img/person.jpg}" class="user-image" alt="">
                            <span><shiro:principal property="username" /></span>
                            <span id="userId" style="display: none"><shiro:principal property="userId" /></span>
                        </a>
                        <ul class="dropdown-menu dropdown-left" style="right: 0; text-align: center;">
                            <!-- <li><a id="userInfoBtn" href="#">[[#{system.profile}]]</a></li> --> <!-- 个人资料 -->
                            <li title="点击切换语言"><a id="changeLangBtn" href="javascript:;"><span id="lang-label"></span>&nbsp;&nbsp;<i class="fa fa-exchange"></i></a></li>
                            <li><a id="changePasswordBtn" href="javascript:;" data-toggle="modal" data-target="#passwordModal">[[#{system.updatepwd}]]</a></li>
                            <li class="divider"></li>
                            <li><a id="logoutBtn" href="javascript:;">[[#{system.logout}]]</a></li>
                        </ul>
                    </li>
                    <li style="display: none;">
                        <a href="javascript:;" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
    <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog"  role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">[[#{system.profile}]]</h4>
                </div>
                <div class="modal-body">
                    <p id="myInfoOpenWindow"></p>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <div id="passwordModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
              		<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
               		<h4 class="modal-title">[[#{system.updatepwd}]]</h4>
                </div>
                <div class="modal-body">
                    <div>
                        <form class="form-horizontal" id="passwordForm">
                            <div class="box-body">
                                <div class="form-group">
                                    <label for="oldPassword" class="col-sm-3 control-label">[[#{system.oldpassword}]] :</label>
                                    <div class="col-sm-8">
                                        <input type="password" class="form-control" name="oldPassword" id="oldPassword" require="" placeholder="">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="password" class="col-sm-3 control-label">[[#{system.newpassword}]] :</label>
                                    <div class="col-sm-8">
                                        <input type="password" class="form-control" name="newPassword" id="password" password="" pwdCheck="" require="" placeholder="">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="confirmPassword" class="col-sm-3 control-label">[[#{system.newpassword.confirm}]] :</label>
                                    <div class="col-sm-8">
                                        <input type="password" class="form-control" name="confirmNewPassword" id="confirmPassword" password="" require="" placeholder="">
                                    </div>
                                </div>

                            </div>
                            <!-- /.box-body -->
                            <div class="box-footer">
                                <div class="pull-right">
                                    <button type="button" id="savePassword" class="btn btn-info">[[#{btn.save}]]</button>
                                    <button type="button" data-dismiss="modal" class="btn btn-default">[[#{btn.cancel}]]</button>
                                </div>
                            </div>
                            <!-- /.box-footer -->
                        </form>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <script>
        $(function () {
        	setLangLabel();
        	
            //修改信息
            $("#userInfoBtn").on('click', function () {
                Core.load("#myInfoOpenWindow","[[@{/user/edit}]]?userId="+$("#userId").text(), function(){
                    $("#myModal").modal("show");
                });
            })
            
            /*切换语言*/
            $("#changeLangBtn").on('click', function () {
            	Core.confirm('[[#{system.msg.confirm.change.language}]]', function () {
		       		var lang = getCookie("userLanguage");
	            	if(lang == 'zh'){
	            		document.cookie = "userLanguage=en;";
	            	}else if(lang == 'en'){
	            		document.cookie = "userLanguage=zh;";
	            	}
	            	window.location.reload();
		        });
            });
            
            /*退出登录*/
            $("#logoutBtn").on('click', function () {
                Core.confirm("[[#{system.msg.confirm.logout}]]",function () {
                    Core.postAjax("[[@{/logout}]]",{},function(data){
                        if(data.ret==0){
                            window.location.href="[[@{/login}]]";
                        }else{
                            layer.msg(data.msg);
                        }
                    })
                })
            })
            /*修改密码*/
            $("#changePasswordBtn").on('click', function () {
                $("#passwordForm")[0].reset();
                Core.clearError("#passwordForm");
            })
            /*确定修改密码*/
            $("#savePassword").on('click', function () {
                if(doValidForm(passwordForm)){
                    Core.mask("#savePassword")
                    Core.postAjax("[[@{/user/changePassword}]]",$("#passwordForm").serialize(),function(data){
                        Core.unmask("#savePassword")
                        if(data.ret==0){
                            $("#passwordModal").modal("hide");
                            layer.msg('[[#{system.msg.save.successfully}]]');
                        }else{
                            layer.msg(data.msg);
                        }
                    })
                }
            })

            $("#passwordForm").keyup(function(event){
                if(event.keyCode ==13){
                    $("#savePassword").click();
                }
            });
        });
        
		function getCookie(name){
			var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
			if(arr=document.cookie.match(reg))return unescape(arr[2]);
			else return null;
		}
		
		function setLangLabel(){
			var lang = getCookie("userLanguage");
           	if(lang == 'zh'){
           		$('#lang-label').text('中文');
           	}else if(lang == 'en'){
           		$('#lang-label').text('English');
           	}else{ // 为null，设置默认语言
           		document.cookie = "userLanguage=zh;";
           		$('#lang-label').text('中文');
           	}
		}
    </script>
</div>