@using WX.CRM.WebHelper
@using WX.CRM.Model.DTO;
@{
    ViewBag.Title = "远程列表";
    Layout = "~/Views/Shared/_content.cshtml";
}
<script src="/Scripts/jquery.easyui.min.js" type="text/javascript"></script>
<link href="/Content/themes/blue/easyui.css" rel="stylesheet" />
<link href="/Content/Site.css" rel="stylesheet" />
<script src="/Scripts/common.js"></script>
<link href="/Content/data_grid_list.css" rel="stylesheet" />
<script src="/Scripts/op/jquery.rewrite.js"></script>

<div class="layui-card" id="topcard" style="width:100%;">
    <div class="layui-card-body " id="contentBody">
        <form class="layui-form selftopwhere" id="myform">
            <div class="layui-form-item">
                选择：
                <div class="layui-inline">
                    <select id="slt_Type" name="Type">
                        <option value="">全部</option>
                        <option value="1">主控人</option>
                        <option value="2">被控人</option>
                    </select>
                </div>
                工号：
                <div class="layui-inline">
                    <input type="text" class="layui-input" name="Eid" style="width:120px;" />
                </div>
                姓名：
                <div class="layui-inline">
                    <input type="text" class="layui-input" name="Name" style="width:120px;"  />
                </div>
                客户id：
                <div class="layui-inline">
                    <input type="text" class="layui-input" name="ResId" style="width:120px;"  />
                </div>
                用户名:
                <div class="layui-inline">
                    <input type="text" class="layui-input" name="UserName" style="width:120px;"  />
                </div>
                发起链接时间：
                <div class="layui-inline">
                    <input class="layui-input"  name="InitConnectStartTime" id="InitConnectStartTime" style="width:120px;">
                </div>
                <div class="layui-inline">
                    <input class="layui-input"  name="InitConnectEndTime" id="InitConnectEndTime" style="width:120px;">
                </div>
                <div class="layui-inline" style="width:350px">
                    <input class="layui-btn layui-btn-sm layui-btn-ok" data-method="search" id="search" type="button" value="查询" />
                    <input class="layui-btn layui-btn-sm layui-btn-reset" type="reset" value="清空" />
                </div>
            </div>
        </form>
        <table class="layui-hide" id="list" lay-filter="list"></table>
    </div>
</div>

<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#InitConnectStartTime' //指定元素
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#InitConnectEndTime' //指定元素
        });
    });

    var selectRows = [];
    var winindex;
    var layer;
    var table;
    var form;
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use(['laypage', 'layer', 'table', 'laydate', 'form'], function () {
        var param = $("#myform").serializeFormJSON();
        var laydate = layui.laydate;
        form = layui.form;
        layer = layui.layer;
        table = layui.table;
        table.render({
            id: 'list'//列表别名ID
            , elem: '#list'
            , url: '/ScreenRecord/GetHtmlList'
            , method: 'post'
            , dataType: 'json'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , page: true
            , limit: 10
            , height: "full-160"
            , size: "sm"
            , cols: [[
                { field: 'Id', title: 'Id', width: 60 }
                , { field: 'MasterEidStr', title: '主控人工号' }
                , { field: 'MasterUmid', title: '主控人客户ID' }
                , { field: 'MasterName', title: '主控人姓名' }
                , { field: 'MasterUserName', title: '主控用户名' }
                , { field: 'SlaveEidStr', title: '被控人工号' }
                , { field: 'SlaveUmid', title: '被控人客户ID' }
                , { field: 'SlaveName', title: '被控人姓名' }
                , { field: 'SlaveUserName', title: '被控用户名' }
                , { field: 'InitConnectTime', title: '发起链接日期' }
                , { field: 'RealStartTime', title: '实际开始日期' }
                , { field: 'RealEndTime', title: '实际结束日期' }
                , { field: 'RealLongTime', title: '实际时长' }
            ]], where: param
        });
        var active = {
            search: function () {
                var param = $("#myform").serializeFormJSON();
                table.reload('list', {
                    where: param,
                    page: {
                        curr: 1
                    }
                });
            }
        };
        $('#search').on('click', function () {
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });
    });

    function Closed() {
        layer.close(winindex);
    }
    function TableReload() {
        table.reload('list', {

        });
    }

    function GetIframeHtml(src) {
        return "<iframe width='100%' height='98%' scrolling='auto' frameborder='0'' src='" + src + "'></iframe>";
    }
    function onLoadSucced() {
    }
</script>