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

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Call Records</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/Common.js"></script>
    <script type="text/javascript">
        layui.use(['laydate', 'layer', 'form', 'table'], function () {
            var laydate = layui.laydate;
            var form = layui.form;
            var layer = layui.layer;
            var table = layui.table;
            var bodyWidth = $(document.body).width();
            //常规用法
            laydate.render({
                elem: '#test1'
            });
            laydate.render({
                elem: '#test2'
            });
            laydate.render({
                elem: '#test3'
            });
            laydate.render({
                elem: '#test4'
            });
            //时间选择器
            laydate.render({
                elem: '#time1'
              , type: 'time'
            });
            //时间选择器
            laydate.render({
                elem: '#time2'
              , type: 'time'
            });
            laydate.render({
                elem: '#time3'
             , type: 'time'
            });
            laydate.render({
                elem: '#time4'
             , type: 'time'
            });
            laydate.render({
                elem: '#time5'
             , type: 'time'
            });
            laydate.render({
                elem: '#time6'
             , type: 'time'
            });
            laydate.render({
                elem: '#time7'
             , type: 'time'
            });
            laydate.render({
                elem: '#time8'
             , type: 'time'
            });
            //普通查询
            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");
                }
            });
            //高级查询
            SelectValue("全部", "txt_StaDataG", "txt_EndDataG");
            form.on('select(testG)', function (data) {
                SelectValue(data.value, "txt_StaDataG", "txt_EndDataG");
                if (data.value == "自定义") {
                    $("input[name='txt_StaDataG']").css("pointer-events", "auto");
                    $("input[name='txt_StaDataG']").css("opacity", "1");
                    $("input[name='txt_EndDataG']").css("pointer-events", "auto");
                    $("input[name='txt_EndDataG']").css("opacity", "1");
                } else {
                    $("input[name='txt_StaDataG']").css("pointer-events", "none");
                    $("input[name='txt_StaDataG']").css("opacity", "0.5");
                    $("input[name='txt_EndDataG']").css("pointer-events", "none");
                    $("input[name='txt_EndDataG']").css("opacity", "0.5");
                }
            });
            var tableIns = table.render({
                ID: 'tablet',
                elem: '#LAY-app-content-comm',
                height: 450,
                cellMinWidth: 60,
                width: (bodyWidth - 70).toString(),
                url: '/HomeTemporary/LoadData',
                even: true,
                page: {
                    layout: ['prev', 'page', 'next'],
                    curr: 1,
                    groups: 5,
                    limit: 10,
                    limits: [10, 50, 100, 200, 300],
                },
                toolbar: '#toolbarDemo',
                defaultToolbar: [{
                    title: 'Export a single file' //标题
                    , layEvent: 'lyexport' //事件名，用于 toolbar 事件中使用
                    , icon: 'layui-icon-download-circle' //图标类名
                }, {
                        title: 'Single file split by department and multiple labels' //标题
                    , layEvent: 'odexport' //事件名，用于 toolbar 事件中使用
                    , icon: 'layui-icon-download-circle' //图标类名
                }, {
                        title: 'Multiple files split by department' //标题
                    , layEvent: 'mdexport' //事件名，用于 toolbar 事件中使用
                    , icon: 'layui-icon-download-circle' //图标类名
                }, 'print'],
                title: 'Call Records',
                loading: true,
                text: { none: 'No relevant data' },
                totalRow: true,
                cols: [[
                    { type: 'checkbox', fixed: 'left', checkbox: true },
                    { type: 'numbers', fixed: 'left', title: 'Number', width: 80, templet: '#indexTpl', align: 'center' },
                    { field: "right", fixed: 'left', title: 'Instruction', width: 100, align: 'center', toolbar: '#table-content-com' },
                    { field: 'CallRecordID', title: 'ID', width: 60, sort: true, align: 'center', hide: true },
                    { field: 'ExtensionNum', title: 'Extension Num', width: 130, align: 'center' },
                    { field: 'DepartmentName', title: 'Department name', width: 150, align: 'center' },
                    { field: 'EmployeeName', title: 'Employee name', width: 140, align: 'center' },
                    { field: 'CallDate', title: 'Call date', width: 110, align: 'center', templet: "<div>{{layui.util.toDateString(d.CallDate, 'yyyy-MM-dd')}}</div>" },
                    { field: 'StartTime', title: 'Start Time', width: 110, align: 'center' },
                    { field: 'EndTime', title: 'End Time', width: 110, align: 'center' },
                    { field: 'CallDuration', title: 'Call duration', width: 120, align: 'center' },
                    { field: 'TrunkNum', title: 'Trunk name', width: 120, align: 'center' },
                    { field: 'CallDirection', title: 'Call direction', width: 120, align: 'center' },
                    { field: 'CallNumber', title: 'Call Num', width: 120, align: 'center' },
                    { field: 'Area', title: 'Area', width: 100, align: 'center' },
                    { field: 'AreaName', title: 'Area name', width: 100, align: 'center' },
                    { field: 'TelephoneTrafficType', title: 'Traffic type', width: 120, align: 'center' },
                    { field: 'CallType', title: 'Call type', width: 120, align: 'center' },
                    { field: 'Charge', title: 'Charge(yuan)', width: 120, align: 'center', totalRow: true },
                    { field: 'ExamineContent', title: 'Instruction content', minWidth: 150, align: 'center' },
                    { field: 'RecordID', title: 'Bill ID', width: 90, align: 'center' },
                    { field: 'CarryPassword', title: 'Portable password', width: 150, align: 'center' }
                ]]
            });

            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;}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("/Home/export_Method", { record: "3", eType: "1" }, function (result) {
                        var Rst = result;
                        if (Rst != "-1") {
                            $("input[name='txtPath']").val(Rst);
                            $("input[name='txtName']").val("Call Records");
                            $("#inp_Submit").click();
                            layer.close(index);
                        }
                        else {
                            layer.close(index);
                            layer.alert("No exported files");
                        }
                    });
                }
                else if (event == "odexport") {//单一文件按部门多标签拆分
                    var index = layer.load(1);
                    $.post("/Home/export_Method", { record: "3", eType: "2" }, function (result) {
                        var Rst = result;
                        if (Rst != "-1") {
                            $("input[name='txtPath']").val(Rst);
                            $("input[name='txtName']").val("Call Records");
                            $("#inp_Submit").click();
                            layer.close(index);
                        }
                        else {
                            layer.close(index);
                            layer.alert("No exported files");
                        }
                    });
                }
                else if (event == "mdexport") {//多个文件按部门拆分
                    var index = layer.load(1);
                    $.post("/Home/export_Method", { record: "3", eType: "3" }, function (result) {
                        var Rst = result;
                        if (Rst != "-1") {
                            $("input[name='txtPath']").val(Rst);
                            $("input[name='txtName']").val("Call Records");
                            $("#inp_Submit").click();
                            layer.close(index);
                        }
                        else {
                            layer.close(index);
                            layer.alert("No exported files");
                        }
                    });
                }
            });

            //Call RecordsID
            var id;
            //点击修改批示按钮。
            table.on('tool(table_filter)', function (obj) {
                var data = obj.data;
                var layEvent = obj.event;
                id = data.CallRecordID;
                if (layEvent == "Approval") {
                    layer.open({
                        title: 'Instruction Content',
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['420px', '240px'], //宽高
                        content: $('#Approval'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                        success: function (layero, index) {
                            $.post("/HomeTemporary/ApprovalContent", { ID: id }, function (result) {
                                $("#txt_Content1").val(result);
                            });
                        }
                    });
                }
            });
            //修改批示内容
            $("#btn_Save").click(function () {
                var content = $("#txt_Content1").val();
                $.post("/HomeTemporary/ApprovalContentUpdate", { ID: id, Content: content }, function (result) {
                    if (result == "0") {
                        layer.close(layer.index);
                        tableIns.reload({});
                    } else {
                        layer.alert("Save failed");
                    }
                })
            });
        });
    </script>
    <style type="text/css">
        .txt_data {
            pointer-events: none;
            opacity: 0.5;
        }

        ._TianChong {
            clear: both;
            height: 10px;
        }
    </style>
</head>
<body>
    <div class="_TianChong"></div>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <form action="/Home/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-item layui-form-text" id="Approval" style="display:none;">
                <div class="layui-input-block" style="margin:0px;padding:0px;">
                    <textarea placeholder="请输入内容" class="layui-textarea" name="txt_Content" id="txt_Content1" style="height:130px;"></textarea>
                    <button class="layui-btn" id="btn_Save" style="width:100%;">Save</button>
                </div>
            </div>
            <div class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-card-body" style="margin-top:-30px;">
                            <table id="LAY-app-content-comm" lay-filter="table_filter"></table>
                            <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>
</body>
</html>
