@{
    ViewBag.Title = "微信聊天记录";
    Layout = "~/Areas/Admin/Views/Shared/_workLayout2.cshtml";
}
@using Mini.Web.WebHelper
<link href="~/layui-v2.5.4/css/common.css" rel="stylesheet" />
<style type="text/css">
    .mycolor {
        color: red;
    }

    .displayLi {
        display: none;
    }

    .displayBody {
        display: none;
    }

    .redColor {
        color: red;
    }
</style>
<style type="text/css">
    .headstyle {
        font-family: MicrosoftYaHei-Bold;
        font-size: 14px;
        color: #333333;
        /*font-weight: bold;*/
        padding: 20px 0 0 10px;
    }

    .layui-dl .toptitlechose a {
        font-weight: 500;
    }

    .menuleft {
        padding-left: 0px;
    }


    .mytree .layui-tree {
        margin-left: 0;
    }

    .mytree .layui-tree-set .layui-tree-txt {
        /*color: #333;*/
        color: black;
        font-size: 15px;
        font-weight: 400;
        font-family: "Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","PingFang SC","Microsoft YaHei","微软雅黑",SimSun,"宋体",Heiti,"黑体",sans-serif;
    }

    .mytree .layui-tree-lineExtend .layui-tree-txt {
        color: #666;
        font-size: 14px;
        font-weight: 400;
        font-family: "Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","PingFang SC","Microsoft YaHei","微软雅黑",SimSun,"宋体",Heiti,"黑体",sans-serif;
    }

    .mytree .layui-tree-entry {
        height: 40px;
        line-height: 40px;
    }

    .mytree .layui-tree-spread .layui-tree-iconArrow:after {
        border-width: 5px;
        border-style: solid;
        border-color: #999ca2 transparent transparent transparent;
        margin-top: 3px;
    }

    .mytree .layui-tree-lineExtend .layui-tree-set:hover {
        box-sizing: border-box;
        border-right: 3px red solid !important;
    }

        .mytree .layui-tree-lineExtend .layui-tree-set:hover .layui-tree-txt {
            color: black;
        }

    .treeClick {
        box-sizing: border-box;
        border-right: 3px red solid !important;
        background-color: #e4dcc0;
    }

        .treeClick .layui-tree-txt {
            color: black !important;
        }
    /*.mytree .layui-tree-lineExtend .layui-tree-iconClick {
            margin: 0 5px;
        }*/
    .mytree .layui-tree-txt {
        width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mysort {
        background: url(/image/sort.png) no-repeat center;
        width: 22px;
        height: 22px;
        font-size: 22px;
        background-size: 100%;
        cursor: pointer;
    }

    .mydorp .layui-form-select dl {
        left: -120px;
        top: 35px;
    }

    .mydrp li {
        padding: 5px 10px 5px 10px;
    }

    .mydrp .choose {
        color: red;
    }

    .mydrp li:hover {
        background-color: #eaf2ff;
        border: 1px solid #d2d2d2;
        border-radius: 2px;
    }

    .mytree .layui-tree-entry {
        height: 30px;
        line-height: 30px;
    }
</style>
@{
    string corpid = ViewBag.corp;
    List<Mini.Model.ViewModel.Ww_MsgRoom> roomlist = (List<Mini.Model.ViewModel.Ww_MsgRoom>)ViewBag.roomList;
    string roomErro = ViewBag.roomErro;
    List<Mini.Model.ViewModel.Ww_User_ExtuserModel> rcontact = ViewBag.rcontact as List<Mini.Model.ViewModel.Ww_User_ExtuserModel>;
    List<Mini.Model.ViewModel.Ww_User_ExtuserShow> showrcontact = ViewBag.showlist as List<Mini.Model.ViewModel.Ww_User_ExtuserShow>;
    List<Mini.Model.ViewModel.Ww_InnerUserModel> innerUser = ViewBag.inneruser as List<Mini.Model.ViewModel.Ww_InnerUserModel>;//内部联系人

    List<object> objlist = new List<object>();
    foreach (var model in showrcontact)
    {
        string remark_mobiles = "";
        if (!string.IsNullOrEmpty(model.remark_mobiles))
        {
            remark_mobiles = model.remark_mobiles.Replace("\n", "").Replace(" ", "").Replace("\t", "").Replace("\r", "").Replace("[\"","").Replace("\"]","").Replace("\"", "");
        }

        string title = "昵       称：" + model.name;
        title += "\n联系人ID：" + model.external_userid;
        title += "\n备       注：" + model.remark;
        title += "\n备注号码：" + remark_mobiles;
        title += "\n最近聊天：" + (!model.lmsgtime.HasValue ? "" : model.lmsgtime.Value.ToString("yyyy-MM-dd HH:mm:ss"));
        string userid = model.external_userid;
        string uname = userid;
        if (!string.IsNullOrEmpty(model.name) && string.IsNullOrEmpty(model.remark))
        {
            uname = model.name;
        }
        else if (!string.IsNullOrEmpty(model.name) && !string.IsNullOrEmpty(model.remark))
        {
            uname = string.Format("{0}({1})", model.name, model.remark);
        }
        else if (!string.IsNullOrEmpty(model.remark))
        {
            uname = model.remark;
        }

        objlist.Add(new { ntitle = uname, txt = title, remarks = model.remark, mobile = remark_mobiles, title = "<img src='" + model.avatar + "' width='20' height='20'> " + uname, id = userid, isgroup = false, isOk = true, corpid = model.corpid });
    }
    List<object> innerobjlist = new List<object>();
    foreach (var model in innerUser)
    {
        string title = "昵       称：" + model.name;
        title += "\n内部联系人ID：" + model.deptuserid;
        title += "\n最近聊天：" + (!model.lmsgtime.HasValue ? "" : model.lmsgtime.Value.ToString("yyyy-MM-dd HH:mm:ss"));
        innerobjlist.Add(new { ntitle = model.name, txt = title, remarks = model.name, title = "<img src='" + model.avatar + "' width='20' height='20'> " + model.name, id = model.deptuserid, isgroup = false, isOk = true, corpid = model.corpid });
    }
    List<object> roomlistdata = new List<object>();
    if (!string.IsNullOrEmpty(roomErro))
    {
        roomlistdata.Add(new { title = "出现错误:" + roomErro, id = "0", isgroup = true, isOk = false, corpid = corpid });
    }
    else if (roomlist.Count > 0)
    {
        foreach (Mini.Model.ViewModel.Ww_MsgRoom item in roomlist)
        {
            string title = "群名称：" + item.roomname;
            title += "\n群  ID：" + item.roomid;
            //title += "\n成员数：" + item.membernum;
            //title += "\n时  间：" + item.ctimestr;
            if (!string.IsNullOrEmpty(item.roomname))
            {

                roomlistdata.Add(new { title = item.roomname,txt= title, id = item.roomid, isgroup = true, isOk = true, corpid = corpid });
            }
            else
            {
                //没有设置群名称，就直接显示群ID

                roomlistdata.Add(new { title = item.roomid, txt = title, id = item.roomid, isgroup = true, isOk = true, corpid = corpid });
            }

        }

    }
    var obj = new List<object>
{
new { title = "外部联系人  ("+rcontact.Count+"人)", id = "1", spread = true,children=objlist },
new { title = "内部联系人  ("+innerUser.Count+"人)", id = "4", spread = true,children=innerobjlist },
new { title = "群聊  ("+roomlistdata.Count+"个)", id = "2", spread = true ,children=roomlistdata}
};
}
<script>
    var leftmenudata =@Html.Raw(Mini.Common.JsonHelper.ObjDivertToJson(obj));
    //$(function () {
    //    $(".downpanel").on("click", ".layui-select-title", function (e) {
    //        $(".layui-form-select").not($(this).parents(".layui-form-select")).removeClass("layui-form-selected");
    //        $(this).parents(".downpanel").toggleClass("layui-form-selected");
    //        layui.stope(e);
    //    }).on("click", "dl i", function (e) {
    //        layui.stope(e);
    //    });

    //});
    $(function () {
        $("#slt_showr").change(function () {
            ShowLeftMenu();
        });
    });
    //JavaScript代码区域
    var tree;
    layui.use(['element', 'form', 'tree', 'layedit', 'laydate'], function () {
        tree = layui.tree;
        var element = layui.element;
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;
        ShowLeftMenu();
       

        var rcontactval=$(".mydrp .choose").attr("value");

        //$("#btnSearch").click(function () {
        //    $(".displayLi").each(function (i, n) {
        //        $(this).removeClass("displayLi");
        //    });
        //    $(".redColor").each(function (i, n) {
        //        $(this).after($(this).attr("ntitle"));
        //        $(this).remove();
        //    });
        //    var txt = $("#findTxt").val();
        //    //console.log(txt);
        //    if (txt == "")
        //        return;
        //    $("#test13 .layui-tree-set[nickname] .layui-tree-txt").each(function (as, ba) {
        //        //console.log(ba);
        //        var html = $(ba).html();
        //        html = html.replace(txt, "<b ntitle=\"" + txt + "\" class=\"redColor\">" + txt + "</b>");
        //        $(ba).html(html);
        //        if (html.indexOf("redColor") == -1) {
        //            $(this).parent().parent().parent().addClass("displayLi");
        //        }
        //    });

        //});

        $("#btnSearch").click(function () {
            var txt = $("#findTxt").val();
            if (txt == "") {
                $(".displayLi").each(function (i, n) {
                    $(this).removeClass("displayLi");
                });
                $(".addclass").remove();
                return;
            } else {
                $("#test13 .layui-tree-set[title]").addClass("displayLi");
            }
            $(leftmenudata).each(function (aindex, adata) {
                $(adata.children).each(function (bindex, bdata) {
                    if (bdata.title.indexOf(txt) > -1 || (bdata.mobile != null && bdata.mobile.indexOf(txt)>-1)) {
                        console.log(bdata);
                        var aphtml = '<div data-id="' + bdata.id + '" class="layui-tree-set addclass" title="' + bdata.txt + '" userid="' + bdata.id + '" ntitle="' + bdata.ntitle + '" isgroup="' + bdata.isgroup + '">' +
                            '<div class="layui-tree-entry" >' +
                            '<div class="layui-tree-main">' +
                            '<span class="layui-tree-iconClick" > ' +
                            '<i class="layui-tree-iconArrow layui-hide" ></i > ' +
                            '</span > ' +
                            '<span class="layui-tree-txt">' + bdata.title.replace(txt, "<b ntitle=\"" + txt + "\" class=\"redColor\">" + txt + "</b>"); +'</span></div></div ></div > ';
                        $("[data-id='" + adata.id + "'] .layui-tree-pack").append(aphtml);
                    }
                });
            });
            $(".addclass").click(function (a) {
                $(".treeClick").removeClass("treeClick");
                $(this).addClass("treeClick");
                var isgroup = false;
                if ($(this).attr("isgroup") == "true") {
                    isgroup = true;
                }
                ShowMessage($(this).attr("userid"), $(this).attr("ntitle"), isgroup);
                //ShowMessage(obj.data.id, obj.data.ntitle, obj.data.isgroup);
            });

        });
    });
    var isAeadl = false;
    function ShowLeftMenu() {
        var mdata = [];
        var showvalue = $("#slt_showr").val();
        if (showvalue == "100") {
            $(leftmenudata).each(function (aindex, adata) {
                var lidata = {
                    title: adata.title, spread : true, id: adata.id, children: []
                };
                if (adata.id == 1 && adata.children.length > 100) {//普通好友默认显示80人
                    lidata.title = "外部联系人  (100/" + adata.children.length + "人)";
                    $(adata.children).each(function (bindex, bdata) {
                        if (bindex < 100) {
                            lidata.children[bindex] = bdata;
                        } else {
                            return false;
                        }
                    });
                } else {
                    lidata = adata;
                }
                mdata[aindex] = lidata;//数据量
            });
        } else {
            mdata = leftmenudata;
        }
        if (isAeadl == false) {
            isAeadl = true;
            tree.render({
                id: 'TreeDemoId' //定义索引
                ,elem: '#test13'
                , data: mdata
                , showLine: false  //是否开启连接线
                , accordion: false
                , click: function (obj) {
                    if (obj.data.id == "1" || obj.data.id == "2" || obj.data.id == "0" || obj.data.isOk == false) {

                } else {
                    $(".treeClick").removeClass("treeClick");
                    $(obj.elem).addClass("treeClick");
                    ShowMessage(obj.data.id, obj.data.ntitle, obj.data.isgroup);
                }
            }

            });
            $(leftmenudata).each(function (ax, asd) {
                $(asd.children).each(function (a, b) {
                    $("[data-id='" + b.id + "']").attr("title", b.txt).attr("username", b.username).attr("nickname", b.title);
                });
            });
        } else {
            tree.reload('TreeDemoId', {
                data: mdata
            });
        }
        $(leftmenudata).each(function (ax, asd) {
            $(asd.children).each(function (a, b) {
                $("[data-id='" + b.id + "']").attr("title", b.txt).attr("username", b.username).attr("nickname", b.title);
            });
        });

    }
    function ShowMessage(customer, nickname, isgroup) {
        console.log(isgroup);
        if (isgroup == false) {
            $("#myframe").attr("src", "MessageDetial?isgroup=" + isgroup + "&userid=@Html.Raw(ViewBag.userid)&uname=@Html.Raw(System.Web.HttpUtility.UrlEncode(ViewBag.uname))&corp=@Html.Raw(ViewBag.corp)&customer=" + customer + "&nickname=" + encodeURIComponent(nickname)+"&isHg=@Html.Raw(ViewBag.isHg)") ;
        } else {
            $("#myframe").attr("src", "GroupRoom?isgroup=" + isgroup + "&corp=@Html.Raw(ViewBag.corp)&roomid=" + customer +"&isHg=@Html.Raw(ViewBag.isHg)");
        }
    }
    ///设置修改后的群名称
    function SetName(name, roomId) {
        $('[data-id="' + roomId + '"] .layui-tree-txt').text(name);
    }
</script>
@section leftmenu{
    <div class="headstyle">
        <form class="layui-form" action="">
            <div class="layui-form-item" style="margin-bottom: 10px;">
                <div class="layui-inline" style="margin-right:0px;">
                    <div class="layui-input-inline" style="width:150px;vertical-align: middle;margin-right: 5px;">
                        <input type="text" class="layui-input" id="findTxt" style="height:32px;" value="" placeholder="用户名昵称">
                    </div>
                    <div class="layui-input-inline" style="width:50px;margin-right: 0px;">
                        <input type="button" class="layui-btn layui-btn-sm layui-btn-ok" lay-filter="btnSearch" id="btnSearch" value="查找" />
                    </div>
                </div>
            </div>
        </form>
    </div>
    <hr class="menuhr" style="margin-top:10px;" />
    <div class="layui-side-scroll myscrolcss" style="width:100%;height:calc(100% - 125px);overflow-y:auto;">
        <div id="test13" class="demo-tree-more mytree" style="width:227px;position: absolute;"></div>
    </div>
    <div style="margin-bottom:0;border-top: 1px solid #dad5d5;">
        <div style="margin:10px;">
            显示<select id="slt_showr" style="margin-top:5px;">
                <option value="100" title="只显示100个好友">部分好友</option>
                <option value="-1" title="将显示所有好友">全部好友</option>
            </select>
        </div>
    </div>
}
@section rightcontent{
    <iframe id="myframe" frameborder="0" src="MessageDetial?userid=@Html.Raw(ViewBag.userid)&uname=@Html.Raw(System.Web.HttpUtility.UrlEncode(ViewBag.uname))" style="width:100%;height:100%;" />
}