@{
    Layout = null;
}
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Idle Extension Statistics</title>
    <script src="~/Content/layui/layui.js"></script>
    <link href="~/Content/layui/css/layui.css" rel="stylesheet" />
    <script src="~/Content/jquery-1.8.3.js"></script>
    <script src="~/Content/echarts.min.js"></script>
    <script src="~/Content/Common.js"></script>
    <link href="~/Content/Common.css" rel="stylesheet" />
    <script type="text/javascript">
        var jsondata;
        layui.use(['layer', 'form', 'table', 'laydate'], function () {
            var form = layui.form;
            var layer = layui.layer;
            var table = layui.table;
            var bodyWidth = $(document.body).width();
            var type1 = $("select[name='sel_Data']").val();
            var tableIns = table.render({
                ID: 'tablet',
                where: {
                    Type: type1
                },
                elem: '#LAY-app-content-comm',
                height: 'full-100',
                cellMinWidth: '60',
                width: (bodyWidth - 80).toString(),
                url: '/Statistics/LoadIdleExtensionNum',
                even: true,
                toolbar: '#toolbarDemo',
                defaultToolbar: [{
                    title: 'Export' //标题
                    , layEvent: 'lyexport' //事件名，用于 toolbar 事件中使用
                    , icon: 'layui-icon-download-circle' //图标类名
                }, {
                    title: 'Print' //标题
                    , layEvent: 'lyprint' //事件名，用于 toolbar 事件中使用
                    , icon: 'layui-icon-print' //图标类名
                }],
                title: 'Idle Extension Statistics',
                loading: true,
                text: { none: 'No relevant data' },
                //totalRow: true,
                cols: [[
                    { type: 'numbers', title: 'Number', width: 60, align: 'center' },
                    { field: 'EmployeeName', title: 'Employee Name', width: 150, align: 'center' },
                    { field: 'ExtensionNum', title: 'Extension Num', width: 150, align: 'center' },
                    { field: 'DepartmentName', title: 'Department Name', width: 180, align: 'center' },
                ]],
                done: function (res) {
                    jsondata = res.data;
                }
            });
            //查询v
            $("#btn_Query").click(function () {
                var type = $("select[name='sel_Data']").val();
                var startData = $("#test1").val();
                var endData = $("#test2").val();
                var content = $("#txt_Content").val();
                tableIns.reload({
                    url: '/Statistics/LoadIdleExtensionNum',
                    where: {
                        Type: type,
                        Content: content
                    },
                    done: function (res) {
                        jsondata = res.data;
                    }
                });
            });
            table.on('toolbar(table_filter)', function (obj) {
                var event = obj.event;
                if (event == 'lyprint') {
                    var bdhtml = $("#divTable").html();
                    var sprnstr = "<!--startprint-->"; //开始打印标识字符串有17个字符
                    var eprnstr = "<!--endprint-->"; //结束打印标识字符串
                    var prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17); //从开始打印标识之后的内容
                    prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr)); //截取开始标识和结束标识之间的内容
                    // 生成并打印ifrme
                    var iframe = document.getElementById("iframe1");
                    var iwindow = iframe.contentWindow;//获取iframe的window对象
                    iwindow.document.body.innerText = "";//先清空iframe原先的内容
                    var headstr = "<html><head><title></title></head><body>";
                    var stylestr = "<style>table{border-collapse: collapse;}table tr{height: 40px; line-height: 20px; }table tr td{border: solid 1px;}table tr th {border: solid 1px;}</style>";
                    var footstr = "</body></html>";
                    iwindow.document.write(headstr + stylestr + prnhtml + footstr);
                    iwindow.print(); //调用浏览器的打印功能打印指定区域
                }
                else if (event == "lyexport") {//导出
                    var index = layer.load(1);
                    $.post("/Statistics/export_Method", { eMethod: "EIdleExtensionNum", eType: "1" }, function (result) {
                        var Rst = result;
                        if (Rst != "-1") {
                            $("input[name='txtPath']").val(Rst);
                            $("input[name='txtName']").val("Idle Extension Statistics");
                            $("#inp_Submit").click();
                            layer.close(index);
                        }
                        else {
                            layer.close(index);
                            layer.alert("No exported files");
                        }
                    });
                }
            });
        });
    </script>
</head>
<body>
    <div class="_TianChong_top"></div>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <form action="/Statistics/excelDownLoad" method="post" style="display:none;">
                <input type="text" name="txtPath" value="" />
                <input type="text" name="txtName" value="" />
                <input type="submit" id="inp_Submit" />
            </form>
            <div class="layui-form">
                <div class="layui-form-item" style="width:99%;">
                    <div class="layui-inline" style="width:100%;">
                        <div class="layui-form-item" style="width:100%;">
                            <div class="layui-inline" style="margin-top:3px;float:right; margin-right:30px;">
                                <label class="layui-form-label" style="width: 100px; margin-top: 2px; padding-right: 5px; padding-left: 0px; ">Statistical Cycle</label>
                                <div class="layui-input-inline" style="width:120px;margin: 0px;margin-right: 5px;">
                                    <select name="sel_Data" lay-filter="test">
                                        <option value="一个月" selected="">One month</option>
                                        <option value="两个月">Two month</option>
                                        <option value="三个月">Three month</option>
                                        <option value="半年">Half year</option>
                                        <option value="一年">One year</option>
                                        <option value="两年">Two year</option>
                                        <option value="三年">Three year</option>
                                    </select>
                                </div>
                                <div class="layui-input-inline" style="width:60px; margin: 0px;margin-right: 0px;">
                                    <button class="layui-btn" id="btn_Query" style="margin-bottom:3px;">Query</button>
                                </div>
                            </div>
                        </div>
                        <div id="divTable" class="layui-card-body" style="margin-top:-30px;">
                            <!--startprint-->
                            <table id="LAY-app-content-comm" lay-filter="table_filter"></table>
                            <!--endprint-->
                            <script type="text/html" id="table-content-com">
                                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="Approval"><i class="layui-icon layui-icon-edit"></i></a>
                            </script>
                            <div class="layui-inline">
                                <script type="text/html" id="toolbarDemo">
                                    <div class="layui-btn-container">
                                    </div>
                                </script>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <iframe id="iframe1" style="display:none;"></iframe>
</body>
</html>
