@{
    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">
            <div id="mytoolbar">
                录音编号：
                <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"]">
                </div>
                事业部：
                <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>
                        <option value="QBJZ" @{ if (!string.IsNullOrEmpty(Request.QueryString["code"]) && Request.QueryString["code"] == "QBJZ") { @Html.Raw("selected = \"selected\"")  ; } }>
                            北京软件一中心
                        </option>
                        <option value="QBJX" @{ if (!string.IsNullOrEmpty(Request.QueryString["code"]) && Request.QueryString["code"] == "QBJX") { @Html.Raw("selected = \"selected\"")  ; } }>
                            北京软件二中心
                        </option>
                        <option value="DNZZ" @{ if (!string.IsNullOrEmpty(Request.QueryString["code"]) && Request.QueryString["code"] == "DNZZ") { @Html.Raw("selected = \"selected\"")  ; } }>
                            东方软件一、二中心
                        </option>
                        <option value="TNBD" @{ if (!string.IsNullOrEmpty(Request.QueryString["code"]) && Request.QueryString["code"] == "TNBD") { @Html.Raw("selected = \"selected\"")  ; } }>
                            东方平台运营中心
                        </option>
                        <option value="DNBB" @{ if (!string.IsNullOrEmpty(Request.QueryString["code"]) && Request.QueryString["code"] == "DNBB") { @Html.Raw("selected = \"selected\"")  ; } }>
                            内容二、三中心
                        </option>
                        <option value="YSGP" @{ if (!string.IsNullOrEmpty(Request.QueryString["code"]) && Request.QueryString["code"] == "YSGP") { @Html.Raw("selected = \"selected\"")  ; } }>
                            新媒体一部
                        </option>
                        <option value="GGCJ" @{ if (!string.IsNullOrEmpty(Request.QueryString["code"]) && Request.QueryString["code"] == "GGCJ") { @Html.Raw("selected = \"selected\"")  ; } }>
                            呱呱平台运营中心
                        </option>
                        <option value="SHZZ" @{ if (!string.IsNullOrEmpty(Request.QueryString["code"]) && Request.QueryString["code"] == "SHZZ") { @Html.Raw("selected = \"selected\"")  ; } }>
                            首华平台运营中心
                        </option>
                        <option value="SHAA" @{ if (!string.IsNullOrEmpty(Request.QueryString["code"]) && Request.QueryString["code"] == "SHAA") { @Html.Raw("selected = \"selected\"")  ; } }>
                            新媒体四部
                        </option>
                        <option value="TGLB" @{ if (!string.IsNullOrEmpty(Request.QueryString["code"]) && Request.QueryString["code"] == "TGLB") { @Html.Raw("selected = \"selected\"")  ; } }>
                            投教联邦事业部
                        </option>
                        <option value="DNYY" @{ if (!string.IsNullOrEmpty(Request.QueryString["code"]) && Request.QueryString["code"] == "DNYY") { @Html.Raw("selected = \"selected\"")  ; } }>
                            东方软件三中心
                        </option>
                        <option value="GZR7" @{ if (!string.IsNullOrEmpty(Request.QueryString["code"]) && Request.QueryString["code"] == "GZR7") { @Html.Raw("selected = \"selected\"")  ; } }>
                            原东方软件二中心
                        </option>
                        <option value="TLPC" @{ if (!string.IsNullOrEmpty(Request.QueryString["code"]) && Request.QueryString["code"] == "TLPC") { @Html.Raw("selected = \"selected\"")  ; } }>
                            通联
                        </option>
                        <option value="DNG8" @{ if (!string.IsNullOrEmpty(Request.QueryString["code"]) && Request.QueryString["code"] == "DNG8") { @Html.Raw("selected = \"selected\"")  ; } }>
                            投顾业务中心
                        </option>
                        <option value="HGBM" >
                            合规
                        </option>
                    </select>
                </div>
                @*客服姓名/工号：<div class="layui-inline"><select name="slt_userId" id="userId" style="height:35px;"></select></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>
                录音日期：
                <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>*@
                <button class="layui-btn" data-type="reload">搜索</button>
            </div>
            <table class="layui-hide" id="tabl1" lay-filter="tabl1"></table>
        </div>
        <div class="layui-tab-item">
            <div id="mytoolbar2">
                客户ID：
                <div class="layui-inline">
                    <input type="text" name="txt_resId" placeholder="请输入" autocomplete="off" class="layui-input" style="width:120px;" value="@Request.QueryString["resid"]">
                </div>
                <button class="layui-btn" data-type="reload">搜索</button>
            </div>
            <table class="layui-hide" id="tabl2" lay-filter="tabl2"></table>
        </div>
    </div>
</div>

<script>
var selectRow = {};

layui.use('laydate', function () {
    var laydate = layui.laydate;
    //执行一个laydate实例
    laydate.render({
        elem: '#start' //指定元素
    });
    //执行一个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");
    var param2 = GetParams("mytoolbar2");
    table.render({
        id: 'testReload',//列表别名ID
        elem: '#tabl1',//表ID
        url: '/CallRecord/Index',
        method: 'POST',
        cols: [[
            { field: 'recordid', title: '录音编号' }
            , { field: 'resid', title: '客户ID' }
            , { field: 'calltype', title: '呼叫类型' }
            , { field: 'servicenumber', title: '主叫号码' }
            , { field: 'telnumberlast4', title: '被叫号码' }
            , { field: 'timelength', title: '时长（秒）' }
            , { field: 'timestart', title: '开始时间' }
            , { field: 'timeend', title: '结束时间' }
            , { field: 'saleseid', title: '客服' }
            //, { field: 'uname', title: '客服姓名' }
            //, { field: 'gname', title: '组别' }
            //, { field: 'memocontent', title: '工单' }
            //, { field: 'ischecked', title: '标记', templet: '#ischeckedTpl' }
            , { field: 'action', 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
    });

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

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

    //监听行单击事件
    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: 'resid', title: '客户ID' }
            , { field: 'calltype', title: '呼叫类型' }
            , { field: 'servicenumber', title: '主叫号码' }
            , { field: 'telnumberlast4', title: '被叫号码' }
            , { field: 'timelength', title: '时长（秒）' }
            , { field: 'timestart', title: '开始时间' }
            , { field: 'timeend', 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;
    });
});

$(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%']
            });
        });
    }

</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.recordid}}')">查看</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>