<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Records.aspx.cs" Inherits="SmartLogonServer.Records" %>

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--必须的css引用-->
    <link href="Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/bootstrap-table/bootstrap-table.min.css"  rel="stylesheet" />
<link href="Content/bootstrap-table/extensions/fixed-column/bootstrap-table-fixed-columns.css"  rel="stylesheet" />
    <link href="Content/daterangepicker.css"  rel="stylesheet" />
</head>
<body>
    <div class="panel-body" style="padding-bottom:0px;">
      
                <div class="panel panel-default">
            <div class="panel-heading">查询条件</div>
            <div class="panel-body">
                <form id="formSearch" class="form-horizontal">
                    <div class="form-group">
                        <div class ="row">
                        <label class="control-label col-xs-1" for="txt_search_pcode">编码</label>
                        <div class="col-xs-3">
                            <input type="text" class="form-control" id="txt_search_pccode"/>
                        </div>
                        <label class="control-label col-xs-1" for="txt_search_name">名称</label>
                        <div class="col-xs-3">
                            <input type="text" class="form-control" id="txt_search_name" />
                        </div>
                            <div class="col-xs-2" style="text-align:right;">
                            <button type="button" id="btn_clear"  class="btn col-xs-10">清空</button>
                          
        
                        </div>
                            </div>
                        <div class ="row">
                        <label class="control-label col-xs-1" for="txt_search_holdername">持卡人</label>
                        <div class="col-xs-3">
                            <input type="text" class="form-control" id="txt_search_holdername"/>
                        </div>
                        <label class="control-label col-xs-1" for="txt_search_card">卡号</label>
                        <div class="col-xs-3">
                            <input type="text" class="form-control" id="txt_search_card" />
                        </div>
                           <div class="col-xs-2" style="text-align:right;">
                            
                            <button type="button" id="btn_query" class="btn  col-xs-10 btn-primary">查询</button>
        
                        </div>
                            </div>
                        <div class ="row">
                        <label class="control-label col-xs-1" for="range_date">日期</label>
                        <div class="col-xs-3">
                                 <div class="form-group daterange">
                   
                    <input style="margin-left:16px;" class="form-control" name="range_date" id ="range_date" type="text"/>
                    <i class="fa fa-calendar"></i>
                   </div>
                        </div>
                        <label class="control-label col-xs-1" for="txt_search_type">类型</label>
                        <div class="col-xs-3">
                            <select name="txt_search_type" class="form-control" id="txt_search_type">
                                 <option value="0">全部</option>
                                <option value="1">登录</option>
                                <option value="12">时段锁屏</option>
                                <option value="13">时段注销</option>
                                <option value="14">时段关机</option>
                                <option value="15">时段关机</option>
                                 <option value="16">卡锁屏</option>
                                <option value="17">卡注销</option>
                                <option value="18">卡关机</option>
                                <option value="19">卡关机</option>
                                <option value="20">锁屏</option>
                                <option value="21">关机</option>
                                 <option value="30">退出</option>
          
                                 </select>
                        </div>
                              
      
                        <div class="col-xs-2" style="text-align:right;">

                            <button type="button" id="btn_export" class="btn btn-info col-xs-10" >导出Excel</button>
                        </div>
                            </div>

                         <div class ="row">
                        <label class="control-label col-xs-1" for="txt_search_holdername">计算机组</label>
                        <div class="col-xs-3">
                            <select runat="server" name="computergroup" class="form-control" id="computergroup"></select>
                        </div>
                        <label class="control-label col-xs-1" for="txt_search_card">卡组</label>
                        <div class="col-xs-3">
                            <select runat="server" name="cardgroup" class="form-control" id="cardgroup"></select>
                        </div>
                             </div>
                    </div>
                </form>
            </div>
        </div>
        <!--
            <div id="toolbar" class="btn-group">   
                <div class="form-group daterange">
                   
                    <input class="form-control" name="range_date" type="text"/>
                    <i class="fa fa-calendar"></i>
                </div>

            </div>-->
        <table id="tb_record"></table>
    </div>

    

        <!--必须的js文件-->
        <script src="Content/jquery-1.9.1.min.js"></script>
        <script src="Content/bootstrap/js/bootstrap.min.js"></script>
        <script src="Content/bootstrap-table/bootstrap-table.min.js"></script>
        <script src="Content/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
        <script src="Content/bootstrap-table/extensions/fixed-column/bootstrap-table-fixed-columns.js"></script>
    <script src="Content/bootstrap-table/extensions/export/bootstrap-table-export.js"></script>
    <script src="Content/bootstrap-table/extensions/export/tableExport.js"></script>
        <script src="Content/moment.min.js"></script>
         <script src="Content/daterangepicker.js"></script>
        <script type="text/javascript">
            //页面加载完成之后

            var startdate = moment().subtract(6, 'days');
            var enddate = moment();
            $(function () {

                $(".daterange input").each(function () {
                    var $this = $(this);

                    $this.daterangepicker({
                       // autoApply: true,
                        startDate: startdate,
                        endDate: enddate,
                        locale: {
                            "format": "YYYY-MM-DD",// 显示格式
                            "separator": " / ",// 两个日期之间的分割线
                            // 中文化
                            "applyLabel": "确定",
                            "cancelLabel": "取消",
                            "fromLabel": "开始",
                            "toLabel": "结束",
                            "daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
                            "monthNames": ["一月", "二月", "三月", "四月", "五月", "六", "七月", "八月", "九月", "十月", "十一月", "十二月"],
                            "firstDay": 1
                        },

 
                    }, function (start, end, label) {
                        // 点击确定后的事件，下面是为了bootstrap validate得校验，
                        // 若未使用，可忽视
                        if ($this.parents("form.required-validate").length > 0) {
                            var $form = $this.parents("form.required-validate");

                            var name = $this.attr("name");
                            if ($form.length > 0) {
                                var data = $form.data('bootstrapValidator');
                                data.updateStatus(name, 'NOT_VALIDATED', null)
                                // Validate the field
                                .validateField(name);
                            }
                        }
                        // 设置最小宽度，否则显示不全
                    }).css("min-width", "210px").next("i").click(function () {
                        // 对日期的i标签增加click事件，使其在鼠标点击时可以拉出日期选择
                        $(this).parent().find('input').click();
                    });


                    $this.on('apply.daterangepicker', function (ev, picker) {
                        startdate = picker.startDate;//.format('YYYY-MM-DD');
                        enddate = picker.endDate;//.format('YYYY-MM-DD');
  
                        //$('#tb_record').bootstrapTable('refresh', { query: { "start": start, "end": end } });
                    });
                });

                
                //表格的初始化
                $('#tb_record').bootstrapTable({
                    url: "LogonRecord.ashx",                         //直接从本地数据初始化表格
                    method: 'get',                      //请求方式（*）
                    //datatype: "json",
                    //contentType: "application/x-www-form-urlencoded",
                    toolbar: '#toolbar',                //工具按钮用哪个容器
                    idField: 'ID',
                    uniqueId: 'ID',
                    striped: true,                      //是否显示行间隔色
                    cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                    pagination: true,                   //是否显示分页（*）
                    sortable: false,                     //是否启用排序
                    sortOrder: "asc",                   //排序方式
                    queryParams: function (params) {
                        var pages = {
                            limit: params.pageSize, // 每页显示数量
                            offset: params.pageNumber, // SQL语句起始索引
                            pccode: $("#txt_search_pccode").val(),
                            name: $("#txt_search_name").val(),
                            holdername: $("#txt_search_holdername").val(),
                            cardno: $("#txt_search_card").val(),
                            start: startdate.format('YYYY-MM-DD'),
                            end: enddate.format('YYYY-MM-DD'),
                            type: $("#txt_search_type").val(),
                            pcgroup:$("#computergroup").val(),
                            cardgroup:$("#cardgroup").val()
                        }

                        return JSON.stringify(pages);
                    },                                  //传递参数（*）
                    queryParamsType: "",
                    sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                    pageNumber: 1,                      //初始化加载第一页，默认第一页
                    pageSize: 25,                       //每页的记录行数（*）
                    pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                    search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                    strictSearch: true,
                    showColumns: true,                  //是否显示所有的列

                    showRefresh: true,                  //是否显示刷新按钮
                    minimumCountColumns: 2,             //最少允许的列数
                    height: 800,
                    selectItemName: 'parentItem',
                    fixedColumns: true,
                    fixedNumber: 6,
                    showToggle: false,          //是否显示详细视图和列表视图的切换按钮
                    cardView: false,          //是否显示详细视图
                    showExport: true, //是否显示导出按钮
                    exportDataType: "all",
                    exportTypes: ['excel'], //导出文件类型
                    //注册加载子表的事件。注意下这里的三个参数！
                    onExpandRow: function (index, row, $detail) {
                        InitSubTable(index, row, $detail);
                    },
                    columns: [{
                        checkbox: false,
                        width: 10
                    }, {
                        field: 'CardNo',
                        title: '卡号',
                        width: 100

                    }, {
                        field: 'CardHolderName',
                        title: '持卡人',
                        width: 200

                    }, 
                    {
                        field: 'CardGroupName',
                        title: '卡组',
                        width: 200

                    },{
                        field: 'ComputerName',
                        title: '计算机名称',
                        width: 200

                    }, {
                        field: 'PCGroupName',
                        title: '计算机组',
                        width: 200

                    },{
                        field: 'ComputerID',
                        title: '编码',
                        width: 100
                    }, 
                    {
                        field: 'ActionType',
                        title: '类型',
                        formatter: function (value, row, index) {
                            if (value == 1) { //row['ActionType'] 
                                return '登录';
                            }
                            if (value == 12) {
                                return '时段锁屏';
                            }
                            if (value == 13) {
                                return '时段注销';
                            }
                            if (value == 14) {
                                return '时段关机';
                            }
                            if (value == 15) {
                                return '时段关机';
                            }
                            if (value == 16) {
                                return '卡锁屏';
                            }
                            if (value == 17) {
                                return '卡注销';
                            }
                            if (value == 18) {
                                return '卡关机';
                            }
                            if (value == 19) {
                                return '卡关机';
                            }
                            if (value == 20) {
                                return '锁屏';
                            }
                            if (value == 21) {
                                return '关机';
                            }
                            if (value == 30) {
                                return '退出';
                            }
                            return value;
                        },
                        width: 100
                    }, 
                    {
                        field: 'LogonTime',
                        title: '登录时间',
                        width: 200
                    }, 
                     {
                         field: 'LogoutTime',
                         title: '登出时间',
                         width: 200
                     },
                    {
                        field: 'TotalTime',
                        title: '时长',
                        formatter: function (value, row, index) {
                            if (value >= 0) {
                                var h = parseInt(value / 60);
                                var m = value % 60;
                                return h + ":" + ("0" + m).slice(-2);;
                            }
                            else {
                                return value;
                            }
                        }
                    }
                    ]

                });



            });

 
            $("#btn_clear").click(function () {
                $("#txt_search_pccode").val("");
                $("#txt_search_name").val("");
                $("#txt_search_holdername").val("");
  
            })

            $("#btn_query").click(function () {
                $('#tb_record').bootstrapTable('removeAll');
                $('#tb_record').bootstrapTable('refresh', { offset: 1 });
            })

            $("#btn_export").click(function () {
                $.ajax({
                    url: "exportrecord.ashx",
                    type: 'POST',
                    data: {
                        'pccode': $("#txt_search_pccode").val(),
                        'name': $("#txt_search_name").val(),
                        'holdername': $("#txt_search_holdername").val(),
                        'cardno': $("#txt_search_card").val(),
                        'start': startdate.format('YYYY-MM-DD'),
                        'end': enddate.format('YYYY-MM-DD'),
                        'type': $("#txt_search_type").val()
                    },
                    async: true,
                    datatype: 'JSON',
                    success: function(res, status, xhr) {
                        const fileName = `yoworfidlogonrecord.csv`;
                        console.log(res);
                        if (window.navigator.msSaveOrOpenBlob) {
                            window.navigator.msSaveBlob(res, fileName)
                        } else {
                            const downloadLink = window.document.createElement('a')
                            downloadLink.href = "recorddown.csv";//window.URL.createObjectURL(new Blob([res]), { type: 'text/plain;charset=gb2312'}) //'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
                            downloadLink.download = fileName
                            document.body.appendChild(downloadLink)
                            downloadLink.click()
                            document.body.removeChild(downloadLink)
                        }
                    

                    },
                    error: function () {
                        alert("error");
                    }
                });
            })
        </script>
</body>
</html>
