@{
    ViewBag.Title = "微信聊天记录";
    Layout = "~/Areas/Admin/Views/Shared/_workLayout2.cshtml";
}
@using  Mini.Model.ViewModel
@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>
@{

    Ww_MsgRoom model = (Ww_MsgRoom)ViewBag.roomInfo;
    List<GroupUser> groupuser = (List<GroupUser>)ViewBag.groupuser;
    List<object> objlist = new List<object>();
    foreach (GroupUser item in groupuser)
    {
        objlist.Add(new { title ="<img src='"+item.avatar+"' width='20' height='20'> " + ManagerPhoneHelper.FormatPhoneUserName(item.name), id = item.userid, corpid = item.corpid });
    }
    var obj = new List<object>
    {
    new { title = (string.IsNullOrEmpty(model.roomname)?"群":model.roomname)+"  ("+groupuser.Count+"人)", id = "1", spread = true,children=objlist },
    };
}
<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);
    //    });

    //});

    //JavaScript代码区域
    layui.use(['element', 'form', 'tree', 'layedit', 'laydate'], function () {
        var tree = layui.tree;
        var element = layui.element;
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;
        tree.render({
            elem: '#test13'
            , data: leftmenudata
            , 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.title, 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);
            });
        });
        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");
                }
            });
        
        });
        $("#btnUpdateName").click(function () {
            winindex = layer.open({
                type: 2,
                content: 'RoomEdit?type=needRoomeName&roomid=@Html.Raw(string.Format("{0}&corp={1}",model.roomid, ViewBag.corp))',
                area: ['400px', '300px']
            });
        });
    });
    @*function ShowMessage(customer, nickname, isgroup) {
        $("#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));
    }*@
    var winindex;
    function Closed() {
        layer.close(winindex);
    }
    function UpdateName(name) {
        try {
            var roomId = "@Html.Raw(model.roomid)";
            var newhtml = $('[data-id="1"] .layui-tree-txt:eq(0)').html();
            newhtml = newhtml.replace(newhtml.substring(0, newhtml.indexOf("  (")), name);
            $('[data-id="1"] .layui-tree-txt:eq(0)').html(newhtml);
        } catch (a) { }
        try {
            if (parent.SetName != null)
                parent.SetName(name, roomId);//调用父容器修改
        } catch (a) { }
        try {
            var mydocutmengt = document.getElementById("myframe").contentWindow;
            if (mydocutmengt != null && mydocutmengt.SetName != null)
                mydocutmengt.SetName(name);
        } catch (a) { }
    }
</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:80px;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 class="layui-input-inline" style="width:50px;margin-right: 0px;">
                        <input type="button" class="layui-btn layui-btn-sm layui-btn layui-btn-warm" lay-filter="btnUpdateName" id="btnUpdateName" 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% - 80px);overflow-y:auto;">
        <div id="test13" class="demo-tree-more mytree" style="width:227px;position: absolute;"></div>
    </div>
}
@section rightcontent{
    <iframe id="myframe" frameborder="0" src="MessageDetial?isgroup=true&corp=@Html.Raw(ViewBag.corp)&customer=@Html.Raw(ViewBag.roomid)&isHg=@Html.Raw(ViewBag.isHg)" style="width:100%;height:100%;" />
}