<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp" %>
<html>
<head>
    <title>通知管理</title>
    <meta name="decorator" content="default"/>
</head>
<body>
<style>
    .wrapForm {
        width: 100%;
        height: 530px;
        margin-top: -93px;
    }
    .mask{
        width: 100%;
        height:100%;
    }
    .layui-input-block{
        border-top: 1px solid #cccccc;
        overflow: hidden;
        border-radius: 3px;
    }
</style>
<div class="single-form">
    <div class="container view-form">
        <form:form id="inputForm" modelAttribute="oaNotify" class="form-horizontal">
        <form:hidden path="id"/>
        <sys:message content="${message}"/>

        <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>

            <c:if test="${oaNotify.createBy.id eq fns:getUser().id}">
                <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>
            </c:if>

            <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('${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>
            <!--在“我的公告”中只能查看到个人接收的，只改变未读状态为已读，不显示所有的查看状态;
            在“公告管理”中只有管理员权限才能查看，显示该条公告的所有查看状态；
            -->
                <%-- <c:choose>
                     <c:when test="${toReadMyNotify}">
                     </c:when>
                     <c:otherwise>
                         <!-- 发布状态 -->
                         <c:if test="${oaNotify.status eq '1'}">
                         <div class="form-group layui-row">
                             <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" class="form-control required layui-input" value="${oaNotify.readNum}"/>
                                 </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" class="form-control required layui-input" value="${oaNotify.unReadNum}"/>
                                 </div>
                             </div>
                             <div class="layui-item layui-col-sm12">
                                 <label class="layui-form-label">总共：</label>
                                 <div class="layui-input-block">
                                     <input htmlEscape="false" readonly="true" class="form-control required layui-input" value="${oaNotify.readNum + oaNotify.unReadNum}"/>
                                 </div>
                             </div>
                             <div class="layui-item layui-col-xs12" style="padding:0 16px;">
                                 <table id="contentTable" class="table table-bordered table-condensed details">
                                     <thead>
                                     <tr>
                                         <th>接受人</th>
                                         <th>接受部门</th>
                                         <th>阅读状态</th>
                                         <th>阅读时间</th>
                                     </tr>
                                     </thead>
                                     <tbody>
                                     <c:forEach items="${oaNotify.oaNotifyRecordList}" var="oaNotifyRecord">
                                         <tr>
                                             <td>
                                                     ${oaNotifyRecord.user.name}
                                             </td>
                                             <td>
                                                     ${oaNotifyRecord.user.office.name}
                                             </td>
                                             <td>
                                                     ${fns:getDictLabel(oaNotifyRecord.readFlag, 'oa_notify_read', '')}
                                             </td>
                                             <td>
                                                 <fmt:formatDate value="${oaNotifyRecord.readDate}" pattern="yyyy-MM-dd HH:mm:ss"/>
                                             </td>
                                         </tr>
                                     </c:forEach>
                                     </tbody>
                                 </table>
                             </div>
                         </div>
                         </c:if>
                     </c:otherwise>
                 </c:choose>--%>
            <div class="form-group layui-row page-end"></div>
            </form:form>
        </div>
    </div>
</body>
</html>