We_Relese/OnlineApp/Relese/Views/Play/PlayList.cshtml

@using WeOnlineApp.Configuration

@{
    Layout = "~/Views/Shared/Layout/_Layout.Play.cshtml";
    ViewBag.PageId = "start";
    ViewBag.Title = "演练课程";
}
<link href="~/Content/Libs/jstree/themes/proton/style.min.css" rel="stylesheet" />
@Html.Partial("~/Views/Play/_BoxBaseStyle.cshtml")
<style>
    .jstree-proton-responsive .jstree-wholerow {
        border-top: 1px solid rgba(0,0,0,.05);
        background: var(--mainBgColor);
    }

    .jstree-proton .jstree-hovered, .jstree-proton .jstree-wholerow-hovered {
        color: var(--mainColor);
        background: var(--mainBgColor2);
    }

    .jstree-proton .jstree-clicked, .jstree-proton .jstree-wholerow-clicked {
        color: #fff;
        background: var(--mainColor);
    }

    .box .box-body {
        padding: 10px;
    }

    .box.tree-box {
        height: calc(100vh - 35px);
    }

    .box.subject-box {
        height: calc(100vh - 335px);
        margin-bottom: 20px;
    }

        .box.subject-box .box-body {
            height: calc(100% - 40px);
        }

    #subject-info {
        padding-left: 0;
        padding-right: 0;
    }

    .subject-info-box {
        margin: 8px 0;
        --mainColor: #afafaf;
        border: 1px solid var(--mainColor);
    }

        .subject-info-box:first-child {
            margin-top: 0;
        }

        .subject-info-box .box-header {
            position: relative;
            font-size: 16px;
        }

        .subject-info-box .btn {
            min-width: 80px;
        }

        .subject-info-box .tool-btn {
            position: absolute;
            top: -3px;
            right: 12px;
        }

        .subject-info-box .tool-td .btn {
            border-radius: 30px;
            padding: 1px 0;
            font-size: 60%;
            min-width: 60px;
        }

    .subject-box table {
        margin-bottom: 0;
    }

        .subject-box table th, .subject-box table td {
            width: 20%;
            text-align: center;
        }

    .box.chat-box, .box.question-box {
        height: 280px;
    }

    .no-data {
        display: flex;
        color: #ff4500;
        font-size: 26px;
        font-weight: 600;
        width: 100%;
        height: 150px;
        justify-content: center;
        align-items: center;
    }

    .tool-box {
        padding: 0 0 5px;
        display: flex;
        width: 100%;
    }

        .tool-box span {
            text-align: center;
            width: 50%;
            padding: 5px;
            cursor: pointer;
            background: #000000;
            background: rgba(0,0,0,0.3);
            border: 1px solid #ddd;
        }

            .tool-box span:hover {
                background: #000000;
                background: rgba(0,0,0,0.4);
            }

    .direct-chat-msg.right .direct-chat-text {
        background: var(--mainColor);
        color: #fff;
    }

        .direct-chat-msg.right .direct-chat-text::after, .direct-chat-msg.right .direct-chat-text::before {
            border-left-color: var(--mainColor);
        }

    .tool-nav {
        background: #c7f0f3;
    }

        .tool-nav .nav-link {
            padding: 5px 16px;
            font-size: 14px;
            color: var(--mainColor);
        }

            .tool-nav .nav-link.active {
                background: var(--mainColor);
                color: #fff;
            }
</style>
<div style="padding:10px 15px;">
    <div class="row">
        <div class="col-sm-3 ">
            <div class="box tree-box">
                <div class="box-header">课程体系</div>
                <div id="subject-type-tree" class="box-body">
                </div>
            </div>
        </div>
        <div class="col-sm-9">
            <div class="row">
                <div class="box subject-box">
                    <div class="box-header">
                        <span>演练助手</span>
                        <div class="back-btn">
                            <button type="button" class="btn  btn-outline-light btn-sm mr-3" style="width: 180px;" onclick="window.open('/play/code/', '_blank');">填写邀请码加入演练</button>
                        </div>
                    </div>

                    <div class="box-body">
                        <div class="box-header" id="subject-type-name" style="background: var(--mainBgColor2);color: var(--mainColor);font-size: 80%;padding: 0;line-height: 30px;
        font-weight: 800;"></div>
                        <div id="subject-info" class="box-body">
                            <div class=body-content></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" style="margin: 0 -15px;">
                <div class="col-sm-5">
                    <div class="box chat-box">
                        <div class="box-header">聊天室</div>
                        <div class="box-body" style="padding: 0;height: calc(100% - 50px)">
                            <div class="card  direct-chat" style="z-index: 1000;color: #111;background: transparent; margin: 0;height: 100%">
                                <div class="card-body" id="chat-info">
                                    <div class="direct-chat-messages body-content" style="height: 100%;overflow: unset;"></div>
                                </div>
                                <div class="card-footer" style="padding: 5px 10px;">
                                    <div class="input-group input-group-sm">
                                        <input type="text" id="chat-message" name="chat-message" placeholder="请输入..." class="form-control">
                                        <span class="input-group-append">
                                            <button type="button" onclick="SendChat()" class="btn btn-info">发送</button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-7">
                    <div class="box question-box">
                        <div class="box-header">
                            <span>
                                答疑室
                                <small id="q-camp-name"></small>
                            </span>
                            <div class="back-btn">
                                <button type="button" class="btn  btn-outline-light btn-sm mr-3" style="width: 80px;" onclick="window.Question(this)">我要提问</button>
                                <button type="button" class="btn  btn-outline-success btn-sm" style="width: 80px;" onclick="window.Answer(this)">我要答疑</button>
                            </div>
                        </div>
                        <div id="question-info" class="box-body">
                            <div class="tool-nav">
                                <ul class="nav nav-tabs" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" data-type="1" href="javascript:void(0)" onclick="window.LoadQuestion(this)">答疑广场</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-type="2" href="javascript:void(0)" onclick="window.LoadQuestion(this)">我的问题</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-type="3" href="javascript:void(0)" onclick="window.LoadQuestion(this)">我的收藏</a>
                                    </li>
                                </ul>
                            </div>
                            <div class=body-content>
                                @Html.Partial("~/Views/Play/_Question.cshtml")
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section scripts
{
    <script src="~/Content/Libs/jstree/jstree.min.js"></script>
    <script>
        var curSubjectCategoryNo = '', curCampNo='', curCampName='';
        var isInit = false;

        function GetNode(node, callback) {
            $.iwbAjax4({
                url: abp.appUrl + 'Query/GetChildSubjectCategory',
                data: { id: node.id },
                success: function(res) {
                    var data = [];
                    if (!isInit) {
                        isInit = true;
                        for (var i = 0; i < res.length; i++) {
                            var item = res[i];
                            if (i == 0) {
                                curSubjectCategoryNo = item.id;
                                $('#subject-type-name').html(item.text);
                            }
                            item.state = {
                                opened: true,
                                selected: true
                            };
                            data.push(item);
                        }
                    } else {
                        data = res;
                    }

                    if (callback) {
                        callback.call(this, data);
                    } else {
                        $("#plan-tree").html("暂无数据！");
                    }
                }
            });
        }

        $(function() {
            abp.signalr.connect('@(IwbConsts.ChatNo)');
            OverlayScrollbar($('#subject-info'));
            OverlayScrollbar($('#chat-info'));
            OverlayScrollbar($('#question-info'));
            $('#chat-message').on('keypress',function(event){
                if(event.keyCode == "13") {
                    SendChat();
                    return false;
                }
                return true;
            });
            $('#subject-type-tree')
                .jstree({
                    'core': {
                        'data': GetNode,
                        'strings': {
                            'Loading ...': '请稍后...'
                        },
                        'force_text': true,
                        'check_callback': true,
                        'themes': {
                            'name': 'proton',
                            'responsive': true,
                            'variant': 'large'
                        }
                    },

                    'plugins': ['wholerow'] // 'state',
                })
                .on('ready.jstree',
                    function(e, data) {
                        //console.log('000', e, data);
                        @*var inst = data.instance,
                        obj = inst.get_node('@(IwbConsts.SubjectCategoryRootNo)');
                    inst.open_node(obj);
                    inst.select_node(obj);*@

                        GetSubject();
                        if (window.LoadQuestion) {
                            window.LoadQuestion();
                        }
                    })
                //.on('create_node.jstree', function (e, data) {console.log(1);}).on('rename_node.jstree', function (e, data) {console.log(2);}).on('delete_node.jstree', function (e, data){console.log(3);}).on('changed.jstree', function (e, data) {console.log('222');})
                .on('activate_node.jstree',
                    function(e, data) {
                        //console.log('111',data);
                        curSubjectCategoryNo = data.node.id;
                        $('#subject-type-name').html(data.node.text);
                        GetSubject();
                        curCampNo = '';
                        curCampName = '';
                        $('#q-camp-name').text('');
                        if (window.LoadQuestion) {
                            window.LoadQuestion();
                        }
                    });
        });

        function GetSubject() {
            if (curSubjectCategoryNo) {
                $.iwbAjax4({
                    url: abp.appUrl + 'Query/QueryCampBySc?no=' + curSubjectCategoryNo,
                    success: function(res) {
                        SubjectFormatter(res);
                    }
                });
            }

        }

        function SubjectFormatter(data) {
            var str = '';
            if (data && data.length) {
                data.forEach(function(v) {
                    str += SubjectInfoFormatter(v);
                });
            }
            if (str) {
                $('#subject-info .body-content').html(str);
            } else {
                $('#subject-info .body-content').html('<div class="no-data">暂无课程</div>');
            }
        }

        function SubjectInfoFormatter(data) {
            var str = '';
            if (data) {
                str += '<div class="subject-info-box">';
                str +=
                    '<div class="box-header">{0}<div class="tool-btn"><span data-id="{1}" onclick="SubjectDetail(\'{1}\')" class="btn btn-outline-info btn-sm mr-3">课程介绍</span><span data-id="{1}" onclick="SubjectStudy(\'{1}\')" class="btn btn-outline-success btn-sm mr-3">预演学习</span><span data-id="{1}" onclick="SubjectCreate(\'{1}\')" class="btn btn-info btn-sm">选择课程</span></div></div>'.format(data.campName,data.id);
                str +=
                    '<table class="table"><thead><tr><th>演练主题</th><th>演练时长</th><th>演练积分</th><th>截止日期</th><th></th></tr></thead>';
                str +=
                    '<tbody><tr><td>{2}</td><td>{3}&nbsp;&nbsp;分钟</td><td>{4}&nbsp;&nbsp;分</td><td>{5}</td><td class="tool-td"><span data-id="{0}" class="btn btn-info btn-sm float-right">聊天</span><span data-id="{0}" class="btn btn-info btn-sm mr-3 float-right" onclick="QueryQuestion(\'{0}\',\'{1}\')">答疑</span></td></tr></tbody>'
                    .format(data.id,
                        data.campName,
                        data.packageName,
                        data.maxTrainingMinute,
                        data.subjectPoint,
                        new Date(data.endDate).format('yyyy-MM-dd'));
                str += '</table>';
                str += '</div>';
            }
            return str;
        }

        function SubjectDetail(id) {
            window.location.href = "@Url.Action("Detail","Play")/" + id;
        }
        function SubjectStudy(id) {
            window.location.href = "@Url.Action("Study","Play")/" + id;
        }
        function SubjectCreate(id) {
            window.location.href = "@Url.Action("Create","Play")/" + id;
        }

        function QueryQuestion(id,name) {
            curCampNo = id;
            curCampName = name;
            $('#q-camp-name').text('(' + curCampName + ')');
            if (window.LoadQuestion) {
                window.LoadQuestion();
            }
        }

        function GetCanJoinCamp() {
            $.iwbAjax4({
                url: abp.appUrl + 'Query/QueryCanJoinCamp',
                success: function(res) {
                    CanJoinCampFormatter(res);
                }
            });
        }

        function CanUseCampFormatter(data) {
            var str = '';
            if (data && data.length) {
                data.forEach(function(v) {
                    str += CampFormatter(v, 1);
                });
            }
            if (str) {
                $('#use-camp').html(str);
            } else {
                $('#use-camp').html('<div class="no-data">暂无可用培训营</div>');
            }
        }

        function CanJoinCampFormatter(data) {
            var str = '';
            if (data && data.length) {
                data.forEach(function(v) {
                    str += CampFormatter(v, 2);
                });
            }
            if (str) {
                $('#join-camp').html(str);
            } else {
                $('#join-camp').html('<div class="no-data">暂无可用培训营</div>');
            }
        }

        function CampFormatter(data, type) {
            var str = '';
            if (data) {
                var style = "danger", icon = "fas fa-lock", per = 100, title = type == 1 ? "创建演练" : "加入演练";
                if (type == 1) {
                    style = "info";
                    icon = "far fa-star";
                } else {
                    if (data.isPublic) {
                        style = "success";
                        icon = "fas fa-unlock";
                    }
                }
                str += '<div class="col-md-3">';
                str += '<div class="info-box bg-{0}" style="flex-direction: column;padding:0px">'.format(style);
                str += '<div class="ribbon-wrapper"><div class="ribbon bg-success">{0}分钟</div></div>'.format(
                    data.maxTrainingMinute);
                str += '<div style="display: flex;flex-direction: row;padding:5px 0 0;">';
                str += '<span class="info-box-icon"><i class="{0}"></i></span>'.format(icon);

                str += '<div class="info-box-content">';
                str += data.name ? '<span class="info-box-text">演练名称：{0}</span>'.format(data.name) : '';
                str += '<span class="info-box-text">培训营：{0}</span>'.format(data.campName);
                //if (type != 1) {
                //    var min = 0;
                //    str += '<span class="info-box-number">已演练 {0} 分钟</span>'.format(min);
                //}
                str += '<div class="progress"><div class="progress-bar" style="width: {0}%"></div></div>'.format(per);
                str += '<span class="progress-description">{0}</span>'.format(data.packageName);

                str += '</div>';
                str += '</div>';
                str +=
                    '<div class="tool-box" ><span onclick="Detail(\'{1}\',{2})">查看详情</span><span onclick="CreatePlay(\'{1}\',{2})">{0}</span></div>'
                    .format(title, data.id, type);
                str += '</div>';

                str += '</div>';

            }
            return str;
        }
    </script>

    <script>
        function SendChat() {
            var text = $('#chat-message').val();
            if (!text) {
                return;
            }
            $.iwbAjax4({
                url: abp.appUrl + "/Camp/Chat",
                data: { Id: '', Msg: text},
                success: function() {
                    $('#chat-message').val('').focus();
                }
            });
        }
        function FormatChat(data) {
            var str = '';
            if (data) {
                var imagePath = data.imagePath ? data.imagePath : '/Content/Image/user.png';
                var isSelf = '', left = 'left', right = 'right';
                if (data.userName === '@(AbpSession.UserName)' ) {
                    isSelf = "right";
                    left = 'right';
                    right = 'left';
                }
                str += '<div class="direct-chat-msg {0}">'.format(isSelf);
                str += '<div class="direct-chat-infos clearfix">';
                str += '<span class="direct-chat-name float-{0}">{1}</span>'.format(left, data.name);//+"("+data.userName+")");
                str += '<span class="direct-chat-timestamp float-{0}">{1}</span>'.format(right, new Date().format('hh:mm:ss'));
                str += '</div>';
                str += '<img class="direct-chat-img" src="{0}" alt="{1}">'.format(imagePath, data.name);;
                str += '<div class="direct-chat-text">{0}</div>'.format(data.word);
                str += '</div>';

            }
            return str;
        }
        function Scroll2Bottom(that) {
            var instance = window.OverlayScrollbars($(that)[0]);
            if (instance) {
                try {
                    instance.scroll({ y: "100%" });
                } catch (e) {

                }
            }
        }
        iwbHub.client.getCampChat = function(msg) {
            console.log('getCampChat: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    var str = FormatChat(data);
                    if (str) {
                        $('#chat-info  .body-content').append(str);
                        Scroll2Bottom($('#chat-info'));
                    }

                } catch (e) {
                    console.log('getCampChat: ', e);
                }
            }
        };
    </script>

    <script>
        function Detail(id, type) {
            if (type == 1) {
                window.open("/play/detail/" + id, "_blank");
            } else {
                window.open("/play/detailByPlay/" + id, "_blank");
            }
        }

        function CreatePlay(id, type) {
            if (type == 1) {
                window.open("/play/create/" + id, "_blank");
            } else {
                window.open("/play/ready/" + id, "_blank");
            }
        }
    </script>
}