
@{
    /**/

    Layout = null;
}
@using ReportWeb_MVC.Models;
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Regional call</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 laydate = layui.laydate;
            var form = layui.form;
            var layer = layui.layer;
            var table = layui.table;
            var bodyWidth = $(document.body).width();
            var util = layui.util;
            laydate.render({
                elem: '#test1'
            });
            laydate.render({
                elem: '#test2'
            });
            SelectValue("今天", "txt_StaData", "txt_EndData");
            form.on('select(test)', function (data) {
                SelectValue(data.value, "txt_StaData", "txt_EndData");
                if (data.value == "自定义") {
                    $("input[name='txt_StaData']").css("pointer-events", "auto");
                    $("input[name='txt_StaData']").css("opacity", "1");
                    $("input[name='txt_EndData']").css("pointer-events", "auto");
                    $("input[name='txt_EndData']").css("opacity", "1");
                } else {
                    $("input[name='txt_StaData']").css("pointer-events", "none");
                    $("input[name='txt_StaData']").css("opacity", "0.5");
                    $("input[name='txt_EndData']").css("pointer-events", "none");
                    $("input[name='txt_EndData']").css("opacity", "0.5");
                }
            });
            var tableIns = table.render({
                ID: 'tablet',
                elem: '#LAY-app-content-comm',
                height: 'full-100',
                cellMinWidth: '60',
                width: (bodyWidth - 80).toString(),
                url: '/Statistics/AreaCallCount',
                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: 'Regional call',
                loading: true,
                text: { none: 'No relevant data' },
                //totalRow: true,
                cols: [[
                    { type: 'numbers', title: 'Number', width: 70, align: 'center' },//totalRowText: '合计'
                    { field: 'AREA', title: 'Area', width: 100, align: 'center' },
                    { field: 'AreaName', title: 'Area Nmae', width: 110, align: 'center' },
                    { field: 'CallCharge', title: 'Traffic Cost', width: 150, align: 'center', sort: true, event: 'ev_CallCharge', style: 'cursor: pointer; color:blue;', templet: function (d) { return parseFloat(d.CallCharge).toFixed(3); } },
                    { field: 'CallCount', title: 'Traffic Count', width: 150, align: 'center', sort: true, event: 'ev_CallCount', style: 'cursor: pointer; color:blue;' },
                    { field: 'CallDuration', title: 'Traffic Duration', width: 160, align: 'center', sort: true, event: 'ev_CallDuration', style: 'cursor: pointer; color:blue;', templet: function (d) { return showTime(d.CallDuration); } }
                ]],
                done: function (res) {
                    jsondata = res.data;
                }
            });
            //查询
            $("#btn_Query").click(function () {
                var type = $("select[name='sel_Data']").val();
                var startData = $("#test1").val();
                var endData = $("#test2").val();
                var content = $("#txt_Content").val();
                var direction = $("select[name='sel_Direction']").val();
                tableIns.reload({
                    url: '/Statistics/AreaCallCount',
                    where: {
                        Type: type,
                        StartDta: startData,
                        EndData: endData,
                        Direction: direction,
                        Content: content,
                        TypeWhere: "1"
                    },
                    done: function (res) {
                        jsondata = res.data;
                    }
                });
            });

            table.on('toolbar(table_filter)', function (obj) {
                var event = obj.event;
                if (event == 'lyprint') {
                    var startData = $("#test1").val();
                    var endData = $("#test2").val();
                    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>" + "Start Date：" + startData + "---End Date：" + endData + "</title></head><body>";
                    var stylestr = "<style>table{border-collapse: collapse;color:black;font-size:16px;}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.title = "Start Date：" + startData + "---End Date：" + endData;
                    iwindow.document.write(headstr + stylestr + prnhtml + footstr);
                    iwindow.print(); //调用浏览器的打印功能打印指定区域
                }
                else if (event == "lyexport") {//导出
                    var index = layer.load(1);
                    $.post("/Statistics/export_Method", { eMethod: "ACallCount", eType: "1" }, function (result) {
                        var Rst = result;
                        if (Rst != "-1") {
                            $("input[name='txtPath']").val(Rst);
                            $("input[name='txtName']").val("Regional call");
                            $("#inp_Submit").click();
                            layer.close(index);
                        }
                        else {
                            layer.close(index);
                            layer.alert("No exported files");
                        }
                    });
                }
            });

            //监听单元格事件
            table.on('tool(table_filter)', function (obj) {
                var data = obj.data;
                var event = obj.event;
                var type = $("select[name='sel_Data']").val();
                var Where = "";
                if (type != "全部") {
                    var startData = $("#test1").val();
                    var endData = $("#test2").val();
                    Where = " and CallDate >='" + startData + " 00:00:00' and CallDate<='" + endData + " 23:59:59'";
                }
                if (data.AREA != "Total") {
                    Where += " and Area='" + data.AREA + "' and AreaName='" + data.AreaName + "'";
                }
                else {
                    var content = $("#txt_Content").val();
                    if (content.length > 0) {
                        Where += " and (Area like '％" + content + "％' OR AreaName like '％" + content + "％')";
                    }
                }
                var direction = $("select[name='sel_Direction']").val();
                if (direction != "全部") {
                    Where += " and CallDirection='" + direction + "'";
                }
                if (Where != "") {
                    if (Where.substring(1, 4) == "and") {
                        Where = Where.substring(5, Where.length);
                    }
                }
                layer.open({
                    type: 2,
                    title: 'Call Records',
                    shade: 0.8,
                    area: ['95%', '95%'],
                    content: '/HomeTemporary/RecordReportTemporaryOne?Where=' + Where, //iframe的url
                    end: function () {
                        //$.post("/Statistics/ClearTempData", {}, function () {

                        //});
                    }
                });
            });
        });
    </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="margin-top:2px; width:60px; padding-left:0px; padding-right:5px;">Call Direction</label>
                                <div class="layui-input-inline" style="width:80px;margin: 0px;margin-right: 5px;">
                                    <div class="layui-input-inline" style="width:80px;margin: 0px;margin-right: 5px;">
                                        <select name="sel_Direction" lay-filter="Sel_Direction">
                                            <option value="全部" selected="">All</option>
                                            <option value="0">Incoming</option>
                                            <option value="1">Outgoing</option>
                                            <option value="2">Inside</option>
                                        </select>
                                    </div>
                                </div>
                                <label class="layui-form-label" style="margin-top:2px;padding-right:5px;padding-left:0px;width:120px;">Statistical Date</label>
                                <div class="layui-input-inline" style="width:80px;margin: 0px;margin-right: 5px;">
                                    <select name="sel_Data" lay-filter="test">
                                        <option value="全部">All</option>
                                        <option value="今天" selected="">Today</option>
                                        <option value="昨天">Yesterday</option>
                                        <option value="本周">This week</option>
                                        <option value="上周">Last week</option>
                                        <option value="本月">This month</option>
                                        <option value="上月">Last month</option>
                                        <option value="自定义">Customize</option>
                                    </select>
                                </div>
                                <div class="layui-input-inline" style="width:90px; margin: 0px;margin-right: 5px;">
                                    <input type="text" name="txt_StaData" class="layui-input txt_data" id="test1" placeholder="yyyy-MM-dd">
                                </div>
                                <div class="layui-input-inline" style="width:90px;margin: 0px;margin-right: 5px;">
                                    <input type="text" name="txt_EndData" class="layui-input txt_data" id="test2" placeholder="yyyy-MM-dd">
                                </div>
                                <div class="layui-input-inline" style="width:200px; margin: 0px;margin-right: 5px;">
                                    <input type="text" class="layui-input" placeholder="Please enter search criteria" id="txt_Content">
                                </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>
