<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
	<title>工作日历管理</title>
	<meta name="decorator" content="default"/>
    <link href="${ctxStatic}/bootstrap-select-1.12.4/css/bootstrap-select.min.css" rel="stylesheet" />
    <script src="${ctxStatic}/bootstrap-select-1.12.4/js/bootstrap-select.min.js"></script>
	<script type="text/javascript">
		var validateForm;
		function doSubmit(){//回调函数，在编辑和保存动作时，供openDialog调用提交表单。
		  if(validateForm.form()){
              var val = $("#remindTime").val();
              if(val!=undefined&&val!=null&&val!=''){
                  var d1 = new Date();
                  var format = d1.format('yyyy-MM-dd');
                  $("#remindTime").val(format+" "+val+":00");
              }
			  $("#inputForm").submit();
			  return true;
		  }
	
		  return false;
		}

        Date.prototype.format = function(fmt) {
            var o = {
                "M+" : this.getMonth()+1,                 //月份
                "d+" : this.getDate(),                    //日
                "h+" : this.getHours(),                   //小时
                "m+" : this.getMinutes(),                 //分
                "s+" : this.getSeconds(),                 //秒
                "q+" : Math.floor((this.getMonth()+3)/3), //季度
                "S"  : this.getMilliseconds()             //毫秒
            };
            if(/(y+)/.test(fmt)) {
                fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
            }
            for(var k in o) {
                if(new RegExp("("+ k +")").test(fmt)){
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
                }
            }
            return fmt;
        }
		$(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);
					}
				}
			});

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

            repeatChg();
            remindChg();

            {
                var val = $("#repeatType").val();
                if(val==1){
                    var arr="${workCalendar.repeatDate}".split(',');
                    $('#repeatDate').selectpicker('val',arr);
                }
            }
		});
		function repeatChg() {
            var val = $("#repeatType").val();
            if(val==''||val==0){
                $('.month').show();
                $('.selectpicker').selectpicker('hide');
                $('.selectpicker').selectpicker('deselectAll');
                $(".month").val("");
                $(".month").attr("disabled","disabled");
            }else {
                if(val==1){
                    $('.selectpicker').selectpicker('show');
                    $('.month').hide();
                }else {
                    $('.selectpicker').selectpicker('hide');
                    $('.selectpicker').selectpicker('deselectAll');
                    $('.month').show();
                    $('.month').removeAttr("disabled");
                }
            }
        }
        function remindChg() {
            var v = $("#remind").val();
            if(v==1){
                $("#remindTime").removeAttr("disabled");
            }else {
                $("#remindTime").val("");
                $("#remindTime").attr("disabled","disabled");
            }
        }
	</script>
</head>
<body>
<div class="single-form">
    <div class="container">
		<form:form id="inputForm" modelAttribute="workCalendar" action="${ctx}/workcalendar/workCalendar/save" method="post" class="form-horizontal">
		<form:hidden path="id"/>
            <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"><span class="require-item">*</span>主    题：</label>
                    <div class="layui-input-block">
                        <form:input path="subject" htmlEscape="false" maxlength="64"  class="form-control required layui-input"/>
                    </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">
                        <form:input path="address" htmlEscape="false" maxlength="64" class="form-control required layui-input"/>
                    </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="content" htmlEscape="false" rows="3" maxlength="512" onkeyup="checkContentKeyUp('content',512);" class="form-control"/>
                    </div>
                    <span id="contentMsg" style="float: right"></span>
                </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 id="startDate" name="startDate" type="text" maxlength="20" class="laydate-icondate form-control layui-input layer-date laydate-icon required"
                               value="<fmt:formatDate value="${workCalendar.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="endDate" name="endDate" type="text" maxlength="20" class="laydate-icondate form-control layui-input layer-date laydate-icon"
                               value="<fmt:formatDate value="${workCalendar.endDate}" pattern="yyyy-MM-dd"/>"/>
                    </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">
                            <form:select path="repeatType" class="form-control simple-select required query-group" onchange="repeatChg();">
                                <form:options items="${fns:getDictList('calender_repeat_type')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
                            </form:select>
                            <span class="group-sep"></span>
                            <select name="repeatDate" id="repeatDate" class="form-control selectpicker required layui-input query-group" multiple="true" >
                                <c:forEach items="${fns:getDictList('week_day')}" var="item">
                                    <option value="${item.label}">${item.label}</option>
                                </c:forEach>
                            </select>
                            <form:select path="repeatDate" class="form-control required month query-group simple-select">
                                <form:option value="" label=""/>
                                <form:options items="${fns:getDictList('month_day')}" itemLabel="label" itemValue="label" htmlEscape="false"/>
                            </form:select>
                    </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">
                            <form:select path="remind" class="form-control simple-select query-group required" onchange="remindChg();">
                                <form:options items="${fns:getDictList('calender_remind_type')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
                            </form:select>
                            <span class="group-sep"></span>
                            <input name="remindTime" id="remindTime" htmlEscape="false" class="laydate-icondate form-control layui-input layer-date laydate-icon required query-group"
                                        value="<fmt:formatDate value="${workCalendar.remindTime}" pattern="HH:mm"/>"/>
                    </div>
                </div>
                <div class="layui-item layui-col-sm6">
                    <label class="layui-form-label double-line"><span class="require-item">*</span>发送日常事务：</label>
                    <div class="layui-input-block">&nbsp;&nbsp;
                        <form:radiobutton class="usccClass i-checks required" path="sendDaily" value="1" label="是"></form:radiobutton>
                        &nbsp;&nbsp;
                        <form:radiobutton class="usccClass i-checks required" path="sendDaily" value="2" label="否"></form:radiobutton>
                    </div>
                </div>
                <div class="layui-item layui-col-sm6">
                    <label class="layui-form-label">创 建 人：</label>
                    <div class="layui-input-block">
                        <form:input path="createBy.name" htmlEscape="false" readonly="true" class="form-control layui-input"/>
                        <form:hidden path="createBy.id" htmlEscape="false" readonly="true" class="form-control layui-input"/>
                    </div>
                </div>
            </div>
            <div class="form-group layui-row">
                <div class="form-group-label"><h2>日历共享人</h2></div>
                <div class="layui-item nav-btns">
                    <sys:treeselectusers id="users" name="" value="" labelName="memberNameStr" labelValue=""
                                         retnParent="true" title="用户" url="/sys/office/treeDataBranchOffice?type=3" checked="true" cssClass="form-control required" allowClear="true" notAllowSelectParent="true"/>
                </div>
                <table id="userTable" class="table table-bordered table-condensed details">
                    <thead>
                    <tr>
                        <th class="hide"></th>
                        <th>姓名</th>
                        <th>部门</th>
                        <th>职级</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="userTableList">
                    </tbody>
                </table>
                <script type="text/template" id="userTpl">//<!--
                    <tr id="userList{{idx}}">
                        <td class="hide">
                            <input id="userList{{idx}}_id" name="userList[{{idx}}].id" readonly="true" value="{{row.id}}" type="hidden" class="form-control userId"/>
                        </td>
                        <td>
                        {{row.name}}
                        </td>
                        <td>
                        {{row.officeName}}
                        </td>
                        <td>
                        </td>
                        <td class="text-center op-td">
                                    <a href=javascript:void(0); onclick="delRow(this, '#userList{{idx}}')"   class="op-btn op-btn-delete"><i class="fa fa-trash"></i> 取消</a>
                        </td>
                    </tr>//-->
                </script>
                <script type="text/javascript">
                    var userIdx = 0, userTpl = $("#userTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");

                    $(document).ready(function() {
                        var dataBank = ${fns:toJson(workCalendar.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 = $("#userTableList 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();
                    }

                    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 getSelectUserIds() {
                        var selectedIds = "";
                        var pidArr = $("#userTableList tr .userId");
                        for(var i=0;i<pidArr.length;i++){
                            selectedIds+=$(pidArr[i]).val();
                            selectedIds+=",";
                        }
                        return selectedIds;
                    }
                </script>
            </div>
	</form:form>
    </div>
</div>
</body>
</html>