<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
	<title>添加周报</title>
	<meta name="decorator" content="default"/>
	<style>
		#status-error{
			left:-20px;
			top:30px;
		}
		#thisContent-error{
			left:0;
			top:120px;
		}
	</style>
	<script type="text/javascript">
        function insertTitle(tValue){
            var files = $("#attachment_file")[0].files;
            for(var i = 0;i<files.length;i++) {
                var file = files[i];
                var attachmentId = "";
                var attachmentFlag = "77";
                console.log(file);
                var timestamp = new Date().getTime();

                var storeAs = "attachment-file/workContractInfo/" + timestamp + "/" + file['name'];
                var uploadPath = "http://gangwan-app.oss-cn-hangzhou.aliyuncs.com/" + storeAs;
                /*将这段字符串存到数据库即可*/
                var divId = "_attachment";
                $("#addFile" + divId).show();
                multipartUploadWithSts(storeAs, file, attachmentId, attachmentFlag, uploadPath, divId, 0);
            }
        }
        //上传图片
        <%--function this_upload_image_button(index){--%>
            <%--var length = $("#this_upload_image_div :file").length;--%>
            <%--var this_item_id = 'this_upload_image_'+index;--%>
            <%--var last_item_id = $('img[id^=this_upload_image_]:last').attr('id');--%>
            <%--if(length==6 && this_item_id==last_item_id){--%>
                <%--top.layer.alert('最多上传5张图片',{icon:0,title:'系统提示'});--%>
                <%--return;--%>
            <%--}--%>
            <%--$("#this_upload_file_"+index).click();--%>
        <%--}--%>
        <%--function this_upload_show_image(index){--%>
            <%--var obj =$("#this_upload_file_"+index)[0].files[0];--%>
            <%--var fileType = obj.type;--%>
            <%--var url ;--%>
            <%--if(fileType.endsWith("png")||fileType.endsWith("bmp")||fileType.endsWith("jpg")||fileType.endsWith("jpeg")){--%>
                <%--url = window.URL.createObjectURL(obj);--%>
            <%--}else {--%>
                <%--//需要置空--%>
                <%--var file = $("#this_upload_file_"+index);--%>
                <%--file.after(file.clone().val(""));--%>
                <%--file.remove();--%>
                <%--top.layer.alert('请上传*.png,*.bmp,*.jpg/jpeg格式的图片',{icon:0,title:'系统提示'});--%>
                <%--return false ;--%>
            <%--}--%>
            <%--$("#this_upload_image_"+index).attr("src",url);--%>
            <%--var length = $("#this_upload_image_div :file").length;--%>
            <%--var this_item_id = 'this_upload_image_'+index;--%>
            <%--var last_item_id = $('img[id^=this_upload_image_]:last').attr('id');--%>
            <%--if( this_item_id==last_item_id &&  length < 6 ){--%>
                <%--this_upload_image_append(index);--%>
                <%--this_add_x(index);--%>
            <%--}--%>
        <%--}--%>
        <%--function this_upload_image_append(index){--%>
            <%--var div1 = "<div id='this_upload_div_"+(index+1)+"' style='float:left;position:relative;width: 57px;height: 57px;'>";--%>
            <%--var img = '<img  id="this_upload_image_'+(index+1)+'" class="upload_ico" width="50px" height="50px"  onclick="this_upload_image_button('+(index+1)+')" src = "${pageContext.request.contextPath}/static/uploadify/upload_ico.png" style="cursor:pointer;"/>';--%>
            <%--var input = '<input id="this_upload_file_'+(index+1)+'" type="file" style="display:none;" name="this_upload_files" onChange="this_upload_show_image('+(index+1)+')" /><br>';--%>
            <%--var div2 = "</div>";--%>

            <%--$("#this_upload_image_div").append(div1+img+input+div2);--%>
        <%--}--%>
        <%--function this_close_img(index) {--%>
            <%--$("#this_upload_div_"+index).remove();--%>
            <%--var length = $("#this_upload_image_div :file").length;--%>
            <%--if(length == 0){--%>
                <%--this_add_div();--%>
            <%--}else if(length == 1){--%>
                <%--var x = $("#this_upload_image_div").find("span").text();--%>
                <%--if("x" != x){--%>
                    <%--this_add_div();--%>
                <%--}--%>
            <%--}--%>
        <%--}--%>
        <%--function this_add_x(index) {--%>
            <%--var span = '<span id="this_upload_close_'+index+'" class="close_ico" style="cursor:pointer; position: absolute;top:-1px;right: -1px; display:inline-block;z-index:1;color: red;" onclick="this_close_img('+index+');">x</span>';--%>
            <%--$("#this_upload_image_div").find("img:eq(-2)").before(span);--%>
        <%--}--%>
        <%--function this_add_div() {--%>
            <%--var this_upload_div_1 =--%>
                <%--'<div id="this_upload_div_1" style="float: left;position:relative;width: 57px;height: 57px;" >'+--%>
                <%--'<img  id="this_upload_image_1" class="upload_ico" style="cursor:pointer;"  src="${pageContext.request.contextPath}/static/uploadify/upload_ico.png"  onclick="this_upload_image_button(1)"/>'+--%>
                <%--'<input id="this_upload_file_1" type="file" style="display:none"  name="this_upload_files"  onchange="this_upload_show_image(1)" /><br>'+--%>
                <%--'</div>';--%>
            <%--$("#this_upload_image_div").html("").append(this_upload_div_1);--%>
        <%--}--%>

        <%--//删除附件--%>
        <%--function delFile(id,attaId,attachmentUrl,obj) {--%>
            <%--var loadingMessage = parent.layer.load(0, {shade: [0.1,'#393d49']});--%>
            <%--var tr = $(obj).parent().parent();--%>
            <%--$.ajax({--%>
                <%--type:'POST',--%>
                <%--dataType:'json',--%>
                <%--url:'${ctx}/work/report/workReport/delFile',--%>
                <%--data:{"id":id,"attaId":attaId,"attachmentUrl":attachmentUrl},--%>
                <%--cache:false,--%>
                <%--success: function() {--%>
                    <%--//先修改序号，再删除--%>
                    <%--$(tr).nextAll().each(function (i,n) {--%>
                        <%--var num = $(n).find("td:first").text().trim();--%>
                        <%--$(n).find("td:first").text(parseInt(num)-1);--%>
                    <%--});--%>
                    <%--tr.remove();--%>
                    <%--parent.layer.msg("删除成功！！！",{icon:6});--%>
                    <%--parent.layer.close(loadingMessage);--%>
                <%--},--%>
                <%--error:function () {--%>
                    <%--parent.layer.msg("删除失败！！！",{icon:3});--%>
                    <%--parent.layer.close(loadingMessage);--%>
                <%--}--%>
            <%--});--%>
        <%--}--%>
	</script>
	<script type="text/javascript">
		var validateForm;
		function doSubmit(){//回调函数，在编辑和保存动作时，供openDialog调用提交表单。
		  if(validateForm.form()){
			  $("#inputForm").submit();
			  return true;
		  }
	
		  return false;
		}
		$(document).ready(function() {
			validateForm = $("#inputForm").validate({
				submitHandler: function(form){
					loading('正在提交，请稍等...');
					form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});

            $("#attachment_btn").click(function () {
                var length = $("#listAttachment tbody").find("tr").length ;
                if(length==5 ){
                    top.layer.alert('最多上传5张图片',{icon:0,title:'系统提示'});
                    return;
                }

                $("#attachment_file").click();

            });
			
					laydate.render({
			            elem: '#startDate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
			            event: 'focus' ,//响应事件。如果没有传入event，则按照默认的click
                        type: 'date'
			        });
					laydate.render({
			            elem: '#finishDate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
			            event: 'focus' ,//响应事件。如果没有传入event，则按照默认的click
                        type: 'date'
			        });

		});
		// function addRow(list, idx, tpl, row){
		// 	$(list).append(Mustache.render(tpl, {
		// 		idx: idx, delBtn: true, row: row
		// 	}));
		// 	$(list+idx).find("select").each(function(){
		// 		$(this).val($(this).attr("data-value"));
		// 	});
		// 	$(list+idx).find("input[type='checkbox'], input[type='radio']").each(function(){
		// 		var ss = $(this).attr("data-value").split(',');
		// 		for (var i=0; i<ss.length; i++){
		// 			if($(this).val() == ss[i]){
		// 				$(this).attr("checked","checked");
		// 			}
		// 		}
		// 	});
		// }
		// function delRow(obj, prefix){
		// 	var id = $(prefix+"_id");
		// 	var delFlag = $(prefix+"_delFlag");
		// 	if (id.val() == ""){
		// 		$(obj).parent().parent().remove();
		// 	}else if(delFlag.val() == "0"){
		// 		delFlag.val("1");
		// 		$(obj).html("&divide;").attr("title", "撤回删除");
		// 		$(obj).parent().parent().addClass("error");
		// 	}else if(delFlag.val() == "1"){
		// 		delFlag.val("0");
		// 		$(obj).html("&times;").attr("title", "删除");
		// 		$(obj).parent().parent().removeClass("error");
		// 	}
		// }
	</script>
</head>
<body>
<div class="single-form">
	<div class="container">
		<c:if test="${forUpdate != 'forUpdate'}">
		<div class="tabs-container">
			<div class="layui-tab" id="tabDiv">
				<ul class="layui-tab-title" >
					<li><a href="${ctx}/work/report/workReport/form?type=1">添加日报</a></li>
					<li class="active"><a href="${ctx}/work/report/workReport/form?type=2">添加周报</a></li>
					<li><a href="${ctx}/work/report/workReport/form?type=3">添加月报</a></li>
				</ul>
			</div>
		</div>
		</c:if>

	<form:form id="inputForm" modelAttribute="workReport" enctype="multipart/form-data" action="${ctx}/work/report/workReport/save" method="post" class="form-horizontal">
		<form:hidden path="id"/>
		<input type="hidden" name="type" value="2">
		<sys:message content="${message}"/>
			<div class="form-group layui-row first  lw12">
				<div class="form-group-label"><h2>基础信息</h2></div>
				<div class="layui-item layui-col-sm6">
					<label class="layui-form-label"><span class="require-item">*</span>类型：</label>
					<div class="layui-input-block">
						<input htmlEscape="false" readonly="true" class="form-control  layui-input" value="${fns:getDictLabel('2','work_report_type' ,'' )}"/>
					</div>
				</div>
				<div class="layui-item layui-col-sm6">
					<label class="layui-form-label"><span class="require-item">*</span>状态：</label>
					<div class="layui-input-block">
						<div class="input-group">
							<form:radiobuttons path="status" items="${fns:getDictList('oa_notify_status')}" itemLabel="label" itemValue="value" htmlEscape="false" class="i-checks required"/>
						</div>
					</div>
				</div>
				<div class="layui-item layui-col-sm12 with-textarea" style="min-height: 142px;">
					<label class="layui-form-label"><span class="require-item">*</span>本周工作内容：</label>
					<div class="layui-input-block">
						<form:textarea path="thisContent" htmlEscape="false" rows="6"  maxlength="2000"  class="form-control required"/>
					</div>
				</div>
				<div class="layui-item layui-col-sm12 with-textarea" style="min-height: 142px;">
					<label class="layui-form-label">下周工作计划：</label>
					<div class="layui-input-block">
						<form:textarea  path="nextContent" htmlEscape="false" rows="6" maxlength="2000" class="form-control "/>
					</div>
				</div>
				<div class="layui-item layui-col-sm6">
					<label class="layui-form-label">开始时间：</label>
					<div class="layui-input-block">
						<input id="startDate" name="startDate" type="text" maxlength="20" class="laydate-icondate form-control layer-date layui-input laydate-icon"
							   value="<fmt:formatDate value="${workReport.startDate}" pattern="yyyy-MM-dd"/>"/>
					</div>
				</div>
				<div class="layui-item layui-col-sm6">
					<label class="layui-form-label">结束时间：</label>
					<div class="layui-input-block">
						<input id="finishDate" name="finishDate" type="text" maxlength="20" class="laydate-icondate form-control layer-date layui-input laydate-icon"
							   value="<fmt:formatDate value="${workReport.finishDate}" pattern="yyyy-MM-dd"/>"/>
					</div>
				</div>
				<div class="layui-item layui-col-sm12 with-textarea">
					<label class="layui-form-label">备注：</label>
					<div class="layui-input-block">
						<form:textarea  path="remarks" htmlEscape="false" rows="4" maxlength="200" class="form-control "/>
					</div>
				</div>
				<c:if test="${workReport.status ne '1'}">
				<div class="layui-item layui-col-sm12">
					<label class="layui-form-label"><span class="require-item">*</span>接收人：</label>
					<div class="layui-input-block with-icon">
						<div class="input-group">
							<sys:treeselect id="workReportRecordUser" name="workReportRecordIdsUser" value="${workReport.workReportRecordIdsUser}" labelName="workReportRecordNamesUser" labelValue="${workReport.workReportRecordNamesUser}"
											title="用户" url="/sys/office/treeDataAll?type=3" cssClass="form-control required layui-input" notAllowSelectParent="true" checked="true"/>
						</div>
					</div>
				</div>
				</c:if>
			</div>
			<div class="form-group layui-row">
				<div class="form-group-label"><h2>相关附件</h2></div>
				<div class="layui-item nav-btns">
					<a id="attachment_btn" class="nav-btn nav-btn-add" title="添加附件"><i class="fa fa-plus"></i>&nbsp;添加附件</a>
				</div>
				<div id="addFile_attachment" style="display: none" class="upload-progress">
					<span id="fileName_attachment" ></span>
					<b><span id="baifenbi_attachment" ></span></b>
					<div class="progress">
						<div id="jindutiao_attachment" class="progress-bar" style="width: 0%" aria-valuenow="0">
						</div>
					</div>
				</div>
                <input id="attachment_file" type="file" name="attachment_file" multiple="multiple" style="display: none;" onChange="if(this.value)insertTitle(this.value);"/>
				<span id="attachment_title"></span>
				<div class="layui-item layui-col-xs12" style="padding:0 16px;">
					<table id="listAttachment" class="table table-bordered table-condensed details">
						<thead>
						<tr>
								<%-- <th>序号</th>--%>
							<th>文件</th>
							<th>上传人</th>
							<th>上传时间</th>
							<th width="180px">操作</th>
						</tr>
						</thead>
						<tbody id="file_attachment">
						<c:if test="${workReport.status == '0'}">
							<c:forEach items="${workReport.workAttachments}" var = "workClientAttachment" varStatus="status">
								<tr>
										<%-- <td>${status.index + 1}</td>--%>
									<c:choose>
										<c:when test="${fn:containsIgnoreCase(workClientAttachment.attachmentName,'jpg')
                                                           or fn:containsIgnoreCase(workClientAttachment.attachmentName,'png')
                                                           or fn:containsIgnoreCase(workClientAttachment.attachmentName,'gif')
                                                           or fn:containsIgnoreCase(workClientAttachment.attachmentName,'bmp')
                                                           or fn:containsIgnoreCase(workClientAttachment.attachmentName,'jpeg')}">
											<td><img src="${workClientAttachment.url}" width="50" height="50" onclick="openDialogView('预览','${ctx}/sys/picturepreview/picturePreview?url=${workClientAttachment.url}','90%','90%')" alt="${workClientAttachment.attachmentName}">
										</c:when>
										<c:otherwise>
											<c:choose>
												<c:when test="${fn:containsIgnoreCase(workClientAttachment.attachmentName,'pdf')}">
													<td><a class="attention-info" href="javascript:void(0)" onclick="preview('预览','${workClientAttachment.url}','90%','90%','1')">${workClientAttachment.attachmentName}</a></td>
												</c:when>
												<c:otherwise>
													<td><a class="attention-info" href="javascript:void(0)" onclick="preview('预览','${workClientAttachment.url}','90%','90%')">${workClientAttachment.attachmentName}</a></td>
												</c:otherwise>
											</c:choose>
										</c:otherwise>
									</c:choose>
									<td>${workClientAttachment.createBy.name}</td>
									<td><fmt:formatDate value="${workClientAttachment.createDate}" type="both"/></td>
									<td class="op-td">
										<div class="op-btn-box" >
											<a href="javascript:location.href='${ctx}/workfullmanage/workFullManage/downLoadAttach?file='+encodeURIComponent(encodeURIComponent('${workClientAttachment.url}'));" class="op-btn op-btn-download"><i class="fa fa-download"></i>&nbsp;下载</a>
											<c:if test="${workClientAttachment.createBy.id eq fns:getUser().id}">
												<a href="javascript:void(0)" onclick="deleteFileFromAliyun(this,'${ctx}/sys/workattachment/deleteFileFromAliyun?url=${workClientAttachment.url}&id=${workClientAttachment.id}&type=2','addFile_attachment','_attachment')" class="op-btn op-btn-delete" ><i class="fa fa-trash"></i>&nbsp;删除</a>
											</c:if>
										</div>
									</td>
								</tr>
							</c:forEach>
						</c:if>
						</tbody>
					</table>
				</div>
			</div>
			<c:if test="${workReport.status eq '1'}">
			<div class="form-group layui-row">
				<div class="form-group-label"><h2>接收人信息</h2></div>
				<div class="layui-item layui-col-xs12" style="padding:0 16px;">
					<table id="contentTableUser" class="table table-bordered table-condensed details">
						<thead>
						<tr>
							<th>接收人</th>
							<th>接收部门</th>
							<th>阅读状态</th>
							<th>阅读时间</th>
						</tr>
						</thead>
						<tbody>
						<c:forEach items="${workReport.workReportRecordListUser}" var="workReportRecordU">
							<tr>
								<td>
										${workReportRecordU.user.name}
								</td>
								<td>
										${workReportRecordU.user.office.name}
								</td>
								<td>
										${fns:getDictLabel(workReportRecordU.readFlag, 'oa_notify_read', '')}
								</td>
								<td>
									<fmt:formatDate value="${workReportRecordU.readDate}" pattern="yyyy-MM-dd HH:mm:ss"/>
								</td>
							</tr>
						</c:forEach>
						</tbody>
					</table>
				</div>
			</div>
			</c:if>
			</form:form>

		<!-- ==已发布，评论与回复== -->
		<c:if test="${workReport.status eq '1'}">
			<div class="form-group layui-row">
				<div class="form-group-label"><h2>评论信息</h2></div>
				<div class="layui-item layui-col-xs12" style="padding:0 16px;">
					<table id="commentTable" class="table table-bordered table-condensed details">
						<thead>
						<tr>
							<th>评论者|回复者</th>
							<th>类型</th>
							<th>内容</th>
							<th>创建时间</th>
							<th>更新时间</th>
							<th>备注信息</th>
						</tr>
						</thead>
						<tbody>
						<c:choose>
							<c:when test="${empty workReportReviewList}">
								<tr>
									<td colspan="6" align="center">尚无评论|回复</td>
								</tr>
							</c:when>
							<c:when test="${!empty workReportReviewList}">
								<tr>
									<th  class="sort-column createBy.name">评论者|回复者</th>
									<th  class="sort-column type">类型</th>
									<th  class="sort-column content">内容</th>
									<th  class="sort-column createDate">创建时间</th>
									<th  class="sort-column updateDate">更新时间</th>
									<th  class="sort-column remarks">备注信息</th>
								</tr>
								<c:forEach items="${workReportReviewList}" var="workReportReview">
									<tr>
										<td>
												${workReportReview.createBy.name}
										</td>
										<td>
												${fns:getDictLabel(workReportReview.type, 'work_report_review_type', '')}
										</td>
										<td>
												${workReportReview.content}
										</td>
										<td>
											<fmt:formatDate value="${workReportReview.createDate}" pattern="yyyy-MM-dd HH:mm:ss"/>
										</td>
										<td>
											<fmt:formatDate value="${workReportReview.updateDate}" pattern="yyyy-MM-dd HH:mm:ss"/>
										</td>
										<td>
												${workReportReview.remarks}
										</td>
									</tr>
								</c:forEach>
							</c:when>
						</c:choose>
						</tbody>
					</table>
				</div>
			</div>
		</c:if>
	</div>
</div>
</body>
</html>