<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
	<title>人员证书信息管理</title>
	<meta name="decorator" content="default"/>
	<style type="text/css">
		img{width: 50px;height: 50px;}
	</style>
	<script type="text/javascript">
        $(function(){
//            $("img").not(".upload_ico").each(function () {
//                var num = 1 ;
//                $(this).click(function () {
//                    var flag = num%2;
//                    if(flag == 1){
//                        $(this).css("width","90%");
//                        $(this).css("height","90%");
//                        num++;
//                    }else if(flag ==0){
//                        $(this).css("width","50px");
//                        $(this).css("height","50px");
//                        num++;
//                    }
//                })
//            });
        });
	</script>
	<script type="text/javascript">
        function openDialogre(title,url,width,height,target){
            if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){//如果是移动端，就使用自适应大小弹窗
                width='auto';
                height='auto';
            }else{//如果是PC端，根据用户设置的width和height显示。

            }
            top.layer.open({
                type: 2,
                area: [width, height],
                title: title,
                maxmin: true, //开启最大化最小化按钮
                content: url ,
                btn: ['确定','关闭'],
                yes: function(index, layero){
                    var body = top.layer.getChildFrame('body', index);
                    var iframeWin = layero.find('iframe')[0]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                    var inputForm = body.find('#inputForm');
                    var top_iframe;
                    if(target){
                        top_iframe = target;//如果指定了iframe，则在改frame中跳转
                    }else{
                        top_iframe = top.getActiveTab().attr("name");//获取当前active的tab的iframe
                    }
                    inputForm.attr("target",top_iframe);//表单提交成功后，从服务器返回的url在当前tab中展示
                    var formId = inputForm.attr("id");
                    if(formId){
                        var $document = iframeWin.contentWindow.document;

                        var fileInput = $document.getElementById("this_upload_file_1").files[0];
						var fileSize = $(fileInput).size();
						if(fileSize<1){
						    top.layer.alert('请上传证书文件',{icon:0,title:'系统提示'});
						    return ;
						}

                        $document.getElementById(formId).setAttribute("action","${ctx}/hr/certificate/save");
                        formSubmit($document,formId,index);
                    }
                },
                cancel: function(index){
                }
            });
        }
        function formSubmit($document,inputForm,index){
            var validateForm = $($document.getElementById(inputForm)).validate({
                submitHandler: function(form){
                    loading('正在提交，请稍等...');
                    form.submit();
                },
                errorContainer: "#messageBox",
                errorPlacement: function(error, element) {
                    $($document.getElementById("#messageBox")).text("输入有误，请先更正。");
                    if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
                        error.appendTo(element.parent().parent());
                    } else {
                        error.insertAfter(element);
                    }
                }
            });
            if(validateForm.form()){

                //必须添加证书文件才能提交
                //var obj =$($document.getElementById(inputForm));

                var loadingMessage = parent.layer.load(0, {shade: false,opacity:0.1});
                $($document.getElementById(inputForm)).ajaxSubmit({
                    success:function(data) {
                        top.layer.close(index);
                        history.go(0);
                        parent.layer.msg("保存成功！！！",{icon:6});
                        parent.layer.close(loadingMessage);
                    }
                });
            }
        }
	</script>
</head>
<body class="hideScroll">
		<form:form id="inputFormCertificate" modelAttribute="userInfo"  class="form-horizontal">
		<form:hidden path="id"/>
		<form:hidden path="userOffice.userId"/>
		<form:hidden path="userOffice.companyId"/>
		<form:hidden path="userOffice.id"/>
		<form:hidden path="userId"/>
		<form:hidden path="companyId"/>
		<sys:message content="${message}"/>
		<table class="table table-bordered  table-condensed dataTables-example dataTable no-footer">
		   <tbody>
			   <tr>
				   <td class="width-15 active"><label class="pull-right">姓名：</label></td>
				   <td class="width-35">
						   ${userInfo.name}
				   </td>
				   <td class="width-15 active"><label class="pull-right">性别：</label></td>
				   <td class="width-35">
						   ${fns:getDictLabel(userInfo.gender,'sex' ,'' )}
				   </td>
			   </tr>
			   <tr>
				   <td class="width-15 active"><label class="pull-right">昵称：</label></td>
				   <td class="width-35">
						   ${userInfo.nickName}
				   </td>
				   <td class="width-15 active"><label class="pull-right">工号：</label></td>
				   <td class="width-35">
						   ${userInfo.jobNumber}
				   </td>
			   </tr>
			   <tr>
				   <td class="width-15 active"><label class="pull-right">联系电话：</label></td>
				   <td class="width-35">
						   ${userInfo.mobilePhone}
				   </td>
				   <td class="width-15 active"><label class="pull-right">电子邮件：</label></td>
				   <td class="width-35">
						   ${userInfo.email}
				   </td>
			   </tr>
			   <tr>
				   <td class="width-15 active"><label class="pull-right">个人简介：</label></td>
				   <td class="width-35" colspan="3">
						   ${userInfo.personalProfile}
				   </td>
			   </tr>
			   <tr>
				   <td class="width-15 active"><label class="pull-right">备注信息：</label></td>
				   <td class="width-35" colspan="3">
						   ${userInfo.remarks}
				   </td>
			   </tr>
		   		<tr>
					<td class="width-15 active"><label class="pull-right"></label></td>
					<td class="width-35" colspan="3">
						<div style="float:left; height: 100%; width: 100%; ">
							<div style="display: inline-block">
								<a  onclick="openDialogre('新增证书','${ctx}/hr/certificate/certificateAdd?id=${userInfo.id}&userOfficeId=${userInfo.userOffice.id}&userId=${userInfo.userOffice.userId}&companyId=${userInfo.userOffice.companyId}&dialog=add','80%','80%')" id="add_certificate" class="btn btn-info btn-xs" >
									<i class="fa fa-plus"></i> 添加证书
								</a>
							</div>
							<table id="certificate_list"  style="text-align: center;width: 100%;margin-top:10px;"  class="table table-striped table-bordered table-condensed" >
								<tr>
									<td>序号</td><td>证书名称</td><td>证书编号</td>
									<td>证书专业</td><td>证书等级</td><td>取得日期</td><td>到期日期</td>
									<td>操作</td>
								</tr>
								<c:forEach items="${userInfo.certificateList}" var="cer" varStatus="index">
									<tr>
										<td>${index.index + 1}</td>
										<td>${cer.name}</td>
										<td>${cer.number}</td>
										<td>${cer.profession}</td>
										<td>${cer.level}</td>
										<td><fmt:formatDate value="${cer.getDate}" pattern="yyyy-MM-dd"/></td>
										<td><fmt:formatDate value="${cer.endDate}" pattern="yyyy-MM-dd"/></td>
										<td>
											<div>
												<div style="float: right;margin: 5px;">
													<%--<a href="${ctx}/workfullmanage/workFullManage/downLoadAttach?file=${cer.certificate.url}" class="btn btn-success btn-xs">下载</a>--%>
														<a href="javascript:location.href='${ctx}/workfullmanage/workFullManage/downLoadAttach?file='+encodeURIComponent('${cer.certificate.url}');" class="btn btn-success btn-xs">下载</a>

												</div>
												<div style="float: right;margin: 5px;">
													<img alt="" src="${cer.certificate.url}" onclick="openDialogView(' ','${ctx}/sys/picturepreview/picturePreview?url=${cer.certificate.url}','80%','80%')" height="50px;" width="50px;">
												</div>
											</div>
										</td>
									</tr>
								</c:forEach>
							</table>
						</div>
					</td>
				</tr>
		 	</tbody>
		</table>
	</form:form>
</body>
</html>