<%@ 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" src="${ctxStatic}/ckeditor/ckeditor.js"></script>--%>
    <script type="text/javascript" language="JavaScript" for="window" event="onload">
        var validateForm;
        function doSubmit(obj){//回调函数，在编辑和保存动作时，供openDialog调用提交表单。
            if(validateForm.form()){

                if(obj == 1){
                    $('#flag').val('yes');
                }else{
                    $('#flag').val('no');
                }

                $("#inputForm").submit();
                return true;
            }

            return false;
        }

        $(document).ready(function() {
            //$("#name").focus();
            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);
                    }
                }
            });
            //只做查看时，禁用掉以下标签
            <%--$('input,textarea,select').attr('disabled',<%=request.getAttribute("disabled")%>);--%>

        });
    </script>
    <script type="text/javascript">
        function insertTitle(tValue){
            var list = "${oaNotify.workAttachments}";
            var size = (list.split('url')).length-1;
            var files = $("#attachment_file")[0].files;
            for(var i = 0;i<files.length;i++) {
                var file = files[i];
                var attachmentId = "";
                var attachmentFlag = "107";
                console.log(file);
                var timestamp = new Date().getTime();

                var storeAs = "attachment-file/oaNotify/" + 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, size);
            }
        }

        function changeUser(ids,names,parents) {
            var split = ids.split(',');
            var split2 = names.split(',');
            $("#userTableList").html("");
            userIdx=0;
            for(var i=0;i<split.length;i++){
                var id = split[i];
                if(id==''||id==null){
                    continue;
                }
                var obj = {'id':id,'name':split2[i],'officeName':parents[i]};
                addRow('#userTableList',userIdx,userTpl,obj);
                userIdx+=1;
            }
        }

        function changeOffice(ids,names,parentIds) {
            $("#officeTableList").html("");
            officeIdx=0;
            for(var i=0;i<ids.length;i++){
                var obj = {'id':ids[i],'name':parentIds[i]};
                addRow('#officeTableList',officeIdx,officeTpl,obj);
                officeIdx+=1;
            }
        }
        function getSelectOfficeIds() {
            var selectedIds = "";
            var pidArr = $("#officeTableList tr .officeId");
            for(var i=0;i<pidArr.length;i++){
                selectedIds+=$(pidArr[i]).val();
                selectedIds+=",";
            }
            return selectedIds;
        }
        function getSelectUserIds() {
            var selectedIds = "";
            var pidArr = $("#userTableList tr .userId");
            for(var i=0;i<pidArr.length;i++){
                selectedIds+=$(pidArr[i]).val();
                selectedIds+=",";
            }
            return selectedIds;
        }

    </script>

</head>
<body >
<div class="single-form">
    <div class="container  view-form">
        <form:form id="inputForm" modelAttribute="oaNotify" enctype="multipart/form-data" action="${ctx}/oa/oaNotify/saveAudit" method="post" class="form-horizontal">
            <form:hidden path="id"/>
            <form:hidden path="home"/>
            <form:hidden path="act.taskId"/>
            <form:hidden path="act.taskName"/>
            <form:hidden path="act.taskDefKey"/>
            <form:hidden path="act.procInsId"/>
            <form:hidden path="act.procDefId"/>
            <form:hidden id="flag" path="act.flag"/>

            <div class="form-group layui-row first">
                <div class="form-group-label"><h2>公告信息</h2></div>
                <div class="layui-item layui-col-sm6">
                    <label class="layui-form-label">公告标题：</label>
                    <div class="layui-input-block">
                        <input htmlEscape="false" readonly="true" maxlength="30" class="form-control required layui-input"
                               value="${oaNotify.title}"/>
                    </div>
                </div>
                <div class="layui-item layui-col-sm6">
                    <label class="layui-form-label">公告编号：</label>
                    <div class="layui-input-block">
                        <div class="input-group">
                            <form:input path="number" htmlEscape="false" readonly="true" maxlength="30" class="form-control layui-input"/>
                            <span class="input-group-btn">
                                <label class="form-status"><c:choose><c:when test="${not empty oaNotify.status}">${fns:getDictLabel(oaNotify.status, 'audit_state', '')}</c:when><c:otherwise>新添</c:otherwise></c:choose></label>
                             </span>
                        </div>
                    </div>
                </div>
                <div class="layui-item layui-col-sm6">
                    <label class="layui-form-label">公告类型：</label>
                    <div class="layui-input-block">
                        <input htmlEscape="false" readonly="true" maxlength="30" class="form-control required layui-input"
                               value="${fns:getMainDictLabel(oaNotify.type, 'oa_notify_type', '')}"/>
                    </div>
                </div>
                <div class="layui-item layui-col-sm6">
                    <label class="layui-form-label">创建日期：</label>
                    <div class="layui-input-block">
                        <input id="createDate" name="createDate" htmlEscape="false" readonly="true"
                               class="laydate-icondate form-control layer-date layui-input laydate-icon"
                               value="<fmt:formatDate value="${oaNotify.createDate}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
                    </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" htmlEscape="false" readonly="true"
                               class="laydate-icondate form-control layer-date layui-input laydate-icon required"
                               value="<fmt:formatDate value="${oaNotify.startDate}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
                    </div>
                </div>
                <div class="layui-item layui-col-sm6">
                    <label class="layui-form-label">结束日期：</label>
                    <div class="layui-input-block">
                        <input id="endDate" name="endDate" htmlEscape="false" readonly="true"
                               class="laydate-icondate form-control layer-date layui-input laydate-icon required"
                               value="<fmt:formatDate value="${oaNotify.endDate}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
                    </div>
                </div>
                <div class="layui-item layui-col-sm6">
                    <label class="layui-form-label">创建人：</label>
                    <div class="layui-input-block">
                        <form:input id="cBName" path="createBy.name" htmlEscape="false" readonly="true"
                                    class="form-control  layui-input"/>
                    </div>
                </div>
                <div class="layui-item layui-col-sm6">
                    <label class="layui-form-label">所属部门：</label>
                    <div class="layui-input-block">
                        <form:input id="office" path="office.name" htmlEscape="false" readonly="true"
                                    class="form-control  layui-input"/>
                    </div>
                </div>
                <div class="layui-item layui-col-sm12" style="padding-bottom: 20px;">
                    <label class="layui-form-label"><span class="require-item">*</span>内容：</label>
                    <div class="layui-input-block">
                        <div class="wrapForm">
                            <div class="mask">
                                <form:textarea path="contents" disabled="true" htmlEscape="false" colspan="3" rows="6" maxlength="550"
                                               class="form-control "/>
                                <form:hidden id="content" path="content" htmlEscape="false" maxlength="64"
                                             class="form-control required"/>
                                <sys:ckeditorView replace="contents" uploadPath="/oa/oa"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

                    <div class="form-group layui-row">
                        <div class="form-group-label"><h2>公告范围-部门</h2></div>
                        <table id="officeTable" class="table table-bordered table-condensed details">
                            <thead>
                            <tr>
                                <th>部门</th>
                            </tr>
                            </thead>
                            <tbody id="officeTableList">
                            </tbody>
                        </table>
                        <script type="text/template" id="officeTpl">//<!--
                    <tr id="officeList{{idx}}">
                        <td>
                            {{row.name}}
                        </td>
                    </tr>//-->
                        </script>
                    </div>
                    <div class="form-group layui-row">
                        <div class="form-group-label"><h2>公告范围-成员</h2></div>
                        <table id="userTable" class="table table-bordered table-condensed details">
                            <thead>
                            <tr>
                                <th>姓名</th>
                                <th>部门</th>
                            </tr>
                            </thead>
                            <tbody id="userTableList">
                            </tbody>
                        </table>
                        <script type="text/template" id="userTpl">//<!--
                    <tr id="userList{{idx}}">
                        <td>
                        {{row.name}}
                        </td>
                        <td>
                        {{row.officeName}}
                        </td>
                    </tr>//-->
                        </script>
                        <script type="text/javascript">
                            var userIdx = 0, userTpl = $("#userTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g, "");
                            var officeIdx = 0, officeTpl = $("#officeTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g, "");

                            $(document).ready(function () {
                                var data = ${fns:toJson(oaNotify.officeList)};
                                if (data != null) {
                                    for (var i = 0; i < data.length; i++) {
                                        addRow('#officeTableList', officeIdx, officeTpl, data[i]);
                                        officeIdx = officeIdx + 1;
                                    }
                                }
                                var dataBank = ${fns:toJson(oaNotify.userList)};
                                if (dataBank != null) {
                                    for (var i = 0; i < dataBank.length; i++) {
                                        addRow('#userTableList', userIdx, userTpl, dataBank[i]);
                                        userIdx = userIdx + 1;
                                    }
                                }
                            });

                            function addRow(list, idx, tpl, row) {
                                var idx1 = 0;
                                if ('#userTableList' == list) {
                                    idx1 = $("#userTableList tr").length
                                } else if ('#officeTableList' == list) {
                                    idx1 = $("#officeTableList tr").length
                                }
                                bornTemplete(list, idx, tpl, row, idx1);
                            }

                            function bornTemplete(list, idx, tpl, row, idx1) {
                                $(list).append(Mustache.render(tpl, {
                                    idx: idx, delBtn: true, row: row,
                                    order: idx1 + 1, idx1: idx1
                                }));
                                $(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, idx) {
                                $(obj).parent().parent().remove();
                            }
                        </script>
                    </div>

                <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="upTable" class="table table-bordered table-condensed details">
                            <thead>
                            <tr>
                                    <%-- <th>序号</th>--%>
                                <th>文件预览</th>
                                <th>上传人</th>
                                <th>上传时间</th>
                                <th width="100px">操作</th>
                            </tr>
                            </thead>
                            <tbody id="file_attachment">

                            <c:forEach items="${oaNotify.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}"></td>
                                        </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>
                                        </div>
                                    </td>
                                </tr>
                            </c:forEach>

                            </tbody>
                        </table>
                    </div>
                </div>
            <div class="form-group layui-row">
                <div class="form-group-label"><h2>审批意见</h2></div>
                <div class="layui-item layui-col-xs12 with-textarea" >
                    <label class="layui-form-label">审批意见：</label>
                    <div class="layui-input-block">
                        <form:textarea path="act.comment" class="form-control" rows="4" maxlength="127" />
                        <input type="file" name="upload_files" style="display: none;">
                    </div>
                </div>
            </div>
            <div class="form-group layui-row">
                <div class="form-group-label"><h2>审批流程</h2></div>
                <div class="layui-item layui-col-xs12 form-table-container" >
                    <act:flowChart procInsId="${oaNotify.act.procInsId}"/>
                    <act:histoicFlow procInsId="${oaNotify.act.procInsId}"/>
                </div>
            </div>

            <div class="form-group layui-row page-end"></div>
        </form:form>
    </div>
</div>
</body>
</html>