<%@ page language="C#" autoeventwireup="true" inherits="sysadmin_EquipmentUseCreate, App_Web_equipmentusecreate.aspx.670f2b03" enableEventValidation="false" %>


<%@ Register Src="~/sadmin/NewHeader.ascx" TagPrefix="uc2" TagName="NewHeader" %>
<%@ Register Src="~/sadmin/NewFooter.ascx" TagPrefix="uc2" TagName="NewFooter" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>网上预约系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link href="/control/plugin/bootstrap3/css/bootstrap.min.css" rel="stylesheet" />
    <script src="/control/js/jquery.js"></script>
    <link href="/control/plugin/fullcalendar/fullcalendar.css" rel="stylesheet" />
    <link href="/control/css/msgbox.css" rel="stylesheet" />

    <script src="/control/js/msgbox.js"></script>
    
    <!-- ionicons -->
    <link href="/lib/ionicons/ionicons.min.css" rel="stylesheet" />
    <!-- Animate -->
    <link href="/lib/animate/animate.min.css" rel="stylesheet" />
    <!-- base -->
    <link href="/css/base.css" rel="stylesheet" />
    
    <!--[if lt IE 9]>
      <script src="/js/html5shiv.min.js"></script>
      <script src="/js/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        .autocomplete-suggestions {
            font-size: 16px;
            border: 1px solid #999;
            background: #FFF;
            cursor: default;
            overflow: auto;
            -webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
            -moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
            box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
        }

        .autocomplete-suggestion {
            padding: 5px 10px;
            white-space: nowrap;
        }

        .autocomplete-no-suggestion {
            padding: 5px 10px;
        }

        .autocomplete-selected {
            background: #F0F0F0;
        }

        .autocomplete-suggestions strong {
            font-weight: normal;
            color: #3399FF;
        }
        .fc-time-grid-event .fc-time {
         
            white-space:initial;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <uc2:NewHeader runat="server" ID="MyHeader" />

        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h3 class="page-header">新增分配<small> 预约设备使用安排都应录入到系统中，否则将导致预约安排与现实使用安排发生时间重叠</small></h3>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <form id="from1" runat="server">
                                <!-- Add.aspx -->
                                <div class="form-group">
                                    <label class=" control-label">
                                        用户快速查询：</label>
                                    <div>
                                        <input id="txtSelectUser" type="text" class="form-control" />
                                        <asp:HiddenField ID="hfCurrentUser" runat="server"></asp:HiddenField>
                                    </div>
                                    <script type="text/javascript">

                                        $(function () {

                                            $('#txtSelectUser').autocomplete({
                                                serviceUrl: 'User_AjaxOption.ashx',

                                                formatResult: function (suggestion, currentValue) {
                                                    var value = '[编号：' + suggestion.value + '] / ' + suggestion.c_name;
                                                    var pattern = '(' + $.Autocomplete.utils.escapeRegExChars(currentValue) + ')';
                                                    return value.replace(new RegExp(pattern, 'gi'), '<strong>$1<\/strong>');
                                                },
                                                lookupFilter: function (suggestion, originalQuery, queryLowerCase) {
                                                    var re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi');
                                                    return re.test(suggestion.value);
                                                },
                                                onSelect: function (suggestion) {
                                                    var value = '[编号：' + suggestion.value + '] / ' + suggestion.c_name;

                                                    $("#labUser").text(value);
                                                    $("#hfCurrentUser").val(suggestion.data);
                                                    $("#txtSelectUser").val('');
                                                }
                                            });

                                        });
                                    </script>
                                </div>

                                <div class="form-group">
                                    <label class=" control-label">
                                        用户<span class='rd'>*</span>：</label>
                                    <div>
                                        <asp:Label ID="labUser" runat="server" ForeColor="Red" Font-Size="17px"></asp:Label>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class=" control-label">
                                        预约设备<span class='rd'>*</span>：</label>
                                    <div>
                                        <asp:DropDownList ID="ddleu_eid" runat="server" CssClass="form-control"></asp:DropDownList>
                                    </div>
                                    <div>
                                        <asp:RequiredFieldValidator ID="rfveu_eid"
                                            ForeColor="Red" runat="server" Display="Dynamic" ErrorMessage="请填写预约设备"
                                            ControlToValidate="ddleu_eid"></asp:RequiredFieldValidator>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class=" control-label">
                                        课题名称<span class='rd'>*</span>：</label>
                                    <asp:DropDownList ID="ddl_pid" runat="server" onchange="showpContent()" CssClass="form-control"></asp:DropDownList>
                                    <asp:RequiredFieldValidator ID="rfvpid" runat="server" ForeColor="Red" Display="Dynamic"
                                        ErrorMessage="请选择课题名称" ControlToValidate="ddl_pid"></asp:RequiredFieldValidator>
                                </div>
                                <div class="form-group">
                                    <label class=" control-label">
                                        实验内容<span class='rd'>*</span>：</label>
                                    <span id="pcontent" class="help-block"></span>
                                </div>
                                
                                <div class="form-group">
                                    <label class=" control-label">
                                        分配时间<span class='rd'>*</span>：</label>
                                    <div>
                                        <div id="bulist">
                                            <div id="bu0" index="0">
                                                <div>
                                                    <input name="bu" value="0" type="hidden" />
                                                    <input id="st0" name="st0" onblur="btime(0)" class="form-control" placeholder="起始日期" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm'})" />
                                                    <p class="help-block"></p>
                                                </div>
                                                <div>
                                                    <input id="et0" name="et0" onblur="btime(0)" class="form-control" placeholder="截止日期" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm'})" />
                                                    <p class="help-block"></p>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-6">
                                                        <input id="bt0" name="bt0" class="form-control" readonly="true" placeholder="使用时长" />
                                                        <p class="help-block"></p>
                                                    </div>
                                                    
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row" style="margin-top:8px;">
                                            <div class="col-lg-6"><button type="button" onclick="addBU()" class="btn btn-primary">新增分配时间</button></div>
                                            <div class="col-lg-6"><button type="button" onclick="isOverlap()" class="btn btn-success">验证是否重叠</button></div>
                                        </div>
                                    </div>

                                     <script type="text/javascript">
                                         function showpContent() {
                                             var pid = $("#ddl_pid").val();

                                             if (pid != "") {
                                                 $.ajax({
                                                     data: { "pid": pid },
                                                     type: "POST",
                                                     dataType: "json",
                                                     success: function (result) {
                                                         $("#pcontent").html(result.data);
                                                     }
                                                 });
                                             }
                                         }
                                        var buindex = 1;
                                        function addBU() {       
                                            var sb = new StringBuilder();
                                            sb.append('<div id="bu'+buindex+'" index="'+buindex+'"><div><input name="bu" value="'+buindex+'" type="hidden" />');
                                            sb.append('<input id="st' + buindex + '" name="st' + buindex + '" onblur="btime(' + buindex + ')" class="form-control" placeholder="起始日期" onfocus="WdatePicker({dateFmt:\'yyyy-MM-dd HH:mm\'})" /><p class="help-block"></p>');
                                            sb.append('</div><div><input id="et'+buindex+'" name="et'+buindex+'" onblur="btime('+buindex+')" class="form-control" placeholder="截止日期" onfocus="WdatePicker({dateFmt:\'yyyy-MM-dd HH:mm\'})" />');
                                            sb.append('<p class="help-block"></p></div><div class="row"><div class="col-lg-6">');
                                            sb.append('<input id="bt' + buindex + '" name="bt' + buindex + '" class="form-control" readonly="true" placeholder="使用时长"/><p class="help-block"></p></div>');
                                            sb.append('</div> </div>');
                                            $("#bulist").append(sb.tostring());
                                            buindex++;
                                        }

                                        function btime(index) {
                                            var start = new Date($("#st" + index).val());
                                            var end = new Date($("#et" + index).val());
                                            if (!isNaN(start) && !isNaN(end)) {
                                                var cha = end.getTime() - start.getTime()  //时间差的毫秒数

                                                var minutes = Math.floor(cha / (60 * 1000))

                                                $("#bt" + index).val(minutes + "分钟");
                                            }
                                        }

                                        function dbu(index) {
                                            $("#bu" + index).remove();
                                        }
                                     </script>
                                </div>

                                <div class="form-group">
                                    <asp:Button ID="btnSubmit" runat="server" Text="提交分配" OnClientClick="return beforedSubmit()" CssClass="btn btn-primary btn-lg btn-block" OnClick="btnSubmit_Click" />
                                    <script language="javascript" type="text/javascript">
                                        function beforedSubmit() {
                                            if (!Page_ClientValidate()) {
                                                return false;
                                            }
                                            var id = $("#hfCurrentUser").val();
                                            if (id == null || id == "") {
                                                alert("请选择用户");
                                                return false;
                                            }
                                            var bulist = $("#bulist").children();
                                            var size = bulist.length;
                                            for (var i = 0; i < size ; i++) {
                                                var index = bulist.attr("index");
                                                var start = $("#st" + index).val();
                                                var end = $("#et" + index).val();
                                                if (start == "" || end == "") {
                                                    alert("请完整填写的分配使用时间！");
                                                    return false;
                                                }
                                            }
                                            return true
                                        }
                                    </script>

                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-lg-8 ">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <script type="text/javascript">
                                $(function () {
                                    $('#calendar').fullCalendar({
                                        events: events,
                                        defaultView: "agendaWeek",
                                        header: {
                                            left: 'prev,next today',
                                            center: 'title',
                                            right: 'month,listMonth,agendaWeek,listWeek,agendaDay,listDay'
                                        },
                                        views:
                                        {
                                            listMonth: { buttonText: '列' },
                                            listWeek: { buttonText: '列' },
                                            listDay: { buttonText: '列' }
                                        }
                                    });
                                });
                                function isOverlap()
                                {
                                    var bulist = $("#bulist").children();
                                    var dates = new StringBuilder();
                                    var size = bulist.length;

                                    for (var i = 0; i < size ; i++) {
                                        var index = (bulist.eq(i)).attr("index");
                                        var start = $("#st" + index).val();
                                        var end = $("#et" + index).val();
                                        if (start == "" || end == "") {
                                            alert("请正确填写分配时间！");
                                            return;
                                        }
                                        dates.append(start + "|" + end);
                                        if (i != size - 1) {
                                            dates.append(',');
                                        }
                                    }

                                   
                                    var eid = $("#ddleu_eid").val();
                                    if ($.trim(eid)=="") {
                                        alert("请选择预约设备！");
                                        return;
                                    }
                                    ZENG.msgbox.show('判断中...', 6);
                                    $.ajax({
                                        type: "POST",
                                        url: "/sadmin/Booking/isOverlap.ashx",
                                        dataType: "json",
                                        data: { "eid": eid, "dates": dates.tostring() },
                                        success: function (result) {
                                           
                                            ZENG.msgbox._hide();
                                            if (result.state == 1) {
                                                alert("使用时间未重叠");
                                            } else {
                                                alert(result.data);
                                            }
                                        }
                                    });
                                }

                                var events = {
                                    url: 'EquipmentUse.ashx',
                                    type: 'POST',
                                    data: {
                                        eid: $("#ddleu_eid").val()
                                    }
                                }
                                $(function () {
                                    $("#ddleu_eid").change(function () {
                                        events.data.eid = $(this).val();
                                        $('#calendar').fullCalendar('refetchEvents');
                                    });
                                })

                            </script>
                            <div class="form-group">
                                <div id="calendar"></div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <uc2:NewFooter runat="server" ID="NewFooter" />
    </div>

    <script src="/control/plugin/bootstrap3/js/bootstrap.min.js"></script>
    <script src="/control/plugin/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="/control/plugin/autocomplete/jquery.autocomplete.js"></script>
    <script src="/control/plugin/fullcalendar/lib/moment.min.js"></script>
    <script src='/control/plugin/fullcalendar/fullcalendar.js'></script>
    <script src="/control/plugin/fullcalendar/locale/zh-cn.js"></script>
    <script src="/control/js/String.js"></script>
</body>
</html>
