@using WeApp.Configuration
@{
    ViewBag.Title = "客户端消息监测";
    Layout = "~/Views/Shared/Layout/_Layout.None.cshtml";
}
@section styles{
    <style>
        .main-box {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
            padding: 5px 15px;
            margin: 0 auto;
            font-size: 16px;
            /*background-image: url('../../Content/Image/home/bg.jpg');*/
        }

        .tool-box {
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

            .tool-box .btn, .tool-box .form-control {
                margin: 0 10px;
            }

        .content-box {
            width: 100%;
            height: calc(100vh - 50px)
        }

        .msg-box {
            width: 100%;
            height: 100%;
            color: #fff;
            background-image: linear-gradient(45deg,#3b2e7e,#4b5cc4);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            padding: 15px;
        }

        .message {
            width: 100%;
            word-break: break-all;
            padding-top: 5px;
            line-height: 1.45;
            max-height: 100px;
        }

            .message .date {
                color: #ff0;
                padding-left: 6px;
            }

            .message .topic {
                padding-left: 2px;
                color: #ff0;
                font-weight: 600;
            }
    </style>
}
<div class="main-box">
    <div class="tool-box">
        <button class="btn btn-sm btn-danger" type="button" onclick="Refresh(1)">重新连接</button>
        <button class="btn btn-sm btn-danger" type="button" onclick="Refresh(2)">引擎重连</button>
        <input id="msg" class="form-control" style="width: 300px" placeholder="请输入需发送的消息" type="text" value="" />
        <button class="btn btn-sm btn-success" type="button" onclick="Send()">发送消息</button>
        <button class="btn btn-sm btn-success" type="button" onclick="EngineSend()">引擎发送消息</button>
    </div>
    <div class="content-box row">
        <div id="r-box" class="col-md-8 msg-box"><div class="box-body"></div></div>
        <div id="s-box" class="col-md-4 msg-box"><div class="box-body"></div></div>
    </div>
</div>

@section scripts
{
    <script>
        $(function () {
            Scroll($('.msg-box'));
            //setInterval(function () {
            //    Send();
            //    EngineSend();
            //},1000*5)
        });

        function Scroll(that) {
            $(that).overlayScrollbars({
                className: "os-theme-thin-dark",
                resize: "n", //[ "none", "both", "horizontal", "vertical" ]shorthand: [ "n", "b", "h", "v" ]
                normalizeRTL: true, //是否应规范化RTL滚动。
                sizeAutoCapable: true,
                clipAlways: true,
                paddingAbsolute: false,
                overflowBehavior: {
                    x: "v-h", //[ "hidden", "scroll", "visible-hidden", "visible-scroll" ]shorthand: [ "h", "s", "v-h", "v-s" ]
                    y: "s"
                },
                scrollbars: {
                    dragScrolling: true,
                    clickScrolling: true,
                    visibility: "a", //[ "visible", "hidden", "auto" ]shorthand: [ "v", "h", "a" ]
                    autoHide: "n", //[ "never", "scroll", "leave", "move" ]shorthand: [ "n", "s", "l", "m" ]
                    autoHideDelay: 800
                }
            });
        }
        function Refresh(id) {
            $.iwbAjax5({
                url: '/MsgMonitor/Refresh/' + id
            });
            var str = '<div class="message"><span class="date">[ {0} ] </span><span class="content">{1}</span></div>'
                .format(new Date().format('yyyy-MM-dd hh:mm:ss'), id == 1 ? "客户端重连" : "引擎重连");
            $('#s-box .box-body').prepend(str);
        }

        function Send() {
            var msg = $('#msg').val();
            $.iwbAjax5({
                url: '/MsgMonitor/Send/' + msg
            });
            //var str = '<div class="message"><span class="date">[ {0} ] </span><span class="content">客户端：{1}</span></div>'
            //    .format(new Date().format('yyyy-MM-dd hh:mm:ss'), msg);
            //$('#s-box .box-body').prepend(str);
        }

        function EngineSend() {
            var msg = $('#msg').val();
            $.iwbAjax5({
                url: '/MsgMonitor/EngineSend/' + msg
            });
            //var str = '<div class="message"><span class="date">[ {0} ] </span><span class="content">引擎：{1}</span></div>'
            //    .format(new Date().format('yyyy-MM-dd hh:mm:ss'), msg);
            //$('#s-box .box-body').prepend(str);

        }

        abp.signalr.connect(['@(IwbConsts.ClientName)']);
        iwbHub.client.getMqttMsg = function (data) {
            console.log('getMqttMsg: ', data);
            if (data) {
                var $str = $(
                    '<div class="message"><span class="date">[ {0} ] </span><span class="topic">【 {1} 】</span><span class="content">{2}</span></div>'
                    .format(new Date().format('yyyy-MM-dd hh:mm:ss'), data.topic, data.msg));
                $('#r-box .box-body').prepend($str);
                Scroll($str);
            }
        };
        iwbHub.client.getSendMqttMsg = function (data) {
            console.log('getSendMqttMsg: ', data);
            if (data) {
                var $str = $('<div class="message"><span class="date">[ {0} ] </span><span class="topic">【 {1} 】</span><span class="content">{2}</span></div>'.format(new Date().format('yyyy-MM-dd hh:mm:ss'), data.topic, data.msg));
                $('#s-box .box-body').prepend($str);
                Scroll($str);
            }
        };
    </script>
}