@using CRM.Core.Model.Entity
@using Core.Web.WebHelper
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@using CRM.Core.Model.Map
<style>
    .hgguanjianci {
        background-color: #FF9800;
        color: white;
    }

    .hiddenDiv {
        display: none;
    }
</style>

<div class="x-body">
    <div class="layui-btn-group" style="padding-bottom:10px;">
        @*<button class="layui-btn layui-btn-normal" data-method="add">新增</button>
            <button class="layui-btn  layui-btn-normal" data-method="edit">编辑</button>
            <button class="layui-btn layui-btn-danger" data-method="delete">删除</button>
            <button class="layui-btn  layui-btn-normal" data-method="other1"><i class="layui-icon">&#xe613;</i>分配角色</button>*@
        @Html.Action("ToolBar", "Home",
               new {
                   area="",
                   rightcode = (ViewBag.rightCode as string),
                   otherToolBars =new Core.Web.WebHelper.ToolBar[] {
                      }
               }
               )
    </div>
    <div id="mytoolbar">
        事业部：
        <div class="layui-inline">
            <select name="txt_deptcodes" style="height:35px;">
                <option value="">请选择</option>
                @foreach (var item in ViewBag.companyList as List<Bas_CompanyVirtual>)
                {
                    <option value="@item.CompanyCode.Replace("QBJY,","")">@item.CompanyName</option>
                }
            </select>
        </div>
        数据类型：
        <div class="layui-inline">
            <select name="slt_type" style="height:35px;">
                <option value="">全部</option>
                <option value="QW">企微</option>
                <option value="WX">微信</option>
                <option value="PHONE">电话</option>
            </select>
        </div>
        @{
            var hgtype = ViewBag.HgType as List<Hg_Type>;

        }
        违规大类：
        <div class="layui-inline">
            <select name="slt_hgtype" id="hgtype" lay-filter="hgtype" style="height:35px;">
                <option value="">全部</option>
                @foreach (var item in hgtype)
                {
                    <option value="@item.name">@item.title</option>
                }
            </select>
        </div>
        违规小类：
        <div class="layui-inline allHGtype">
            <div class="allHGtypeCl" id="hgtypediv_">
                <select name="hgtype" id="hgtype_" style="height:35px;">
                    <option value="">请选则大类</option>
                </select>
            </div>

            @{ int i = 0; }
            @foreach (var item in hgtype)
            {
                <div class="allHGtypeCl" id="hgtypediv_@item.name">
                    <select name="hgtype" id="hgtype_@item.name" style="height:35px;">
                        <option value="">全部</option>
                        @foreach (var citem in item.detail)
                        {
                            <option value="@citem.name" bigtype="@item.name" miniid="@citem.name">@citem.title</option>
                        }
                    </select>
                </div>
                i++;
            }
        </div>
        客户：
        <div class="layui-inline">
            <input type="text" name="txt_touser" placeholder="微信/Resid" class="layui-input" style="width:150px;">
        </div>
        客服：
        <div class="layui-inline">
            <input type="text" name="txt_fromuser" placeholder="客服/名称" class="layui-input" style="width:150px;">
        </div>
        工号：
        <div class="layui-inline">
            <input type="text" name="txt_eid" placeholder="工号" class="layui-input" style="width:80px;">
        </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>
<script>
    var selectRow = {};
    var layer;
    var table;
    var winindex;
    ShowSelect();
    layui.use(['table', 'laydate', 'form'], function () {
        layer = layui.layer;
        var form = layui.form;
        table = layui.table
            , laydate = layui.laydate;

        laydate.render({
            elem: '#start'
        });

        laydate.render({
            elem: '#end'
        });

        table.render({
            id: 'testReload',//列表别名ID
            elem: '#tabl1',//表ID
            url: 'HgList',
            method: 'POST',
            cols: [[

                //{ type: 'checkbox' }
                { field: 'numbers', title: '编号', width: 60, type: "numbers", fixed: 'left' }
                //, { field: 'id', title: 'ID', width: 80 }
                , {
                    field: 'detpcode', title: '事业部', width: 150, fixed: 'left', templet: function (d) {
                        return $("[name='txt_deptcodes'] option[value='" + d.detpcode + "']").html();
                    }
                }, {
                    field: 'type', title: '类型', width: 60, fixed: 'left', templet: function (d) {
                        return d.type.replace("QW", "企微").replace("WX", "微信").replace("PHONE", "电话");
                    }
                }
                , { field: 'hgid', title: '数据ID', width: 120 }
                , { field: 'msgtype', title: '数据类型', width: 100 }
                , { field: 'resid', title: '客户ID', width: 100 }
                , { field: 'cusname', title: '客户姓名', width: 100 }
                , {
                    field: 'content', title: '内容', width: 250, templet: function (d) {
                        var ss = d.word.split('|');
                        var content = d.content;
                        $(ss).each(function (index, ada) {
                            //console.log(ada)
                            let reg = RegExp(ada, "g")
                            content = content.replace(reg, "<span class=\"hgguanjianci\">" + ada + "</span>");
                        });
                        return content;
                    }
                }, {
                    field: 'voiceurl', title: '操作', width: 80, templet: function (d) {
                        if (d.msgtype == "电话录音") {
                            return "<a href='javascript:PalyRecord(\"" + d.voiceUrl + "\")' style='color:#01AAED;' >播放</a>";
                        } else if (d.msgtype == "文本") {
                            return "";
                        } else if (d.msgtype == "语音" && d.type == "WX") {
                            return "<a href='javascript:WxPalyRecord(\"" + d.voiceUrl + "\")' style='color:#01AAED;' >播放</a>";
                        } else if (d.msgtype == "语音" && d.type == "QW") {
                            return "<a href='javascript:PalyRecord(\"" + d.voiceUrl + "\")' style='color:#01AAED;' >播放</a>";
                        } else if (d.msgtype == "企微通话") {
                            return "<a href='javascript:PalyRecord(\"" + d.voiceUrl + "\")' style='color:#01AAED;' >播放</a>";
                        }

                    }
                }
                , { field: 'word', title: '违规关键词', width: 100 }
                , { field: 'eid', title: '客服工号', width: 80 }
                , { field: 'kefuname', title: '客服名称', width: 120 }
                , { field: 'hgtime', title: '时间', width: 160, fixed: 'right' }
                , { field: 'hgdetail', title: '违规细则', width: 200, fixed: 'right' }
                , { field: 'hgresult', title: '处理结果', width: 200, fixed: 'right' }
                , {
                    field: 'hgtype', title: '违规大类', width: 100, fixed: 'right', templet: function (d) {
                        return $("#hgtype option[value='" + d.hgtype + "']").html();
                    }
                }
                , {
                    field: 'hgsubtype', title: '违规小类', width: 150, fixed: 'right', templet: function (d) {
                        return $("[miniid='" + d.hgsubtype + "']").html();
                    } }

            ]]
            , page: {
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip', 'refresh'] //自定义分页布局
                , groups: 5 //只显示 1 个连续页码
            }, where: GetParams("mytoolbar")
        });

        $('#mytoolbar .layui-btn').on('click', function (data) {
            var param = GetParams("mytoolbar");
            console.log(param);
            param.hgsubtype = $("#hgtype_" + param.hgtype).val();
            console.log(param);
            table.reload('testReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: param
            });
        });


        table.on('row(tabl1)', function (obj) {
            var data = obj.data;
            obj.tr.addClass('self-table-click').siblings().removeClass('self-table-click');
            selectRow = data;
        });
        $("#hgtype").change(function () {
            ShowSelect();
        });
        //form.on('select(hgtype)', function (data) {
        //    //alert(data.value);
        //    ShowSelect();
        //    //form.render('select');
        //});
        ////监听行单击事件（单击事件为：rowDouble）
        //table.on('tool(tabl1)', function (obj) {
        //    console.log(obj);
        //    var data = obj.data;
        //    if (obj.event === 'ChooseRow') {
        //        obj.tr.find(".layui-form-checkbox").click();
        //    }
        //});
        //table.on('checkbox(tabl1)', function (obj) {
        //    console.log(obj);
        //    if (obj.type == "one") {
        //        obj.tr.toggleClass('self-table-click');//.siblings().removeClass('self-table-click');
        //    }
        //    else if (obj.type == "all") {
        //        $(".x-body table tbody tr").removeClass("self-table-click")
        //        if (obj.checked) {
        //            $(".x-body table tbody tr").addClass("self-table-click")
        //        }
        //    }

        //});


        var active = {
            delete: function () {
                if (selectRow.id === "undefined" || selectRow.id == null) {
                    layer.alert("请先选中一条记录！", { title: '提示' });
                    return;
                }
                layer.confirm('您确定要将此违规数据删除并修改成未违规吗?', { icon: 3, title: '提示' }, function (index) {
                    layer.close(index);
                    //console.log(ids);
                    //已读
                    $.r_post('HgDelete', { id: selectRow.id }, function (rsp) {
                        if (rsp.result) {
                            var refresh = $(".layui-laypage-refresh");
                            if (refresh.length == 0) {
                                $("#search").click();
                            }
                            else {
                                refresh[0].click();
                            }
                            layer.msg('操作成功！', { icon: 1 });
                        }
                        else {
                            //layer.msg('操作失败！' + rsp.retmsg, { icon: 2 });
                            layer.alert(rsp.retmsg);
                        }
                    });
                });
            }

        };

        $('.layui-btn-group .layui-btn').on('click', function () {
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });

    });
    function PalyRecord(url) {
        //$.get(url, function (result) {
        //    if (result.result) {
        //        var data = result.retmsg;
        //        if (data != '') {
        layui.use('layer', function () {
            var layer = layui.layer;
            layer.open({
                title: '播放语音',
                type: 1,
                content: '<video src=' + url + ' controls autoplay />',
                area: ['300px', '200px']
            });
        });
        //        }
        //        else {
        //            layer.alert("未能找到文件");
        //        }

        //    } else {
        //        layer.alert("转换失败，请稍后重试！");
        //    }
        //});
    }
    function ShowSelect() {
        var bighgtype = $("#hgtype").val();
        console.log($(".allHGtype .allHGtypeCl").not("#hgtypediv_" + bighgtype));
        $(".hiddenDiv").removeClass("hiddenDiv");
        $(".allHGtype .allHGtypeCl").not("#hgtypediv_" + bighgtype).addClass("hiddenDiv");
    }

    function WxPalyRecord(url) {
        $.get(url, function (result) {
            if (result.result) {
                var data = result.retmsg;
                if (data != '') {
                    layui.use('layer', function () {
                        var layer = layui.layer;
                        layer.open({
                            title: '播放语音',
                            type: 1,
                            content: '<video src=' + data + ' controls autoplay />',
                            area: ['300px', '200px']
                        });
                    });
                }
                else {
                    layer.alert("未能找到文件");
                }

            } else {
                layer.alert("转换失败，请稍后重试！");
            }
        });
    }
    layui.use('layer', function () {

    });
    function Closed() {
        layer.close(winindex);
    }
    function TableReload() {
        selectRow = {};
        table.reload('testReload', {
            page: {
                curr: 1 //重新从第 1 页开始
            }
        });
    }
</script>
<script type="text/html" id="auditTpl">
    {{# if(d.ISDISMISS == '0'){ }}
    <font color="#07b10c">在职</font>
    {{# } else { }}
    <font color="#aba5a5">离职</font>
    {{# } }}
</script>
<script type="text/html" id="gender">
    {{# if(d.GENDER == 'm'){ }}
    男
    {{# } else if(d.GENDER == 'f'){ }}
    女
    {{# } }}

</script>