<%@ page contentType="text/html;charset=UTF-8"%>
<%@page import="com.blueland.bpm.engine.config.model.*" %>
<%@ include file="/WEB-INF/commons/taglibs.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="overflow-y:hidden;">
<%@ include file="/WEB-INF/commons/meta.jsp" %>
<link rel="stylesheet" href="${ctx}/resource/js/userSelect/css/usStyle/button.css" type="text/css">
<title>短信提醒</title>
<base href="<%=basePath%>">
<head>
    <style>
        .btn-style{
            border: 1px #70c5e1 solid;
            border-radius: 4px;
            background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#fefefe), to(#dce2e6));
            padding: 0px 15px;
            color: #000;
            font-size: 12px;
            font-family:"微软雅黑";
            letter-spacing: 4px;
        }
        .btn-style:hover{
            background:#e1f0f8;
            cursor:pointer;
        }
        input[type=checkbox].ace+.lbl::before, input[type=radio].ace+.lbl::before {
            cursor: pointer;
            font-family: fontAwesome;
            font-weight: 400;
            font-size: 12px;
            color: #32a3ce;
            content: "\a0";
            background-color: #FAFAFA;
            border: 1px solid #A7BFCD;
            box-shadow: 0 1px 2px rgba(0,0,0,.05);
            border-radius: 0;
            display: inline-block;
            text-align: center;
            height: 13px;
            line-height: 10px;
            min-width: 13px;
            margin-right: 1px;
            position: relative;
            top: -1px;
            border-radius: 2px;
        }
    </style>
    <script type="text/javascript">
        function weekdayChange(obj){
            var name = $(obj).attr("name");
            if($(obj).attr("checked")){
                $("[name^='weekdayList']").attr("checked",'true');
            }else{
                $("[name^='weekdayList']").removeAttr("checked");
            }
        }
        function appChange(obj){
            if($(obj).attr("checked")){
                $("[name^='app']").attr("checked",true);
            }else{
                $("[name^='app']").removeAttr("checked");
            }
        }
        function saveSmsConfig(){
            $("#weekday").attr("value","");
            var timeStart = $("#timeStart option:selected").attr("value");
            var timeEnd = $("#timeEnd option:selected").attr("value");
            $("#timezone").val(timeStart+"-"+timeEnd);
            $("[name^='weekdayList']:checked").each(function(){
                var weekDay = $(this).attr("value");
                if(weekDay.length>0){
                    if($("#weekday").val()!=null&&''!= $("#weekday").val()){
                        $("#weekday").attr("value",$("#weekday").val()+","+weekDay);
                    }else{
                        $("#weekday").attr("value",weekDay);
                    }
                }
            });
// 		 alert($("#weekday").attr("value"))
            var ischeck = true;
            if(ischeck){
                jQuery.ajax({
                    url: "${ctx}/smsConfig/save.do",
                    data: $('#createForm').serialize(),
                    type: "POST",
                    dataType:"json",
                    success: function(resp) {
                        if(resp.success){
                            alert("保存成功！");
                            art.dialog.opener.location.reload();
                        }else{
                            alert("保存失败！");
                            cancelOperation();
                        }
                    }
                });
            }
        }
        function checkBeforeSubmit(){
            var weekday = $("#weekday").val();
            if(null == weekday || ""==weekday){
                alert("请您选择时间区域！");
                return false;
            }
            var timezone =$("#timezone").val();
            if(null == timezone || ""==timezone){
                alert("请您选择时间段！");
                return false;
            }
            if(!$("input[name^='appNameList[']").is(':checked')){
                alert("请您选择待办消息！");
                return false;
            }
            return true;
        }
        $(function(){
            $("[name^='weekdayList']").change(function(){
                var weekNum = parseInt(0);
                $("[name^='weekdayList']").each(function(){
                    if( $(this)[0].checked == false){
                        weekNum ++;
                    }
                });
                if(weekNum<=0){
                    $("#weekdays").attr("checked",true);
                }else{
                    $("#weekdays").attr("checked",false);
                }
            });
            $("[name^='appNameList[']").change(function(){
                var weekNum = parseInt(0);
                $("[name^='appNameList']").each(function(){
                    if( $(this)[0].checked == false){
                        weekNum ++;
                    }
                });
                if(weekNum<=0){
                    $("#appNames").attr("checked",true);
                }else{
                    $("#appNames").attr("checked",false);
                }
            });
            $("#timeStart").change(function(){
                $("#timeEnd").html("");
                var timeStart = $("#timeStart option:selected").attr("value");
                if(typeof timeStart == 'undefined'){
                    timeStart = 0;
                }
                var optionNum = parseInt(timeStart)+2;
                $("#timeEnd").html("");
                for(var i =optionNum;i<=24;i++){
                    if(i%2 == 0) {
                        var a = String(i);
                        if(i<10){
                            var a = String("0"+i);
                        }
                        var option = "<option value='"+a+"'>"+a+":00"+"</option>";
                        $("#timeEnd").append(option);

                    }
                }
            });
            $("#timeEnd").click(function(){
                var timeStart = $("#timeStart option:selected").attr("value");

                $("#timeEnd option").each(function(){
                    var time = $(this).attr("value");
                    if(parseInt(time)<=timeStart){
                        $("#timeEnd option[value='"+time+"']").remove();
                    }
                });

            });
        });
    </script>
</head>
<body class="white-page">
<form action="${ctx}/smsConfig/save.do" method="post" id="createForm">
    <div class="main-container" id="main-container" style="width: 543px;">
        <input name="userId" id="userId" value="${smsConfig.userId}" type="hidden"/>
        <input name="timezone" id="timezone" value="${smsConfig.timezone}" type="hidden"/>
        <input name="weekday" id="weekday" value="${smsConfig.weekday}" type="hidden"/>
        <div id="tabs" style="border-bottom:1px solid #e5e5e5;font-weight:bold;margin: 0 20px 0 20px;padding: 7px 0 10px 0;">
            <span style="border-bottom:2px #70c5e1 solid;padding: 0px 2px 10px 2px;font-size:12px;font-family:'微软雅黑';color:#000;">待办消息短信</span>
        </div>

        <div class="alert alert-block alert-danger" style="margin: 5px 20px 0px 20px;color: #ff0000;padding: 5px 0px 8px 0px;font-size: 12px;font-family: '微软雅黑';border: none;background: none;">您的常用手机号：${smsConfig.mobile }，如需修改，请切换到【基本资料】中修改</div>


        <div style="display:table; width:100%; padding:0px 20px 5px 20px;font-family:'微软雅黑'">

            <div style="display:table-cell;width:46%;border: 1px solid #ddd; vertical-align:top;">
                <div style="font-size:12px;height:26px;background:#E4EDF6;line-height:26px;padding:0 10px;margin:0;font-weight:bold;width: 100%;float: left;color: #000;">时间区域选择</div>
                <div style="height: 243px;width:100%;padding:5px 15px;margin:0;clear: both;">
                    <table style="width:100%; padding:0; margin:0; border:0; font-family:'微软雅黑';" class="form-table">
                        <tbody>
                        <tr>
                            <td style="padding:3px 0;">
                                <label>
                                    <input name="weekdayList[1]" type="checkbox" class="ace" value="1" <c:if test="${fn:containsIgnoreCase(smsConfig.weekday,'1')||(!fn:containsIgnoreCase(smsConfig.weekday,'0')&&fn:length(smsConfig.weekday)<1) }">checked='checked'</c:if>>
                                    <span class="lbl"><b style="margin:0 0 0 5px;font-size: 12px;color: #000;font-weight: 500;">星期一</b></span>
                                </label>
                            </td>
                            <td style="padding:3px 0 0 45px;">
                                <label>
                                    <input name="weekdayList[2]" type="checkbox" class="ace" value="2" <c:if test="${fn:containsIgnoreCase(smsConfig.weekday,'2')||(!fn:containsIgnoreCase(smsConfig.weekday,'0')&&fn:length(smsConfig.weekday)<1) }">checked='checked'</c:if>>
                                    <span class="lbl"><b style="margin:0 0 0 5px;font-size: 12px;color: #000;font-weight: 500;">星期二</b></span>
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td style="padding:3px 0;">
                                <label>
                                    <input name="weekdayList[3]" type="checkbox" class="ace" value="3" <c:if test="${fn:containsIgnoreCase(smsConfig.weekday,'3')||(!fn:containsIgnoreCase(smsConfig.weekday,'0')&&fn:length(smsConfig.weekday)<1) }">checked='checked'</c:if>>
                                    <span class="lbl"><b style="margin:0 0 0 5px;font-size: 12px;color: #000;font-weight: 500;" >星期三</b></span>
                                </label>
                            </td>
                            <td style="padding:3px 0 0 45px;">
                                <label>
                                    <input name="weekdayList[4]" type="checkbox" class="ace" value="4" <c:if test="${fn:containsIgnoreCase(smsConfig.weekday,'4')||(!fn:containsIgnoreCase(smsConfig.weekday,'0')&&fn:length(smsConfig.weekday)<1) }">checked='checked'</c:if>>
                                    <span class="lbl"><b style="margin:0 0 0 5px;font-size: 12px;color: #000;font-weight: 500;">星期四</b></span>
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td style="padding:3px 0;">
                                <label>
                                    <input name="weekdayList[5]" type="checkbox" class="ace" value="5" <c:if test="${fn:containsIgnoreCase(smsConfig.weekday,'5')||(!fn:containsIgnoreCase(smsConfig.weekday,'0')&&fn:length(smsConfig.weekday)<1) }">checked='checked'</c:if>>
                                    <span class="lbl"><b style="margin:0 0 0 5px;font-size: 12px;color: #000;font-weight: 500;">星期五</b></span>
                                </label>
                            </td>
                            <td style="padding:3px 0 0 45px;">
                                <label>
                                    <input name="weekdayList[6]" type="checkbox" class="ace" value="6" <c:if test="${fn:containsIgnoreCase(smsConfig.weekday,'6')||(!fn:containsIgnoreCase(smsConfig.weekday,'0')&&fn:length(smsConfig.weekday)<1) }">checked='checked'</c:if>>
                                    <span class="lbl"><b style="margin:0 0 0 5px;font-size: 12px;color: #000;font-weight: 500;">星期六</b></span>
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="padding:5px 0 10px 0;">
                                <label>
                                    <input name="weekdayList[0]" type="checkbox" class="ace" value="0" <c:if test="${fn:containsIgnoreCase(smsConfig.weekday,'0')||(!fn:containsIgnoreCase(smsConfig.weekday,'0')&&fn:length(smsConfig.weekday)<1) }">checked='checked'</c:if>>
                                    <span class="lbl"><b style="margin:0 0 0 5px;font-size: 12px;color: #000;font-weight: 500;">星期日</b></span>
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="padding:10px 0 5px 0; border-top:1px dashed #999;">
                                <label>
                                    <input name="weekdays" id="weekdays" type="checkbox" class="ace" onclick="weekdayChange(this);" <c:if test="${'1,2,3,4,5,6,0' == smsConfig.weekday || ('1,2,3,4,5,6,0' != smsConfig.weekday && fn:length(smsConfig.weekday)<1)}">checked='checked'</c:if>>
                                    <span class="lbl"><b style="margin:0 0 0 5px;font-size: 12px;color: #000;font-weight: 500;">全选</b></span>
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="padding: 10px 0;font-size: 12px;color: #000;font-weight: 500;">时间段：</td>
                        </tr>
                        <tr>
                            <td style="padding:5px 5px 5px 0;" colspan="2">
                                <select name="timeStart" id="timeStart" style="height: 22px;width: 70px;border-top: 2px solid #656565;border-left: 2px solid #656565;border-bottom: 2px solid #e3e3e3;border-right: 2px solid #e3e3e3;color: #000;line-height: 22px;padding: 0 4px;font-size: 12px;">

                                    <option value="00" <c:if test="${'00' == smsConfig.timeStart ||fn:length(smsConfig.timeStart)<1}">selected = 'selected'</c:if>>00:00</option>
                                    <option value="02" <c:if test="${'02' == smsConfig.timeStart }">selected = 'selected'</c:if>>02:00</option>
                                    <option value="04" <c:if test="${'04' == smsConfig.timeStart }">selected = 'selected'</c:if>>04:00</option>
                                    <option value="06" <c:if test="${'06' == smsConfig.timeStart }">selected = 'selected'</c:if>>06:00</option>
                                    <option value="08" <c:if test="${'08' == smsConfig.timeStart }">selected = 'selected'</c:if>>08:00</option>
                                    <option value="10" <c:if test="${'10' == smsConfig.timeStart }">selected = 'selected'</c:if>>10:00</option>
                                    <option value="12" <c:if test="${'12' == smsConfig.timeStart }">selected = 'selected'</c:if>>12:00</option>
                                    <option value="14" <c:if test="${'14' == smsConfig.timeStart }">selected = 'selected'</c:if>>14:00</option>
                                    <option value="16" <c:if test="${'16' == smsConfig.timeStart }">selected = 'selected'</c:if>>16:00</option>
                                    <option value="18" <c:if test="${'18' == smsConfig.timeStart }">selected = 'selected'</c:if>>18:00</option>
                                    <option value="20" <c:if test="${'20' == smsConfig.timeStart }">selected = 'selected'</c:if>>20:00</option>
                                    <option value="22" <c:if test="${'22' == smsConfig.timeStart }">selected = 'selected'</c:if>>22:00</option>
                                </select>&nbsp;-&nbsp;
                                <select name="timeEnd" id="timeEnd" style="height: 22px;width: 70px;border-top: 2px solid #656565;border-left: 2px solid #656565;border-bottom: 2px solid #e3e3e3;border-right: 2px solid #e3e3e3;color: #000;line-height: 22px;padding: 0 4px;margin: 0;font-size: 12px;">

                                    <option value="02" <c:if test="${'02' == smsConfig.timeEnd}">selected = 'selected'</c:if>>02:00</option>
                                    <option value="04" <c:if test="${'04' == smsConfig.timeEnd }">selected = 'selected'</c:if>>04:00</option>
                                    <option value="06" <c:if test="${'06' == smsConfig.timeEnd }">selected = 'selected'</c:if>>06:00</option>
                                    <option value="08" <c:if test="${'08' == smsConfig.timeEnd }">selected = 'selected'</c:if>>08:00</option>
                                    <option value="10" <c:if test="${'10' == smsConfig.timeEnd }">selected = 'selected'</c:if>>10:00</option>
                                    <option value="12" <c:if test="${'12' == smsConfig.timeEnd }">selected = 'selected'</c:if>>12:00</option>
                                    <option value="14" <c:if test="${'14' == smsConfig.timeEnd }">selected = 'selected'</c:if>>14:00</option>
                                    <option value="16" <c:if test="${'16' == smsConfig.timeEnd }">selected = 'selected'</c:if>>16:00</option>
                                    <option value="18" <c:if test="${'18' == smsConfig.timeEnd }">selected = 'selected'</c:if>>18:00</option>
                                    <option value="20" <c:if test="${'20' == smsConfig.timeEnd }">selected = 'selected'</c:if>>20:00</option>
                                    <option value="22" <c:if test="${'22' == smsConfig.timeEnd }">selected = 'selected'</c:if>>22:00</option>
                                    <option value="24" <c:if test="${'24' == smsConfig.timeEnd ||fn:length(smsConfig.timeEnd)<1}">selected = 'selected'</c:if>>24:00</option>
                                </select>
                            </td>
                        </tr>

                        </tbody>
                    </table>
                </div>
            </div>

            <div style="display:table-cell;width:8%;"></div>

            <div style="display:table-cell;width:46%;border: 1px solid #ddd;padding:5px; vertical-align:top;font-size: 12px;color: #000;font-weight: 500;">


                <i class="ace-icon fa fa-caret-down bigger-150" style="color: #707273;"></i>
                <label style="margin:0px;">
                    <input name="appNames" id="appNames" <c:if test="${fn:length(apps)<1 || (fn:length(smsConfig.appList)==existApp && fn:length(apps)>1) }">checked='checked'</c:if> type="checkbox" class="ace" onclick="appChange(this);" />
                    <span class="lbl"><b style="margin:0 0 0 5px;font-size: 12px;color: #000;font-weight: 500;">待办消息 &nbsp;</b></span>
                </label>

                <div class="widget-body" style="margin-left:30px;overflow-y:auto;height:200px;">
                    <c:forEach items="${smsConfig.appList}" var="app" varStatus="status">
                        <label style="margin:0px;">
                            <input name="appNameList[${status.index}]" id="${app.appId}" type="checkbox" class="ace" value="${app.appId}" <c:choose><c:when test="${fn:length(apps)<1 }">checked='checked'</c:when><c:when test="${fn:containsIgnoreCase(apps,app.appId) }">checked='checked'</c:when><c:otherwise></c:otherwise></c:choose>>
                            <span class="lbl"><b style="margin:0 0 0 5px;font-size: 12px;color: #000;font-weight: 500;">${app.appName }</b></span>
                        </label>
                        </br>
                    </c:forEach>
                </div>
                </li>

            </div>

        </div>

    </div>
    <div class="col-md-offset-1 col-md-9" style="text-align: right;margin-top: 6px;">
        <button id="submitButton" name="submitButton" class="btn-style" type="button" onclick="saveSmsConfig();" style="padding: 2px 15px !important;border-color: #89a2ba !important;margin: 0 8px 0 0;">
            保存
        </button>
    </div>
</form>
</body>
</html>