@using WX.CRM.WebHelper
@using WX.CRM.Model.DTO;
@{
    /**/

    /**/

    ViewBag.Title = "bas_salesDepartment";
    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>
<script src="/layui-v2.5.4/zadmin.js?v=3"></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">
                <input type="hidden" name="eid" value="@ViewBag.Eid" />

                <label id="showComplaintType" style="display:none" for="complaintType">
                    投诉类型：
                    <div class="layui-inline" style="width: 100px; ">
                        <select id="complaintType" name="complaintType" lay-filter="complaint">
                            <option value="" selected>全部</option>
                            <option value="1"">内诉</option>
                            <option value="2"">外诉</option>
                        </select>
                    </div>
                </label>
                <label id="showComplaintReason" style="display:none">
                    投诉原因：
                    <div class="layui-inline" style="width: 150px;">
                        <select id="complaintReason" name="complaintReason">
                            <option value="" selected>全部</option>
                            <option value="1">亏损</option>
                            <option value="2">宣传不符</option>
                            <option value="4">服务不满</option>
                            <option value="8">产品不合适</option>
                            <option value="16">个人原因</option>
                            <option value="32">拖延退款</option>
                            <option value="64">5个工作日无理由</option>
                        </select>
                    </div>
                </label>
                阅读状态：
                <div class="layui-inline">
                    <select name="read" style="height:35px;">
                        <option value="">全部</option>
                        <option value="1">已读</option>
                        <option value="0">未读</option>
                    </select>
                </div>
                通知日期：
                <div class="layui-inline">
                    <input class="layui-input" name="timeFrom" id="timeFrom" style="width:120px;">
                </div>
                <div class="layui-inline">
                    <input class="layui-input" name="timeTo" id="timeTo" style="width:120px;">
                </div>

                <label id="showNotiType">
                    通知类型：
                    <div class="layui-inline" style="width: 200px;">
                        <select id="notificationType" name="notificationType">
                            <option value="" selected>全部</option>
                            <option value="1">撞单通知</option>
                            <option value="2">企微助手通知</option>
                            <option value="3">投诉处理通知</option>
                            <option value="4">合规退款申请通知</option>
                        </select>
                    </div>
                </label>
                <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="清空" />
                    <input class="layui-btn layui-btn-sm" id="read" type="button" value="标记为已读" />
                    <input class="layui-btn layui-btn-sm" id="read-all" type="button" 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: '#timeFrom' //指定元素
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#timeTo' //指定元素
        });
    });
    var selectRows = [];
    var winindex;
    var layer;
    var rowid;
    var data;
    var notificationType = '@Html.Raw(ViewBag.notificationType)';
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use(['laypage', 'layer', 'table', 'laydate', 'form'], function () {
        var form = layui.form;
        var laydate = layui.laydate;
        layer = layui.layer;
        table = layui.table;
        console.log(notificationType)
        if (notificationType != '') {
            $("#notificationType").val(notificationType);

            if (notificationType == '3' || notificationType == '4')
                $("#showNotiType").css('display', 'none');

            if (notificationType == '3') {
                $("#showComplaintType").css('display', 'inline');
                $("#showComplaintReason").css('display', 'inline');
            }

            form.render('select');
        }

        var tableCols = [];

        if (notificationType == '3') {
            tableCols = [[
                { checkbox: true }
                , { field: 'id', title: '序号', type: 'numbers' }
                , { field: 'complaintType', title: '投诉类型', width: 80, templet: "#complaintTypeTpl" }
                , { field: 'complaintReason', title: '投诉原因', width: 150, templet: "#complaintReasonTpl" }
                , { field: 'message', title: '消息通知' }
                , { field: 'readStr', title: '阅读状态', width: 150, templet: "#readTpl" }
                , { field: 'ctime', title: '通知时间', width: 150 }
                , { field: 'readTime', title: '阅读时间', width: 150 }
                , { field: 'operation', title: '操作', width: 150, templet: "#operationTpl" }
            ]];
        }
        else if (notificationType == '4') {
            tableCols = [[
                { checkbox: true }
                , { field: 'id', title: '序号', type: 'numbers' }
                , { field: 'message', title: '消息通知' }
                , { field: 'readStr', title: '阅读状态', width: 150, templet: "#readTpl" }
                , { field: 'ctime', title: '通知时间', width: 150 }
                , { field: 'readTime', title: '阅读时间', width: 150 }
                , { field: 'operation', title: '操作', width: 150, templet: "#operationTp2" }

            ]];
        }
        else {
            tableCols = [[
                { checkbox: true }
                , { field: 'id', title: '序号', type: 'numbers' }
                , { field: 'message', title: '消息通知' }
                , { field: 'notificationTypeStr', title: '通知类型', width: 150 }
                , { field: 'readStr', title: '阅读状态', width: 150, templet: "#readTpl" }
                , { field: 'ctime', title: '通知时间', width: 150 }
                , { field: 'readTime', title: '阅读时间', width: 150 }
            ]];
        }


        var where = $("#myform").serializeFormJSON();
        table.render({
            id: 'list'//列表别名ID
            , elem: '#list'
            , url: '@Html.Raw(ViewBag.webapi)' + '/Api/Notification/Page'
            , headers: { appid: '@ViewBag.appid' }
            , method: 'get'
            , dataType: 'json'
            , request: {
                pageName: 'pageIndex' //页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            , response: {
                statusName: 'code' //规定数据状态的字段名称，默认：code
                , statusCode: 0 //规定成功的状态码，默认：0
                , msgName: 'message' //规定状态信息的字段名称，默认：msg
            },
            parseData: function (res) { //res 即为原始返回的数据
                data = res.data.data;
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            }
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , page: true
            , limit: 10
            , size: "sm"
            , cols: tableCols
            , where: where
        });
        //监听行单击事件
        table.on('checkbox(list)', function (obj) {
            if (obj.type == 'all') {
                if (obj.checked) {
                    selectRows = data
                } else {
                    selectRows = []
                }
            } else {
                if (obj.checked) {
                    selectRows.push(obj.data)
                } else {
                    selectRows.splice(selectRows.indexOf(obj.data), 1)
                }
            }
        });
        var active = {
            search: function () {
                var param = $("#myform").serializeFormJSON();
                param.deptid = param.txt_deptId;
                param.eid = param.txt_userId
                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) : '';
        });
        $('#read').on('click', function () {
            if (!selectRows || selectRows == [] || selectRows.length == 0) {
                layer.msg("请最少选择一条记录！", { icon: 7 });
                return;
            }
            var ids = selectRows.map(x => x.id);
            layer.confirm('是否确认标记为已读？', {
                offset: '200px'
            }, function (index) {
                Read(ids);
            });

        });
        $('#read-all').on('click', function () {
            var ids = data.map(x => x.id);
            layer.confirm('是否确认标记为已读？', {
                offset: '200px'
            }, function (index) {
                ReadAll();
            });
        });

        form.on('select(complaint)', function (data)
        { 
            console.log("222");
            var selec = $("#complaintType").val();
            console.log(selec);
            var options;
            if (selec == "2") {
                options = [
                    { value: "", name: "全部" },
                    { value: "1", name: "亏损" },
                    { value: "2", name: "宣传不符" },
                    { value: "4", name: "服务不满" },
                    { value: "8", name: "产品不合适" },
                    { value: "32", name: "拖延退款" },
                    { value: "128", name: "金额不满" },
                    { value: "256", name: "外部引流" }
                ];
            }
            else {
                options = [
                    { value: "", name: "全部" },
                    { value: "1", name: "亏损" },
                    { value: "2", name: "宣传不符" },
                    { value: "4", name: "服务不满" },
                    { value: "8", name: "产品不合适" },
                    { value: "16", name: "个人原因" },
                    { value: "32", name: "拖延退款" },
                    { value: "64", name: "5个工作日无理由" }
                ];
            }

            $("#complaintReason").html("");
            $(options).each(function (index, val) {
                $("#complaintReason").append(new Option(val.name, val.value));
            });
            form.render('select');
        })
    });

    function Read(ids) {
        $.ajax({
            type: "POST",
            url: '@Html.Raw(ViewBag.webapi)' + '/Api/Notification/Read',
            headers: { appid: '@ViewBag.appid', eid: '@ViewBag.eid'  },
            data: JSON.stringify(ids),
            dataType: "json",
            contentType: "application/json",
            success: function (da) {
                if (da.data == true) {
                    layer.msg('操作成功！', { icon: 1 });
                    TableReload();
                } else {
                    layer.msg(da.message, { icon: 2 });
                }
            },
            error: function () {
                layer.msg('操作失败！', { icon: 2 });
            }
        });
    }

    function ReadAll() {
        $.ajax({
            type: "POST",
            url: '@Html.Raw(ViewBag.webapi)' + '/Api/Notification/ReadAll',
            headers: { appid: '@ViewBag.appid', eid: '@ViewBag.eid'  },
            dataType: "json",
            contentType: "application/json",
            success: function (da) {
                if (da.data == true) {
                    layer.msg('操作成功！', { icon: 1 });
                    TableReload();
                } else {
                    layer.msg(da.message, { icon: 2 });
                }
            },
            error: function () {
                layer.msg('操作失败！', { icon: 2 });
            }
        });
    }

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

        });
    }
    function openTaskList() {
        parent.openTaskList();
    }

    function openComplaintList() {
        parent.openComplaintList();
    }

    function openRerundApplyList() {
        parent.openRerundApplyList();
    }

</script>
<script type="text/html" id="readTpl">
    {{# if(d.readStr == "已读"){ }}
    <span style="color: #009688 ">{{ d.readStr }}</span>
    {{# } else { }}
    <span style="color: red">{{ d.readStr }}</span>
    {{# } }}
</script>

<script type="text/html" id="complaintTypeTpl">
    {{# if(d.message.indexOf("内诉") == -1){ }}
    <span>外诉</span>
    {{# } else { }}
    <span>内诉</span>
    {{# } }}
</script>


<script type="text/html" id="complaintReasonTpl">
    <span> {{ d.message.substring(d.message.indexOf("原因是：")+4,d.message.indexOf("，请在")) }}</span>
</script>

<script type="text/html" id="operationTpl">
    <a onclick="openComplaintList()" style="color:#1E9FFF;cursor:pointer;">去查看</a>
</script>

<script type="text/html" id="operationTp2">
    <a onclick="openRerundApplyList()" style="color:#1E9FFF;cursor:pointer;">去查看</a>
</script>