@using Core.Web.Controllers
@using CRM.Core.Model.Entity
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="x-body layui-tab">
    @*<div class="layui-btn-group" style="padding-bottom:10px;">
            <button class="layui-btn" data-method="check">标记</button>
        </div>*@
    <ul class="layui-tab-title">
        <li class="layui-this">人工录音列表</li>
        <li>AI录音列表</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <form id="mytoolbar">
                事业部：
                <div class="layui-inline">
                    <select name="slt_companyCode" id="companyCode" style="height:35px;">
                        <option value="" @{ if (string.IsNullOrEmpty(Request.QueryString["code"])) { @Html.Raw("selected = \"selected\"")  ; } }>
                            请选择
                        </option>
                        @{
                            foreach (var company in (List<Company>)ViewBag.CompanyList)
                            {
                                <option value="@Html.Raw(company.Code)" @{ if (!string.IsNullOrEmpty(Request.QueryString["code"]) && Request.QueryString["code"] == company.Code) { @Html.Raw("selected = \"selected\"")  ; } }>
                                    @Html.Raw(company.Name)
                                </option>
                            }
                        }
                    </select>
                </div>
                呼叫类型：
                <div class="layui-inline">
                    <select name="slt_callType" id="callType" style="height:35px;">
                        <option value="">
                            所有
                        </option>
                        <option value="1">
                            呼出
                        </option>
                        <option value="0">
                            呼入
                        </option>
                    </select>
                </div>
                是否已听：
                <div class="layui-inline">
                    <select name="slt_isListened" id="isListened" style="height:35px;">
                        <option value="">
                            所有
                        </option>
                        <option value="1">
                            已听
                        </option>
                        <option value="0">
                            未听
                        </option>
                    </select>
                </div>
                录音编号：
                <div class="layui-inline">
                    <input type="text" name="txt_recordId" placeholder="请输入" autocomplete="off" class="layui-input" style="width:120px;">
                </div>
                客户ID：
                <div class="layui-inline">
                    @*<input type="text" name="txt_resId" placeholder="请输入" autocomplete="off" class="layui-input" style="width:120px;" value="@Request.QueryString["resid"]">*@
                    <input type="text" name="txt_UMID" placeholder="请输入" autocomplete="off" class="layui-input" style="width:120px;" value="@Request.QueryString["UMID"]">
                </div>
                客服姓名/工号：
                <div class="layui-inline">
                    <input type="text" name="txt_userId" placeholder="请输入" autocomplete="off" class="layui-input" style="width:120px;">
                </div>
                时长：
                <div class="layui-inline">
                    <input class="layui-input" placeholder="" name="txt_slength" id="slength" style="width:120px;">
                </div>
                至
                <div class="layui-inline">
                    <input class="layui-input" placeholder="" name="txt_elength" id="elength" style="width:120px;">
                </div>
                录音日期：
                <div class="layui-inline">
                    <input class="layui-input" placeholder="" name="txt_stime" id="start" style="width:120px;">
                </div>
                <div class="layui-inline">
                    <input class="layui-input" placeholder="" name="txt_etime" id="end" style="width:120px;">
                </div>
                <input class="layui-btn" type="button" id="search" data-type="reload" value="搜索" />
                <input class="layui-btn layui-btn-reset" id="reset" type="button" value="清空" />
                <input class="layui-btn layui-btn-export" id="export" type="button" value="导出" />
                <input class="layui-btn layui-btn-sm layui-btn-reset" style="display:none" id="onreset" type="reset" value="" />
            </form>
            <table class="layui-hide" id="tabl1" lay-filter="tabl1"></table>
        </div>
        <div class="layui-tab-item">
            <div id="mytoolbar2">
                事业部：
                <div class="layui-inline">
                    <select name="txt_companycode" style="height:35px;">
                        <option value="">请选择</option>
                        @{
                            string myjson = "{\"TESTCODE\":\"\"";
                            string realCode = "{\"TESTCODE\":\"\"";
                            string NotAllCode = ViewBag.NotAllCode;
                        }
                        @if (string.IsNullOrEmpty(NotAllCode))
                        {
                            <option value="">--请选择--</option>
                        }
                        else
                        {


                            <option value="@NotAllCode">全部</option>
                        }
                        @foreach (var item in ViewBag.vurtual as List<Bas_CompanyVirtual>)
                        {
                            myjson += ",\"" + item.CompanyCode.Replace("QBJY,", "") + "\":\"" + item.CompanyName + "\"";
                            realCode += ",\"" + item.deptcode + "\":\"" + item.CompanyName + "\"";
                            <option value="@item.Channel">@item.CompanyName</option>
                        }
                        @{
                            myjson += "}";
                            realCode += "}";

                        }
                    </select>
                </div>
                客户ID：
                <div class="layui-inline">
                    <input type="text" name="txt_UMID" placeholder="请输入" autocomplete="off" class="layui-input" style="width:120px;" value="@Request.QueryString["UMID"]">
                </div>
                <button class="layui-btn" data-type="reload">搜索</button>
            </div>
            <table class="layui-hide" id="tabl2" lay-filter="tabl2"></table>
        </div>
    </div>
    <iframe id="BillOpen" width="0" height="0" scrolling="no" frameborder="0" style="display:none;"></iframe>
</div>

<script>
var selectRow = {};
var hgcrmHost = "@Html.Raw(ViewBag.hgServiceHost)";
layui.use('laydate', function () {
    var laydate = layui.laydate;
    //执行一个laydate实例
    laydate.render({
        elem: '#start' //指定元素
        , value: getDate()
    });
    //执行一个laydate实例
    laydate.render({
        elem: '#end' //指定元素
    });
});
layui.use(['table', 'layer', 'element'], function () {
    var table = layui.table;
    var layer = layui.layer;
    var element = layui.element;
    var param = GetParams("mytoolbar");
    param.start = getDate();
    var param2 = GetParams("mytoolbar2");
    table.render({
        id: 'testReload',//列表别名ID
        elem: '#tabl1',//表ID
        url: '/CallRecord/Index',
        method: 'POST',
        cols: [[
            { field: 'RecordId', title: '录音编号', width: 120 }
            , {
                field: 'UmId', title: '客户ID', width: 180, templet: function (res) {
                    if (res.ORDERID != 1) {
                        var url = hgcrmHost + "Csvr/CustomerInfo/CustomerDetail?hgCustomer=1&isFromHg=1&resid=" + res.UmId + "&name=" + encodeURIComponent(res.CNAME);
                        var title = "客户明细";
                        if (res.CNAME) {
                            title = res.CNAME + "--客户明细";
                        }
                        return "<a href=\"javascript:void(0)\" style=\"color:blue\" onclick=\"parent.AddNewTab('" + title + "','" + url + "')\">" + res.UmId + "</a>";
                    } else {
                        return ""
                    }
                }
            }
            , { field: 'Type', title: '呼叫类型', width: 100 }
            , { field: 'ServiceNumber', title: '主叫号码', width: 100 }
            , { field: 'TelNumberLast4', title: '被叫号码', width: 100 }
            , { field: 'TimeLength', title: '时长（秒）', width: 100 }
            , { field: 'TimeStart', title: '开始时间', width: 160 }
            , { field: 'TimeEnd', title: '结束时间', width: 160 }
            , { field: 'DeptName', title: '事业部', width: 160 }
            , { field: 'Euser', title: '客服', width: 135 }
            //, { field: 'uname', title: '客服姓名' }
            //, { field: 'gname', title: '组别' }
            , { field: 'MemoContent', title: '工单' }
            //, { field: 'ischecked', title: '标记', templet: '#ischeckedTpl' }
            , { field: 'FileName', title: '录音', templet: '#hgrecordTpl' }
        ]]
        , limit : 20
        , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
            layout: ['limit', 'count', 'prev', 'page', 'next', 'skip', 'refresh'] //自定义分页布局
            //,curr: 5 //设定初始在第 5 页
            , groups: 5 //只显示 1 个连续页码

        }, where: param
    });

    $('#search').on('click', function (data) {
        var param = GetParams("mytoolbar");

        table.reload('testReload', {
            page: {
                curr: 1 //重新从第 1 页开始
            },
            where: param
        });
    });

    $('#export').on('click', function (data) {
        var param = GetParams("mytoolbar");
        param.Export = true;
        $.r_post('/CallRecord/Index', param, function (result) {
            if (result.Code == 0) {
                $("#BillOpen").attr("src", result.Data);
            } else {
                layer.alert(result.Message, { title: '提示' });
            }
        });
    });

    //监听行单击事件
    table.on('row(tabl1)', function (obj) {
        var data = obj.data;
        obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');

        selectRow = data;
    });

    table.render({
        id: 'testReload2',//列表别名ID
        elem: '#tabl2',//表ID
        url: '/CallRecord/AiIndex',
        method: 'POST',
        page: true,
        cols: [[
            { field: 'recordid', title: '录音编号' }
            , {
                field: 'umid', title: '客户ID', width: 180, templet: function (res) {
                    if (res.ORDERID != 1) {
                        var url = hgcrmHost + "Csvr/CustomerInfo/CustomerDetail?hgCustomer=1&isFromHg=1&resid=" + res.umid + "&name=" + encodeURIComponent(res.CNAME);
                        var title = "客户明细";
                        if (res.CNAME) {
                            title = res.CNAME + "--客户明细";
                        }
                        return "<a href=\"javascript:void(0)\" style=\"color:blue\" onclick=\"parent.AddNewTab('" + title + "','" + url + "')\">" + res.umid + "</a>";
                    } else {
                        return ""
                    }
                }
            }
            , { field: 'calltype', title: '呼叫类型' }
            , { field: 'servicenumber', title: '主叫号码' }
            , { field: 'telnumberlast4', title: '被叫号码' }
            , { field: 'timelength', title: '时长（秒）' }
            , { field: 'timestart', title: '开始时间' }
            , { field: 'timeend', title: '结束时间' }
            , { field: 'DeptName', title: '事业部' }
            , { field: 'saleseid', title: '客服' }
            //, { field: 'uname', title: '客服姓名' }
            //, { field: 'gname', title: '组别' }
            //, { field: 'memocontent', title: '工单' }
            //, { field: 'ischecked', title: '标记', templet: '#ischeckedTpl' }
            , { field: 'action', title: '录音', templet: '#viewRecordTpl' }
        ]]
        , limit: 20
        , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
            layout: ['limit', 'count', 'prev', 'page', 'next', 'skip', 'refresh'] //自定义分页布局
            //,curr: 5 //设定初始在第 5 页
            , groups: 5 //只显示 1 个连续页码

        }, where: param2
    });

    $('#mytoolbar2 .layui-btn').on('click', function (data) {
        var param2 = GetParams("mytoolbar2");
        table.reload('testReload2', {
            page: {
                curr: 1 //重新从第 1 页开始
            },
            where: param2
        });
    });

    //监听行单击事件
    table.on('row(tabl2)', function (obj) {
        var data = obj.data;
        obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');

        selectRow = data;
    });

    $('#reset').on('click', function () {
        document.getElementById("onreset").click();
        //document.getElementById("start").value = getDate();
    });
});

$(function () {
    //$("#companyCode").change(function () {
    //    var companycode = $("#companyCode").val();
    //    if (companycode == "") {
    //        $("#deptId").empty();
    //        $("#deptId").append("<option value=''>全部</optoin>");
    //        $("#groupId").empty();
    //        $("#groupId").append("<option value=''>全部</optoin>");
    //        $("#userId").empty();
    //        $("#userId").append("<option value=''>全部</optoin>");
    //    }
    //    else {
    //        $.r_post('/Control/GetDept', { companycode: companycode }, function (msg) {
    //            $("#deptId").empty();
    //            $("#deptId").append("<option value=''>全部</optoin>");
    //            $("#groupId").empty();
    //            $("#groupId").append("<option value=''>全部</optoin>");
    //            $("#userId").empty();
    //            $("#userId").append("<option value=''>全部</optoin>");
    //            $.each(msg, function (m, n) {
    //                $("#deptId").append("<option value=\"" + n.saledeptid + "\">" + n.deptname + "</option>");
    //            });
    //        });
    //    }
    //});
    //$("#deptId").change(function () {
    //    var companycode = $("#companyCode").val();
    //    var deptId = this.value;
    //    if (deptId == "") {
    //        $("#groupId").empty();
    //        $("#groupId").append("<option value=''>全部</optoin>");
    //        $("#userId").empty();
    //        $("#userId").append("<option value=''>全部</optoin>");
    //    }
    //    else {
    //        $.r_post('/Control/GetGroup', { companycode: companycode, deptId: deptId }, function (msg) {
    //            $("#groupId").empty();
    //            $("#groupId").append("<option value=''>全部</optoin>");
    //            $("#userId").empty();
    //            $("#userId").append("<option value=''>全部</optoin>");
    //            $.each(msg, function (m, n) {
    //                $("#groupId").append("<option value=\"" + n.gid + "\">" + n.gname + "</option>");
    //            });
    //        });
    //    }
    //});

    //$("#groupId").change(function () {
    //    var companycode = $("#companyCode").val();
    //    var gId = this.value;
    //    if (gId == "") {
    //        $("#userId").empty();
    //        $("#userId").append("<option value=''>全部</optoin>");
    //    }
    //    else {
    //        $.r_post('/Control/GetUser', { companycode: companycode, gId: this.value }, function (msg) {
    //            $("#userId").empty();
    //            $("#userId").append("<option value=''>全部</optoin>");
    //            $.each(msg, function (m, n) {
    //                $("#userId").append("<option value=\"" + n.pkid + "\">" + n.eid + "-" + n.uname + "</option>");
    //            });
    //        });
    //    }
    //});

    @{
        if (!string.IsNullOrEmpty(Request.QueryString["code"]))
        {
            @Html.Raw("$('#companyCode').change()");
        }
    }

});

function onPlay(FileName) {
    var companycode = $("#companyCode").val();
    if (FileName.indexOf("http://") != -1) {
        layer.open({
            title: '播放录音',
            type: 1,
            content: '<audio src=' + FileName + ' controls autoplay ></audio>',
            area: ['300px', '200px']
        });
    } else {
        $.r_post('/CallRecord/RecordPlay', { FileName: FileName, companycode: companycode }, function (msg) {
            layui.use('layer', function () {
                var layer = layui.layer;
                layer.open({
                    title: '播放录音',
                    type: 1,
                    content: '<audio src=' + msg.retmsg + ' controls autoplay ></audio>',
                    area: ['300px', '200px']
                });
            });
        });
    }
    }
    function onLook(id) {
        layui.use('layer', function () {
            var layer = layui.layer;
            layer.open({
                title: '录音列表',
                type: 2,
                content: '/AiAudioList/AudioDetail?Id=' + id,
                area: ['80%', '80%']
            });
        });
    }
    function getDate() {
        var date = new Date();
        date = date.setDate(date.getDate() - 7);
        date = new Date(date);
        var month = date.getMonth() + 1; //月份从0开始所以需要+1
        var day = date.getDate();
        return date.getFullYear() + '-' + month + '-' + day;
    }
</script>
<script type="text/html" id="hgrecordTpl">
    <a href="javascript:void(0)" onclick="onPlay('{{d.FileName}}')" style="color:red">录音</a>
</script>
<script type="text/html" id="viewRecordTpl">
    {{# if(d.FileName!= null){ }}
    <a href="javascript:void(0)" onclick="onPlay('{{d.FileName}}')" style="color:red">播放</a>
    <a href="javascript:void(0)" style="color:blue" onclick="onLook('{{d.sid}}')">查看</a>
    {{# } }}
</script>
<script type="text/html" id="ischeckedTpl">
    {{# if(d.ischecked == '1') { }}
    <span style="color:green">正常</span>
    {{# } else if(d.ischecked == '2') { }}
    <span style="color:red">违规</span>
    {{# } else { }}
    未审核
    {{# }  }}
</script>