@{
    ViewBag.Title = "UserChat";
    //Layout = null;
}
@using Micro.Wanter.Model;
@section scripts{
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/jquery.signalR-2.2.3.min.js"></script>
    <script src="~/signalr/hubs"></script>
    <script src="../Scripts/Plugin/layui-v2.2.5/layui/layui.js"></script>
    <script src="~/Scripts/Plugin/jQuery-emoji/lib/script/highlight.pack.js"></script>
    <script src="~/Scripts/Plugin/jQuery-emoji/lib/script/jquery.mousewheel-3.0.6.min.js"></script>
    <script src="~/Scripts/Plugin/jQuery-emoji/lib/script/jquery.mCustomScrollbar.min.js"></script>
    <script src="~/Scripts/Plugin/jQuery-emoji/dist/js/jquery.emoji.min.js"></script>
    <script>
        var clients = [];
        var chat;
        layui.use('layer', function () {
            var $ = layui.jquery, layer = layui.layer;
        });
        //开始聊天
        function userChat(obj) {
            var connectionId = $(obj).attr('connectionId');
            showWin(connectionId, $('#userName').html());
        }
        function showWin(connectionId, userName) {
            //var connectionId = $(obj).attr('connectionId');
            clients.push(connectionId);
            var html = '<div style="float:left;margin-left:30px;width:735px" id="' + connectionId + '" connectionId="' + connectionId + '"><div style="margin: 10px;"><strong>' + userName + '</strong></div><ul class="msgArea"></ul>';
            html += ' <div id="editor" contenteditable="true"></div> <button id="btn" class="btn btn-sm btn-default">:)</button><button onclick="sendMessage(this)" class="layui-btn layui-btn-sm sendmsg">发送</button></div>';
            parent.layer.open({
                type: 5,
                title: 'IM',
                maxmin: true,
                shadeClose: true, //点击遮罩关闭层
                area: ['800px', '580px'],
                content: html,
                //"/Chart/ChartIfamre?id=" + connectionId + "&name=" + userName,
                end: function () {
                    location.reload();
                }
            });
            $("#editor").emoji({
                button: "#btn",
                showTab: false,
                animation: 'slide',
                icons: [{
                    name: "QQ表情",
                    path: "../Scripts/Plugin/jQuery-emoji/dist/img/qq/",
                    maxNum: 91,
                    excludeNums: [41, 45, 54],
                    file: ".gif"
                }]
            });
            //$("#userBox").append(html);
        }
        function sendMessage(data) {
            var message = $("#editor").html();
            var userObj = $(data).parent();
            var username = $('#userName').html();
            console.info($(userObj).attr("connectionId"));
            var targetConnectionId = $(userObj).attr("connectionId");
            chat.server.sendMessage(targetConnectionId, message, username);
            $("#editor").html("");
        }
        function exitChat(btnObj) {
            // debugger
            //  var connectionId = $(btnObj).parent().attr("connectionId");
            $(btnObj).parent().remove();
            //chat.server.exitChat(connectionId);
        }
        $(function () {
            chat = $.connection.chartHub;
            console.info(chat);
            //显示提示方法
            chat.client.showMessage = function (message) {
                alert(message);
            }
            //注册显示信息的方法
            chat.client.addMessage = function (message, connectionId) {
                if ($.inArray(connectionId, clients) == -1) {
                    showWin(connectionId, $('#userName').html());
                }
                $("#" + connectionId).find("ul").each(function () {
                    $(this).append('<li>' + message + '</li>');
                })
            }
            //注册显示所有用户的方法
            chat.client.getUsers = function (data) {
                if (data) {
                    var json = $.parseJSON(data);
                    console.info(json);
                    $("#users").html(" ");
                    for (var i = 0; i < json.length; i++) {
                        var html = '<li style="line-height:50px">用户名:' + json[i].UserName + '<button connectionId="' + json[i].ConnectionID + '" onclick="userChat(this)" class="floatright layui-btn layui-btn-normal layui-btn-radius" style="margin-right:50px; margin-top: 10px;">聊天</button></li>';
                        $("#users").append(html);
                    }
                }
            }
            //注册显示推出聊天提示的方法
            chat.client.exitUser = function (data) {
                alert(data);
            }
            //注册显示个人信息的方法
            chat.client.showId = function (data) {
                $("#conId").html(data);
                clients.push(data);
            }
            //获取用户名称
            //$('#userName').html(prompt('请输入您的名称', ''));

            //连接成功后获取自己的信息
            $.connection.hub.start().done(function () {
                chat.server.getName($('#userName').html());
            });
        });
    </script>
}

<link href="../Scripts/Plugin/layui-v2.2.5/layui/css/layui.css" rel="stylesheet" />
<link rel="stylesheet" href="~/Scripts/Plugin/jQuery-emoji/lib/css/jquery.mCustomScrollbar.min.css" />
<link rel="stylesheet" href="~/Scripts/Plugin/jQuery-emoji/dist/css/jquery.emoji.css" />
<link rel="stylesheet" href="~/Scripts/Plugin/jQuery-emoji/lib/css/railscasts.css" />
<link rel="stylesheet" href="~/Scripts/Plugin/jQuery-emoji/dist/css/index.css" />
<style>
    .msg {
        border: solid 1px gray;
        border-radius: 10px;
        background-color: lavender;
    }

    .uname {
        background-color: #08ff8d;
        border-radius: 10px;
    }

    .sendmsg {
        margin-left: 650px;
        margin-top: 10px;
        border-radius: 10px;
    }

    .msgArea{
            min-height: 350px;
    border: solid 1px #cac7c7;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    }
</style>
<div id="tong">
    <div style="display:none;">名称：<p>@Html.ActionLink(((S_User)Context.Session["CurrentUser"]).UserName, "Index", "Home", routeValues: null, htmlAttributes: new { id = "userName", title = ((S_User)Context.Session["CurrentUser"]).UserName })</p></div>
    <div style="display:none;">ConnectionID:<p id="conId"></p></div>
</div>
<div class="layui-collapse">
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">在线用户列表</h2>
        <div class="layui-colla-content layui-show">
            <div class="layui-collapse " lay-accordion="">
                <ul id="users" class="msgArea"></ul>
            </div>
        </div>
    </div>
</div>
