@{
    /**/

    ViewBag.Title = "ComplaintInfo";
    Layout = "~/Views/Shared/_content.cshtml";
}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<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>
<link href="~/layui-v2.5.4/css/layui _up.css" rel="stylesheet" />
<style>
    #tool-item {
        font-size: 18px;
        padding-left: 25px;
        display: flex;
        border-top: 1px solid #808080;
        border-bottom: 1px solid #808080;
    }

        #tool-item span {
            padding: 7px 14px;
            color: #3f3f3f;
            margin-top: 25px;
            cursor: pointer;
            background-color: #ededed;
        }

    .active {
        background-color: #50acff !important;
        color: #ffffff !important;
    }

    .com-list {
        display: none;
    }

    .complaintStatus {
        padding: 10px;
    }

    .layui-timeline-title {
        display: flex;
        font-size: 17px;
        /*font-weight:600;*/
    }

        .layui-timeline-title p {
            margin: 0px;
            padding: 0px 10px 0px 0px;
        }

    .showMsg {
        margin-left: 10px;
        color: aqua;
        cursor: pointer;
    }

    .keyword {
        color: #ff0000 !important;
        text-decoration: underline
    }

    .foot-tool {
        display: flex;
        justify-content: space-between;
        padding: 10px 0px;
    }

    .content {
        color: #3f3f3f;
    }

    .signtype {
        color: #000000;
    }

    .s0 {
        color: #ff0000 !important;
    }

    .s1, .source {
        color: #00b55a !important;
    }

    .s2, .ctime {
        color: #808080 !important;
    }

    .s3 {
        color: #9b9b9b !important;
    }

    #mytoolbar {
        margin: 10px;
    }

    .com-list {
        padding: 10px 35px;
    }

    #edit-btn {
        color: #000000;
        background-color: #ffffff;
        border: 1px solid #c7c7c7;
        border-radius: 5px;
        padding: 0px 15px;
        height: 30px;
        line-height: 30px;
    }

    .changeStatus {
        display: none;
        width: 500px;
        height: 500px;
        background-color: #ffffff;
        position: absolute;
        top: 130px;
        left: 90px;
        box-shadow: 2px 2px 6px #999;
        padding: 10px;
        border-radius: 5px;
    }

    .status-item p {
        padding: 5px;
        font-size: 20px;
        cursor: pointer;
    }

    .status-item .ck {
        background-color: #ffad4e;
    }

    .status-item .nck {
        background-color: #fff;
        color: #808080;
    }

    #status-content {
        width: 430px;
        height: 220px;
    }

    .scontentBox {
        display: flex;
        padding: 30px 10px;
    }

    #cSubmit {
        margin-left: 10%;
        background-color: #50acff !important;
    }
</style>
<div class="x-body">
    <div id="tool-item">
        <span v="fxjl" class="active">风险记录</span>
        <span v="gjqk">跟进情况</span>
    </div>
    <div id="mytoolbar">
        <div class="layui-inline complaintStatus">
            <span class="complaintInfoStatus"></span>
        </div>
        <button class="layui-btn" id="edit-btn">修改</button>
    </div>
    <div id="list-body">
        <div class="com-list fxjl-item" style="display:block;">
            <ul class="layui-timeline">
            </ul>
        </div>
        <div class="com-list gjqk-item">
            <ul class="layui-timeline2">
            </ul>
        </div>
    </div>
    <div class="changeStatus">
        <div class="status-item">
            <p v="0">待跟进</p>
            <p v="1">跟进中</p>
            <p v="2">已完结</p>
            <p v="3">待更进（已超时）</p>
        </div>
        <div class="scontentBox">
            <p>工单：</p>
            <textarea id="status-content"></textarea>
        </div>
        <input type="button" value="确认" id="cSubmit" class="layui-btn" />
    </div>
</div>
<script>
    var complaintLogId = '@ViewBag.complaintLogId';
    var eid = '@ViewBag.Eid';
    var ename = '@ViewBag.Uname';
    var apiPath = '@ViewBag.apiPath';
    var appid = '@ViewBag.Appid';
    var msgObj = [];
    var layer;
    layui.use(['table', 'form', 'layer'], function () {
        layer = layui.layer;
    });
    $(function () {
        queryData(complaintLogId);
        $("#tool-item span").click(function () {
            var v = $(this).attr("v");
            $("#tool-item span").removeClass("active");
            $(".com-list").hide();
            $("." + v + "-item").show();
            $(this).addClass("active");
        });
        //编辑
        $("#edit-btn").click(function (e) {
            e.stopPropagation();
            openStatusTip();
            //layui.use('layer', function () {
            //    var layer = layui.layer;
            //    winindex = layer.open({
            //        title: '修改状态',
            //        type: 2,
            //        content: '/HgComplaint/ChangeStatus?udid=' + complaintLogId,
            //        area: ['850px', '600px']
            //    });
            //});
        });
        $("body:not(.changeStatus,#edit-btn)").click(function () {
            closeStatusTip();
        });
        $(".changeStatus").click(function (e) {
            e.stopPropagation();
        });
        //切换状态
        $(".status-item p").click(function () {
            var obj = $(this);
            if (!obj.hasClass('nck')) {
                chkStatus(obj.attr("v"));
            }
        });
        //提交修改状态
        $("#cSubmit").click(function () {
            var content = $("#status-content").val();
            var status = $(".status-item .ck").attr("v");
            if (content == "") {
                layer.msg("工单内容不能为空！");
            } else {
                var data = {
                    id: complaintLogId,
                    status: Number(status),
                    content,
                    eid,
                    ename,
                };
                $.ajax({
                    type: "Post",
                    url: apiPath + '/Complaint/Status',
                    data: JSON.stringify(data),
                    dataType: "json",
                    contentType: "application/json",
                    headers: { appid},
                    success: function (msg) {
                        console.log(msg);
                        if (msg.code == 0) {
                            layer.msg("操作成功！");
                            refresh();
                            closeStatusTip();
                        }
                        else {
                            layer.msg(msg.message);
                        }
                    },
                    error: function () {
                        layer.msg('创建失败！', { icon: 2 });
                    }
                });
            }
        });
    });

    function refresh() {
        layer.closeAll();
        queryData();
    }
    function queryData() {
        var url = apiPath + '/Complaint/Detail?id=' + complaintLogId;
        $.ajax({
            method: 'get',
            url: url,
            success: function (res) {
                console.log(res);
                if (res.code == 0) {
                    var d = res.data;
                    $(".layui-timeline *").remove();
                    $(".layui-timeline2 *").remove();
                    //状态
                    $(".complaintInfoStatus").append(getStatus(d.status));
                    //风险记录
                    var item_h = "";
                    $.each(d.complaintLogDetails, function (i, e) {
                        var fullContent = e.content;
                        if (e.keywords) {
                            var kw = e.keywords.split(';');
                            $.each(kw, function (i, e) {
                                fullContent = fullContent.replace(e, "<a class='keyword'>" + e + "</a>");
                            });
                        }
                        item_h += '<li class="layui-timeline-item">';
                        item_h += '<i class="layui-icon layui-timeline-axis"></i>';
                        item_h += '<div class="layui-timeline-content layui-text">';
                        item_h += '<div class="layui-timeline-title">';
                        item_h += '<p class="signtype">' + e.signTypeStr + '</p>';
                        item_h += '<p class="source">' + e.sourceStr + '</p>';
                        item_h += '<p class="ctime">' + e.ctime + '</p>';
                        item_h += '</div>';
                        item_h += '<p class="content">' + fullContent + '</p>';


                        item_h += '<div class="foot-tool">';
                        if (e.internalNickname && e.deptname) {
                            item_h += '<p>' + e.signWayStr + ':(' + e.deptname +', '+ e.internalNickname+')</p>';
                        } else {
                            item_h += '<p>' + e.signWayStr + '</p>';
                        }
                        if (e.msgid != '' && e.msgid) {
                            msgObj.push(e);
                            item_h += '<a class="showMsg" onclick="showMsgLog(\'' + e.msgid + '\')">查看聊天记录</a>';
                        }
                        item_h += '</div>';
                        item_h += '</div>';
                        item_h += '</li>';
                    });
                    $(".layui-timeline").append(item_h);
                    //跟进记录
                    var item_ht = "";
                    $.each(d.complaintFollowDetails, function (i, e) {
                        item_ht += '<li class="layui-timeline-item">';
                        item_ht += '<i class="layui-icon layui-timeline-axis"></i>';
                        item_ht += '<div class="layui-timeline-content layui-text">';
                        item_ht += '<div class="layui-timeline-title">';
                        item_ht += '<p class="signtype">' + replaceStatus(e.title) + '</p>';
                        item_ht += '<p class="ctime">' + e.ctime + '</p>';
                        item_ht += '</div>';
                        item_ht += '<p class="content">' + e.content + '</p>';

                        item_ht += '<div class="foot-tool">';
                        if (e.deptname && e.eid) {
                            item_ht += '<p>' + e.deptname+ ', ' + e.ename + '(' + e.eid + ')</p>';
                        } else {
                            item_ht += '<p>' + e.ename + '</p>';
                        }
                        item_ht += '</div>';
                        item_ht += '</div>';
                        item_ht += '</li>';
                    });
                    $(".layui-timeline2").append(item_ht);

                } else {
                    layer.msg(res.message, { icon: 2 });
                }
            },
            error: function () {
                layer.msg('操作失败！', { icon: 2 });
            }
        })
    }

    function showMsgLog(msgid) {
        var data = findOne(msgid);
        var ctime = new Date(data.ctime);
        var sdate = dateTimeToString(new Date(ctime.setDate(ctime.getDate() - 1)));
        var edate = data.ctime;
        var cinfigurl = "@Html.Raw(ViewBag.WwMessage_Url)";
        var eid = "@ViewBag.eid";
        var urlSplit = cinfigurl.split('$');
        var firstUrl = "http://183.6.86.112:8082";

        $(urlSplit).each(function (a, url) {
            if (url.indexOf("|") > -1) {//分内外网
                var ssw = window.location.href;
                if (ssw.indexOf("192.168.") > -1 || ssw.indexOf("localhost") > -1) {//内网无疑
                    newURL = url.split('|')[0];
                } else {
                    newURL = url.split('|')[1];
                }
            } else {
                newURL = url;
            }
            if (a == 0) {
                firstUrl = newURL;
            }

        });
        $.ajax({
            url: "/Csvr/CustomerUC/GetExt_flag",
            type: "Post",
            data: { },
            dataType: "json",
            loading: true,
            success: function (rep) {
                if (rep.result) {
                    debugger
                    if (rep.retmsg != null && rep.retmsg.length > 0) {
                        var url = firstUrl + "/Admin/OutHHuser/MessageDetial?isgroup=false&IsHg=True";
                        url += "&corp=" + data.appid;
                        url += "&customer=" + data.appuserid;
                        url += "&userid=" + data.internalAppuserid;
                        url += "&dStime=" + sdate;
                        url += "&dEtime=" + edate;
                        url += "&msgid=" + msgid;
                        url += "&nickname=" + data.nickname;
                        url += "&uname=" + data.internalNickname;
                        url += "&newKey=" + data.keywords;
                        var ext_flag = rep.retmsg;
                        url += "&ext_flag=" + ext_flag;
                        url += "&eid=" + eid;
                        
                    }
                    layer.open({
                        title: '查看聊天记录',
                        type: 2,
                        content: url,
                        area: ['80%', '80%']
                    });
                }
                else {
                    alert("失败了！");
                }
            }
        });
    }
    function dateTimeToString(date) {
        var y = date.getFullYear();
        var M = date.getMonth() + 1;
        var d = date.getDate();
        var H = date.getHours();
        var m = date.getMinutes();
        var s = date.getSeconds();
        return y + '-' + (M < 10 ? ('0' + M) : M) + '-' + (d < 10 ? ('0' + d) : d) + " " + (H < 10 ? ('0' + H) : H) + ":" + (m < 10 ? ('0' + m) : m) + ":" + (s < 10 ? ('0' + s) : s);
    }
    function findOne(msgid) {
        var res = {};
        $.each(msgObj, function (i,e) {
            if (e.msgid == msgid) {
                res = e;
            }
        });
        return res;
    }
    function getStatus(statusInter) {
        nckStatus(statusInter);
        switch (statusInter) {
            case 0:
                chkStatus(0);
                return "<a class='s0'>待跟进</a>";
            case 1:
                chkStatus(1);
                return "<a class='s1'>跟进中</a>";
            case 2:
                chkStatus(2);
                return "<a class='s2'>已完结</a>";
            case 3:
                chkStatus(3);
                return "<a class='s3'>待跟进已超时</a>";
            default:
                return "";
        }

    }
    function replaceStatus(title) {
        return title.replace("【待跟进】", "【<a class='s0'>待跟进</a>】")
            .replace("跟进中", "<a class='s1'>跟进中</a>")
            .replace("已完结", "<a class='s2'>已完结</a>")
            .replace("待跟进已超时", "<a class='s3'>待跟进已超时</a>")
            .replace("待跟进(已超时)", "<a class='s3'>待跟进(已超时)</a>");
    }
    function openStatusTip() {
        $(".changeStatus").show();
    }
    function closeStatusTip() {
        $(".changeStatus").hide();
    }
    function nckStatus(maxv) {
        maxv--;
        while (maxv >= 0) {
            $(".status-item p[v='" + maxv + "']").addClass("nck");
            maxv--;
        }
    }
    function chkStatus(v) {
        $(".status-item p").removeClass("ck");
        $(".status-item p[v='" + v + "']").addClass("ck");
    }
</script>