<#include "/common/defaultEngine.html"/>
<@pageTheme mark="${config.optimize()?string('true', 'false')}">
<@header title="用户个人信息" libs=["table"]>
<style type="text/css">
    .user-bind .third-app{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        min-width: 80px;
        float: left;
    }
    .user-bind{
        font-size: 1rem;
        text-align:start;
        height: 50px;
        margin-top: 10px;
    }

    .git-other-login-icon > img{
        height: 32px;
    }

    a{
        text-decoration: none;
        cursor: pointer;
        color: #005980;
    }

    .provider-desc{
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, SimSun, "WenQuanYi Zen Hei Sharp", sans-serif;
        font-size: 1.071rem;
    }

    td> img{
        height: 20px;
        width: 20px;
        display: inline-block;
        border-radius: 50%;
        margin-right: 5px;
    }
</style>
</@header>
    <input id="userId" name="userId" type="hidden" value="${user.id}" />
    <section class="section-content">
    <div class="row">
        <div class="col-sm-3 pr5">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5><@ctx.i18n text = "个人资料"/></h5>
                </div>
                <div class="ibox-content animated fadeInDown">
                    <div class="text-center">
                        <p class="cap-head" onclick="avatar()"><img class="img-circle img-lg" src="${ctxStatic}${((user.avatar!'')?length>0)?string((user.avatar!''),"/statics/img/user2-160x160.jpg")}" onerror="imgUserError();"/></p>
                        <p><a href="javascript:avatar()"><@ctx.i18n text = "修改头像"/></a></p>
                    </div>
                    <ul class="list-group list-group-striped">
                        <li class="list-group-item"><i class="fa fa-user"></i>
                            <b class="font-noraml"><@ctx.i18n text = "账号"/></b>：</b>
                            <p class="pull-right"><label class="label label-success">${user.username?default("/")}</label></p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-key"></i>
                            <b  class="font-noraml"><@ctx.i18n text = "密码安全等级"/>：</b>
                            <p class="pull-right" >
                                <#list dict.getType('sys_user_passwordModifySecurityLevel')>
                                    <#items as d>
                                        <#if d.status =='0' && d.dictValue == user.pwdSecurityLevel>
                                            <label class="label label-${d.listClass}"><@ctx.i18n text = "${d.dictLabel}"/></label>
                                        </#if>
                                    </#items>
                                </#list>
                            </p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-phone"></i>
                            <b  class="font-noraml"><@ctx.i18n text = "手机号码"/>：</b>
                            <p class="pull-right">${user.mobile?default("/")}</p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-envelope-o"></i>
                            <b  class="font-noraml"><@ctx.i18n text = "电子邮箱"/>：</b>
                            <p class="pull-right" >${user.email?default("/")}</p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-map-marker"></i>
                            <b  class="font-noraml"><@ctx.i18n text = "上次登陆地点"/>：</b>
                            <p class="pull-right" >${user.loginLocation?default("/")}</p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-calendar"></i>
                            <b  class="font-noraml"><@ctx.i18n text = "上次登陆时间"/>：</b>
                            <p class="pull-right" >${(user.loginTime?string('yyyy-MM-dd HH:mm:ss'))?default("/")}</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        
        <div class="col-sm-9 about">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5><@ctx.i18n text = "基本资料"/></h5>
                </div>
                <div class="ibox-content">
                    <div class="nav-tabs-custom">
                        <ul class="nav nav-tabs">
                            <#if active=="info">
                                <li class="active"><a href="#user_info" data-toggle="tab" aria-expanded="true"><@ctx.i18n text = "基本资料"/></a></li>
                                <li><a href="#modify_password" data-toggle="tab" aria-expanded="false"><@ctx.i18n text = "修改密码"/></a></li>
                                <#if config.getKey("SYS_IS_OAUTH") == "0"><li ><a href="#third_party_binding" data-toggle="tab" aria-expanded="false"><@ctx.i18n text = "第三方帐号绑定"/></a></li></#if>
                            <#elseif active=="password">
                                <li ><a href="#user_info" data-toggle="tab" aria-expanded="false"><@ctx.i18n text = "基本资料"/></a></li>
                                <li class="active"><a href="#modify_password" data-toggle="tab" aria-expanded="true"><@ctx.i18n text = "修改密码"/></a></li>
                                <#if config.getKey("SYS_IS_OAUTH") == "0"><li ><a href="#third_party_binding" data-toggle="tab" aria-expanded="false"><@ctx.i18n text = "第三方帐号绑定"/></a></li></#if>
                             <#elseif  active == "oauth2">
                                <li ><a href="#user_info" data-toggle="tab" aria-expanded="false"><@ctx.i18n text = "基本资料"/></a></li>
                                <li ><a href="#modify_password" data-toggle="tab" aria-expanded="false"><@ctx.i18n text = "修改密码"/></a></li>
                                <#if config.getKey("SYS_IS_OAUTH") == "0"><li class="active"><a href="#third_party_binding" data-toggle="tab" aria-expanded="true"><@ctx.i18n text = "第三方帐号绑定"/></a></li></#if>
                             </#if>
                        </ul>
                        <div class="tab-content">
                            <!--用户信息-->
                            <div class="tab-pane<#if active=="info"> active</#if> animated fadeInDown" id="user_info">
                                <form class="form-horizontal" id="form-user-edit">
                                    <!--隐藏ID-->
                                    <input name="id" id="id" type="hidden">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label"><span style="color: red; ">*</span><@ctx.i18n text = "用户姓名"/>：</label>
                                        <div class="col-sm-8">
                                            <div class="input-group">
                                                <input type="text" class="form-control" name="name" value="${user.name?default("")}" placeholder="<@ctx.i18n text = "用户姓名"/>">
                                                <span class="input-group-addon"><i class="fa fa-fw fa-user"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label"><span style="color: red; ">*</span><@ctx.i18n text = "手机号码"/>：</label>
                                        <div class="col-sm-8">
                                            <div class="input-group">
                                                <input type="text" class="form-control" id="mobile" name="mobile" maxlength="11" value="${user.mobile?default("/")}" placeholder="<@ctx.i18n text = "手机号码"/>">
                                                <span class="input-group-addon"><i class="fa fa-fw fa-mobile"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label"><@ctx.i18n text = "电子邮箱"/>：</label>
                                        <div class="col-sm-8">
                                            <div class="input-group">
                                                <input type="text" class="form-control" name="email" value="${user.email?default("/")}" placeholder="<@ctx.i18n text = "电子邮箱"/>">
                                                <span class="input-group-addon"><i class="fa fa-fw fa-envelope"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-4 col-sm-8">
                                            <button type="button" class="btn btn-sm btn-primary" onclick="submitUserInfo()"><i class="fa fa-check"></i><@ctx.i18n text = "保存"/></button>&nbsp;
                                            <button type="button" class="btn btn-sm btn-danger" onclick="opt.modal.closeTab()"><i class="fa fa-reply-all"></i><@ctx.i18n text = "关闭"/></button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            
                            <!--修改密码-->
                            <div class="tab-pane<#if active=="password"> active</#if> animated fadeInDown" id="modify_password">
                                <form class="form-horizontal" id="form-user-resetPwd">
                                    <#if user.pwdSecurityLevel == "0">
                                        <div class="form-group">
                                            <div class="col-sm-12">
                                                <div class="alert alert-dismissible callout callout-danger">
                                                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                                    <p><i class="icon fa fa-info"></i><@ctx.i18n text = "您的密码还是初始密码,为了您的账户安全请尽快修改密码!"/></p>
                                                </div>
                                            </div>
                                        </div>
                                    <#elseif user.pwdSecurityLevel == "1" || user.pwdSecurityLevel == "2">
                                        <div class="form-group">
                                            <div class="col-sm-12">
                                                <div class="alert alert-dismissible callout callout-warning">
                                                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                                    <p><i class="icon fa fa-info"></i><@ctx.i18n text = "您的密码强度级别低,为了您的账户安全请尽快修改密码!"/></p>
                                                </div>
                                            </div>
                                        </div>
                                    </#if>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label"><span style="color: red; ">*</span><@ctx.i18n text = "旧密码"/>：</label>
                                        <div class="col-sm-8">
                                            <@f.input type="password" name="oldPassword" placeholder = "旧密码"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label"><span style="color: red; ">*</span><@ctx.i18n text = "新密码"/>：</label>
                                        <div class="col-sm-8">
                                            <div class="input-group">
                                                <@f.input type="password" name="newPassword" placeholder = "新密码"/>
                                                <span class="input-group-addon" title="<@ctx.i18n text = "点击显示密码"/>"
                                                      data-toggle="tooltip"
                                                      data-placement="bottom"
                                                      data-custom-class="tooltip-warning"
                                                      onclick="changePass();"><i class="fa fa-fw fa-key text-danger"></i></span>
                                            </div>
                                            <span class="help-block m-b-none"><i class="fa fa-info-circle" style="color: red;"></i><@ctx.i18n text = "密码填写建议：长度不小于8位，且包含，大写英文字母、小写英文字母、数字和符号。"/></span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label"><span style="color: red;">*</span><@ctx.i18n text = "确认新密码"/>：</label>
                                        <div class="col-sm-8">
                                            <@f.input type="password" name="confirmPassword" placeholder = "确认新密码"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-4 col-sm-8">
                                            <button type="button" class="btn btn-sm btn-primary" onclick="submitChangPassword()"><i class="fa fa-check"></i><@ctx.i18n text = "保存"/></button>&nbsp;
                                            <button type="button" class="btn btn-sm btn-danger" onclick="opt.modal.closeTab()"><i class="fa fa-reply-all"></i><@ctx.i18n text = "关闭"/></button>
                                        </div>
                                    </div>
                                </form>
                            </div>

                            <#if config.getKey("SYS_IS_OAUTH") == "0">
                            <!-- 绑定第三方账号登录-->
                            <div class="tab-pane <#if active=="oauth2"> active</#if>  animated fadeInDown" id="third_party_binding">
                                <#if err != "">
                                    <@f.tip class="danger" animated="">${err}</@f.tip>
                                </#if>
                                <div class="form-horizontal">
                                    <div class="form-group">
                                        <div class="col-sm-12">
                                            <@table id="bootstrap-table">
                                            </@table>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                    <div class="col-md-12">
                                        <div id="git-user-binding">
                                            <h4 class="provider-desc">
                                                你可以绑定以下第三方帐号用于J2eeFAST系统
                                            </h4>
                                            <div id="auth2list" class="user-bind">
                                            </div>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                            </div>
                            </#if>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
	</section>
<@footer>
<script type="text/javascript">
        <#if config.getKey("SYS_IS_OAUTH") == "0">
        var auth2 = ["gitee","oschina","github","qq"];

        $(function() {

            /* 初始表格对象 */
            var options = {
                url: baseURL + 'sys/user/profile/oauth2/list',
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                pageSize: 5,
                pageList: [5, 10, 15],
                sortName: "createTime",
                uniqueId: "id", /* 唯一ID */
                responseHandler: function(data){
                    if(data.code === opt.variable.web_status.SUCCESS){
                        if(data.data.totalCount > 0){
                            for(var i=0; i<data.data.list.length; i++){
                                var value = opt.common.getJsonValue(data.data.list[i],"source");
                                console.log(value);
                                opt.common.remove(auth2,value);
                            }
                        }
                    }
                    var html = "";
                    for(var i=0; i<auth2.length; i++){
                        html += '<a class="third-app" href="#" onclick="authUrl(\''+auth2[i]+'\');" title="使用 '+auth2[i]+' 账号授权登录" data-toggle="tooltip" data-placement="top">'+
                            '<div class="git-other-login-icon">'+
                            <#--'<img src="${ctxStatic}/static/img/'+(auth2[i] === 'qq')?'qq-no':auth2[i]+'.svg"/>'+-->
                            '<img src="${ctxStatic}/static/img/'+(auth2[i] == "qq"?'qq-no':auth2[i])+'.svg"/>'+
                            '</div>'+
                            '<span class="app-name">'+auth2[i]+'</span>'+
                            '</a>';
                    }
                    $("#auth2list").html("").append(html);
                },
                columns:[
                    {
                        title: "<@ctx.i18n text = "序号"/>", width: 10, formatter: function (value, row, index) {
                            return $.table.serialNumber(index);
                        }
                    },
                    {field: 'source', title: "<@ctx.i18n text = "绑定账号平台"/>"},
                    {field: 'username', title:  "<@ctx.i18n text = "账号详情"/>",formatter: function (value,row,index) {
                            return '<img src="'+row.avatar+'"/>'+'<span>'+value+'</span>';
                    }},
                    {field: 'createTime',title: "<@ctx.i18n text = "绑定时间"/>"},
                    {title: "<@ctx.i18n text = "操作"/>", formatter: function (value, row, index) {
                            var actions = [];
                            actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="unlockAuth(\'' + row.id + '\')"><i class="fa fa-remove"></i>解除绑定</a>');
                            return actions.join('');
                        }
                    }
                ]
            };
            $.table.init(options);
        });

        function unlockAuth(id) {
            opt.modal.confirm("您确定要解除此账号绑定?",function () {
                opt.operate.post(baseURL+'sys/user/profile/oauth2/del',{"id":id},function(){
                    location.reload();
                })
            })
        }
        </#if>
	    /*用户管理-头像*/
	    function avatar() {
	        var url = baseURL + 'sys/user/profile/avatar';
	        opt.modal.open("<@ctx.i18n text = "修改头像"/>", url);
	    }

	    function changePass(){
	        if($('#newPassword').attr('type') == "password"){
                $('[data-toggle="tooltip"]').attr('data-original-title',"<@ctx.i18n text = "点击隐藏密码"/>");
                $('#newPassword').attr('type',"text");
            }else{
                $('[data-toggle="tooltip"]').attr('data-original-title',"<@ctx.i18n text = "点击显示密码"/>");
                $('#newPassword').attr('type','password');
            }
        }
	    
	    /*用户信息-修改*/
	    $("#form-user-edit").validate({
			onkeyup: false,
			rules:{
				name:{
					required:true,
				},
                mobile:{
                    isMobile: opt.common.trim($("input[name='mobile']").val()),
                    remote: {
                        url: baseURL + "sys/user/checkMobileUnique",
                        type: "POST",
                        dataType: "html",           /* 接受数据格式 */
                        data: {
                            "mobile": function() {
                                return opt.common.trim($("input[name='mobile']").val());
                            },
                            "userId":function() {
                                return opt.common.trim($("#userId").val());
                            }
                        },
                        dataFilter: function(data, type) {
                            return opt.validate.unique(data);
                        }
                    }
                }
			},
			messages: {
				"name": {
	                required: "请输入用户名称"
	            },
				"mobile":{
					required: "请输入手机号码",
		        	remote: "手机号码已经存在"
				}
		    },
		    focusCleanup: true
		});
		
		function submitUserInfo() {
	        if (opt.validate.form("form-user-edit")) {
	        	opt.operate.saveModal(baseURL + "sys/user/profile/updateUser", $('#form-user-edit').serialize(),resultExe);
	        }
	    }

	    function resultExe(r){
            if(r.code == opt.variable.web_status.SUCCESS){
                 opt.modal.success($.i18n.prop("操作成功!"), function () {
                     parent.location.reload();
                     return;
                 });
            }else{
                opt.modal.warning(r.msg);
                return;
            }
        }

	    /*用户管理-修改密码*/
	    $("#form-user-resetPwd").validate({
	    	onkeyup: false,
			rules:{
				oldPassword:{
					required:true,
					remote: {
	                    url: baseURL + "sys/user/profile/checkPassword",
	                    type: "get",
	                    dataType: "html",
	                    data: {
	                        password: function() {
	                            return $("input[name='oldPassword']").val();
	                        }
	                    },
                        dataFilter: function(data, type) {
                            return opt.validate.unique(data);
                        }
	                }
				},
				newPassword: {
	                required: true,
	                minlength: 8,
	    			maxlength: 20
	            },
	            confirmPassword: {
	                required: true,
	                equalTo: "#newPassword"
	            }
			},
			messages: {
	            oldPassword: {
	                required: "请输入原密码",
	                remote: "原密码错误"
	            },
	            newPassword: {
	                required: "请输入新密码",
	                minlength: "密码不能小于8个字符",
	                maxlength: "密码不能大于20个字符"
	            },
	            confirmPassword: {
	                required: "请再次输入新密码",
	                equalTo: "两次密码输入不一致"
	            }

	        },
	        focusCleanup: true
		});

	    function authUrl(type) {
	        var  url =  "${ctxStatic}/auth/"+type;
            top.location.href =url;
        }
		
		function submitChangPassword () {
	        if (opt.validate.form("form-user-resetPwd")) {
	        	opt.operate.saveModal(baseURL + "sys/user/profile/resetPwd", $('#form-user-resetPwd').serialize(),resultExe);
	        }
	    }
	</script>
    </@footer>
</@pageTheme>
