<%@ Page Title="" Language="C#" MasterPageFile="~/m/m.Master" AutoEventWireup="true" CodeBehind="SearchStatus.aspx.cs" Inherits="Book.m.SearchStatus" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
       <link href="css/mui.picker.min.css" rel="stylesheet" />
     
       <header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">空闲查询</h1>
         <a class="mui-icon mui-icon-bars mui-pull-right" href="default.aspx"></a>
      </header>


    <style>
          .mui-pull-right input[type=text]  {
      margin-bottom:0px;
      margin-top:0px;
      height:30px;
       width:200px;
       border-radius:0px;
     }
      
       .mui-pull-right select{
      margin-bottom:0px;
      margin-top:0px;
      height:35px;
       width:200px;
       border-radius:0px;
     }

    </style>
    
      <div class="mui-content">
        <div class="mui-page"> 
 
  
                <ul class="mui-table-view">

                   <li class="mui-table-view-cell">
                          类别:
                        <span class="mui-pull-right">

                       <div class="mui-input-row mui-radio mui-left" style="display:inline-block; margin-left:0px; padding-left:0px;   ">
						<label>会议室</label>
						<input type="radio" onclick="GetData()" name="types" ID="room" value="room"  checked="checked" />
					</div>
             
                              <div class="mui-input-row mui-radio mui-left" style="display:inline-block; margin-left:0px; padding-left:0px;  ">
						<label>投影仪</label>
						<input type="radio" onclick="GetData()" name="types" ID="projector" value="projector"   />
					</div>
             
                          
                        </span>
                      </li>


                 <li class="mui-table-view-cell">
                          开始时间 
                        <span class="mui-pull-right">
                             

                         <input id='dt1' name="dt1" class="dt flat"  style="width:200px;" 
 
                              value='<%=initdt1 %>'
                              type="text">
                    </span>
                         </li>


                       <li class="mui-table-view-cell">
                          结束时间 
                            <span class="mui-pull-right">
                          <input id='dt2' name="dt2" class="dt flat" style="width:200px;"
                             
                                 value='<%=initdt2 %>'
                              type="text">
                          </span>
                    </li>


                  <li class="mui-table-view-cell">
					<span>显示所有状态</span>
					<div id="showall" class="mui-switch mui-active">
						<div class="mui-switch-handle"></div>
					</div>
				</li>

</ul>

            <p>查询结果</p>
            <input type="button" value="查询"   onclick="GetData();" class="mui-btn mui-btn-success flat mui-btn-block" style=" display:none; border-radius:0px; margin:5px;" />

            <input type="text" name="txt_showall" id="txt_showall" value="1" style="display:none" />
          
            </div>
          </div>


      <ul class="mui-table-view" style="font-size:13px" id="ul_lists">

                 
           
    </ul>









       <script src="js/mui.picker.min.js"></script>

  
    <script>

       
         

        $(".dt").on('tap', function () {
            that = this;
            var _init = $(that).val();
            options = {"value":""+_init+"", "customData": { "i": [{ "text": "00", "value": "00" }, { "text": "30", "value": "30" }] }, "labels": ["年", "月", "日", "时", "分"] };
            var dtPicker = new mui.DtPicker(options)
            dtPicker.show(function (rs) { 
                $(that).val(rs.text);
                GetData();
            }); 
        });


        $("#showall").on("toggle",
            function (e)
            {
                event.detail.isActive ? $("#txt_showall").val("1") : $("#txt_showall").val("0")
                GetData();
            }
            

            );


         
    </script>




     


   <script>
       function GetData()
       {
           _types = $("input[type=radio]:checked").val();
           _dt1 = $("#dt1").val();
           _dt2 = $("#dt2").val();
           _all = $("#txt_showall").val();

           var ul = $("#ul_lists");
           $(ul).html(' <li class=mui-table-view-cell> 查询中 <img src=../images/loading.gif  />  </li>  ');

       
           $.ajax(
               {
                   url: "ajax/chk_status.aspx",
                   cache: false,
                   dataType: "json",
                   data: { types: _types, dt1: _dt1, dt2: _dt2 },
                   success: function (result)
                   {
                       $(ul).html('');
                       for (var i = 0; i < result.length; i++) {

                           var name = result[i].name;
                           var status = result[i].status;
                           var _color="red";
                           if(status=="空闲")
                           {
                               _color="green";
                           }

                           var _li = "";

                           if (_all == "1") {
                               var _li = "  <li class=mui-table-view-cell>" + name + " <span class=mui-pull-right><font color=" + _color + ">" + status + "</font></span></li> ";
                               $(ul).append(_li);
                           }
                           else {
                               //空闲
                               if (status == "空闲") {
                                   var _li = "  <li class=mui-table-view-cell>" + name + " <span class=mui-pull-right><font color=" + _color + ">" + status + "</font></span></li> ";
                                   $(ul).append(_li);
                               }
                           }

                         
                       }

                   }
               
               }
            


               );


       }



       GetData();
   </script>














</asp:Content>
