@using WeApp.Configuration
@using WeApp.TrainingCampGroup.Dto
@{
    Layout = "~/Views/Shared/Layout/_Layout.Stu.cshtml";
    CampGroupDto group = ViewBag.Group;
    ViewBag.Title = "指挥长屏(" + group.Name + ")";
    string id = group.Id,
        groupName = group.Name,
        campNo = group.CampNo;
    bool showTip = ViewBag.ShowTip;

}
@section css{
    <link href="~/Content/Css/ExerciseV2_1/stu-cmd_leader.min.css" rel="stylesheet" />
}
@Html.Partial("Layout/V2/_Bg", false)
<div class="box  no-select" style="">
    <div id="bg_title">
        <span class="title">决策指令下达</span>
    </div>
    <div class="box-body ">
        <div class="box-header">
            <span class="title">@(groupName)指挥部 —— 指挥长</span>
        </div>
        <div class="body log-cmd-box">
            <div class="body-card" id="cmd-box">
                <div id="log-box" class="logs-box" style="width: 100%">
                    <div class='empty'>暂无指令，等待组员发送指令</div>
                </div>
            </div>
            <div class="body-card">
                <button type="button" class="btn" onclick="SubmitNextScene()">进入下一阶段场景</button>
                <button type="button" class="btn btn-cmd" onclick="ShowEdit()">指挥长自定义下达指令</button>
            </div>
        </div>
        <div class="body txt-cmd-box">
            <div class="cmd-form">
                <input type="hidden" class="form-control " name="id" value="" />
                <div class="scene-box">
                </div>
                <div class="role-box">
                    <div class="body-card select-box">
                        <select class="form-control " id="role-select" name="role" style="width: 100%" autocomplete="off" placeholder="请选择角色" onchange="GetTipInfo(); $(this).val()=='self'?$('.input-box').show():$('.input-box').hide()"></select>
                    </div>
                    <div class="body-card input-box ">
                        <input class="form-control " id="role-input" name="self-role" style="width: 100%" autocomplete="off" placeholder="请输入自定义角色" />
                    </div>
                </div>
                <div class="d-flex">
                    <div class="cmd-box body-card" style="width: 100%">
                        <textarea class="form-control txt" rows="6" name="message" placeholder="请输入指令内容"></textarea>
                        @if (showTip)
                        {
                            <button type="button" class="btn btn-submit " onclick="ShowTips(this)">打开辅助提示</button>
                        }
                    </div>
                    @if (showTip)
                    {
                        <div class="tip-box body-card" style="margin-left: 10px;">
                            <div class="tip-header">辅助提示</div>
                            <div class="tip-body"></div>
                        </div>
                    }
                </div>
                <div class="body-card">
                    <button type="button" class="btn btn-back" onclick="CloseEdit()">指令中心</button>
                    <button type="button" class="btn btn-submit" onclick="RoleHandle(this)">下达指令</button>
                </div>
            </div>
        </div>
    </div>
    <div style="position: absolute; left: 0; bottom: 0; color: #ddd; opacity: 0.5;">@(groupName)</div>
</div>
<div class="question" title="点击处理来电" onclick="ShowQuestion()">
    <button type="button" class="btn-danger" style="--w: 80px;">
        <i class="fa fa-phone-volume"></i>
    </button>
</div>

<div class="modal fade" id="modal_question" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" style="cursor: move;">
                <h4 class="modal-title">
                    <span>处置电话提问</span>
                </h4>
                <button type="button" class="close" data-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form class="form-horizontal " id="form">
                    <input id="id" name="id" type="hidden" value="">
                    <input id="campNo" name="campNo" type="hidden" value="">
                    <input id="groupNo" name="groupNo" type="hidden" value="">
                    <div class="question-text">
                    </div>
                    <div class="form-group row">
                        <div class="" style="width: 100%">
                            <div class="input-group input-group-sm ">
                                <textarea rows="5" class="form-control required" id="handleContent" name="handleContent" placeholder="请输入处理内容..." value="" style="" aria-required="true"></textarea>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer" style="text-align: center;">
                <button type="button" class="btn btn-sm btn-outline-iwb waves-effect" data-dismiss="modal" style="min-width:100px;">取消</button>
                <button type="button" class="btn btn-iwb btn-sm save-btn waves-effect" style="min-width:100px;">保存</button>
            </div>
        </div>
    </div>
</div>
<audio id="voiceAudio" style="display: none">
    <source type="audio/wav" />
</audio>
@section scripts
{
    <script src="~/Content/Js/V2.1/stu-cmd.js"></script>
    <script>
        $(function () {
            resizeHeight_Leader();
            window.addEventListener('resize', resizeHeight_Leader);
            GetLog();
            GetQuestionLogs();
            OverlayScrollbar($('#cmd-box'));
            $('#handleContent').keydown(function (e) {
                var theEvent = window.event || e;
                var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
                if (code == 13) {
                    $('#modal_question .save-btn').click();
                }
            });
        });
        setCampGroup("@(campNo)", "@(id)", @(showTip ? "true" : "false"), "SaveAndSendOperationScene");
        function resizeHeight_Cmd() {
            var fs = 38;
            var h = $("#bg_header").height();
            var newFs = fs * h / 126;
            $(".box .box-title").height(h)
                .css("fontSize", newFs + "px");
            var sh = $(".box .scene-box").height();
            resizeHeight((h, wh) => {
                var height = 260;
                $(".cmd-box,.tip-box").height(wh - h - height - sh);
            })
        }

        function resizeHeight_Leader(editFlag) {
            resizeHeight((h, wh) => {
                var height = 225;
                $(".logs-box").height(wh - h - height)
            })
        }

        function SendRoleCmd(that) {
            MsgConfirm("您确认下达这条指令吗？",
                "下达指令",
                function() {
                    var $that = $(that).closest('.log-box');
                    var id = $that.data('id');
                    $.iwbAjax4({
                        url: abp.appUrl + "Eval/OperationScene?id=" + id,
                        success: function() {
                            $that.addClass('send');
                            $that.find('.btn-box').html('<div class="btn btn-small">已下达</div>');

                        }
                    });
                });
        }

        function SubmitNextScene() {
            var log = $("#log-box .log-box.send");
            //if (!log || log.length <= 0) {
            //    abp.message.warn("请至少下达一条指令后再操作！");
            //    return;
            //}
            var sceneName = "";
            $(".scene-box .scene").each(function () {
                var scenePath = $(this).data("path");
                if ($(`#log-box .log-box.send[data-path="${scenePath}"]`).length <= 0) {
                    sceneName = $(this).data("name");
                    return;
                }
            });
            if (sceneName) {
                abp.message.warn(`【${sceneName}】情景还未处理，请至少下达一条指令后再操作！`);
                return;
            }

            MsgConfirm("您确认进入到下一情景吗？",
                "情景流转",
                function() {

                    $.iwbAjax4({
                        url: abp.appUrl + "Eval/NextFlowNode?groupNo=@(id)&campNo=none",
                        success: function(res) {
                            $("#log-box").html("<div class='empty'>暂无指令，等待组员发送指令</div>");
                        }
                    });
                });
        }

        function GetLog() {
            $.iwbAjax5({
                url: abp.appUrl + "Query/GetCurrentSceneLog?no=@(id)",
                success: function(res) {
                    if (res && res.length) {
                        for (var i = 0; i < res.length; i++) {
                            var item = res[i];
                            FormatLog(item);
                        }
                    } else if ($('.scene-box .scene').length > 0) {
                        $(".log-cmd-box #log-box").html("<div class='empty'>暂无指令，等待组员发送指令</div>");
                    }
                }
            });
        }

        function FormatLog(data) {
            if (data) {
                var h = 50 + (Math.floor(data.word.length / 60)+1) * 21,
                    msg = data.word ? data.word : "",
                    state = data.logState == '@(LogStateDefinition.New)' ? '' : 'send',
                    editSvg =`<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g opacity="0.8">
                                <path d="M9.74929 27.4617L14.7065 26.7657C14.9787 26.7261 15.2307 26.5995 15.425 26.405L18.7525 23.0429L24.0923 17.641L25.7092 16.006L20.3627 10.6049L10.83 20.2448L10.0838 21.0008C9.89 21.1973 9.76482 21.4511 9.72682 21.7245L9.03834 26.744C9.02481 26.8413 9.0338 26.9405 9.06462 27.0338C9.09543 27.1272 9.14725 27.2122 9.21608 27.2824C9.28526 27.3512 9.36933 27.4031 9.46179 27.4342C9.55425 27.4653 9.65262 27.4747 9.74929 27.4617ZM27.9125 13.7742C28.1483 13.5335 28.2803 13.21 28.2803 12.8731C28.2803 12.5362 28.1483 12.2127 27.9125 11.972L24.3517 8.37297C24.2352 8.25483 24.0964 8.16102 23.9433 8.097C23.7902 8.03297 23.626 8 23.46 8C23.2941 8 23.1298 8.03297 22.9768 8.097C22.8237 8.16102 22.6849 8.25483 22.5683 8.37297L20.9274 10.0326L26.2731 15.4338L27.9125 13.7742Z" fill="#36536D" />
                                <rect x="25.7598" y="18.5" width="6.24" height="2.5" rx="1.25" fill="#36536D" />
                                <rect x="21" y="24" width="11" height="2.5" rx="1.25" fill="#36536D" />
                                <rect x="8" y="29.5" width="24" height="2.5" rx="1.25" fill="#36536D" />
                            </g></svg>`
                btn = data.logState == '@(LogStateDefinition.New)' ? `<div class="btn btn-small btn-edit" onclick="EditCmd(this)">${editSvg}编辑</div><div class="btn btn-small" onclick="SendRoleCmd(this)">下达指令</div>` : '<div class="btn btn-small">已下达</div > ';
               var str = `<div class="log-box ${state}" id="log-box_${data.id}" data-id="${data.id}" data-role="${data.role}" data-path="${data.scenePath}" style="min-height:${h}px">
                        <div class="content">
                            <div class="title">
                              <span class="role">${data.role} </span>
                              <span class="scene-name">${data.extendInfo1}</span>
                            </div>
                            <div class="text">${msg}</div>
                        </div>
                        <div class="btn-box">${btn}</div>
                    </div>`
                $('#log-box').prepend(str);
            }
        }

        function EditCmd(that) {
            var $that = $(that).closest('.log-box'),
                id = $that.data("id"),
                role = $that.data("role"),
                scenePath = $that.data("path"),
                txt = $that.find(".text").text();
            $(".cmd-form .form-control[name='id']").val(id);
            $(".cmd-form .form-control[name='role']").val(role).select2();
            $(".cmd-form textarea").val(txt);
            $(".cmd-form .scene-box .scene").removeClass("active");
            $(`.cmd-form .scene-box .scene[data-path='${scenePath}']`).addClass("active");
            GetTipInfo();
            ShowEdit();
        }

        function ShowEdit() {
            $(".log-cmd-box").hide();
            $(".txt-cmd-box").show();
            resizeHeight_Cmd();
        }

        function CloseEdit() {
            $(".cmd-form .form-control[name='id']").val("");
            $(".cmd-form .form-control[name='role']").val("").select2();
            $(".cmd-form textarea").val("");
            $(".log-cmd-box").show();
            $(".txt-cmd-box").hide();
            resizeHeight_Leader();
        }

        function UpdateSuccessCallBack(logId) {
            var $that = $(`#log-box_${logId}`);
            $that.addClass('send');
            $that.find('.btn-box').html('<div class="btn btn-small">已下达</div>');
            CloseEdit();
        }

        function GetQuestionLogs() {
            $.iwbAjax4({
                url: abp.appUrl + "query/GetQuestionLogs?no=@(id)",
                success: function(res) {
                    if (res && res.length) {
                        res.forEach(v => {
                            if (_phoneLogIds.indexOf(v) < 0) {
                                _phoneLogIds.push(v);
                            }
                        });
                        PhoneQuestion();
                    }
                }
            });
        }

        var _phoneLogIds = [], _currentPhoneLogId, _currentPhoneQuestionText, _voiceText, isPhoning = false;

        function PhoneQuestion() {
            if (isPhoning) {
                return;
            }
            _currentPhoneLogId = _phoneLogIds.shift();
            if (_currentPhoneLogId) {
                isPhoning = true;
                $('.question').fadeIn();
            }
        }

        function ShowQuestion() {
            if (_currentPhoneLogId) {
                if (!_currentPhoneQuestionText) {
                    $.iwbAjax4({
                        url: abp.appUrl + "query/GetQuestionByLog?no=" + _currentPhoneLogId,
                        success: function(res) {
                            _voiceText = _currentPhoneQuestionText = res.content;
                            $('#modal_question .question-text').html(_currentPhoneQuestionText);
                            Show();
                        }
                    });
                } else {
                    Show();
                }
            }

            function Show() {
                if (_voiceText) {
                    //voice(_voiceText);
                    playVoice(_voiceText);
                    _voiceText = undefined;
                }
                OpenModal({
                    modal:"modal_question",
                    url: abp.appUrl + 'eval/OperationPhone',
                    data: { id: _currentPhoneLogId, campNo: '@(campNo)', groupNo: '@(group.Id)' },
                    success: function() {
                        $('.question').fadeOut();
                        _currentPhoneLogId = undefined;
                        _currentPhoneQuestionText = undefined;
                        isPhoning = false;
                        if (_phoneLogIds.length) {
                            setTimeout(PhoneQuestion, 1500);
                        }
                    }
                });
            }
        }

        function voice(text) {
            if (!text) {
                return;
            }
            try {
                // 语音播报
                var utterThis = new window.SpeechSynthesisUtterance();
                utterThis.text = text; //播放内容按
                window.speechSynthesis.speak(utterThis);
            } catch (e) {
                console.error("语音播报出错：", e);
            }

        }

        function playVoice(callText) {
            //$.iwbAjax5({
            //    url: abp.appUrl+`Query/voice?txt=${callText}&rate=0`,
            //    success: function(res) {
            //        var audioPlay = document.getElementById("voiceAudio");
            //        audioPlay.src = res;
            //        audioPlay.play();
            //    }
            //});
            if (!callText) {
                return;
            }
            var audioPlay = document.getElementById("voiceAudio");
            audioPlay.src = "/Exercise/voice?txt=" + callText;
            audioPlay.play();
        }
    </script>

    <script>
        abp.signalr.connect(['@(id)', '@(campNo)']);
        iwbHub.client.getReloadAll = function(msg) {
            console.log('getReloadAll: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (data) {
                        if (data.no == '@(id)' || data.no == '@(campNo)') {
                            window.location.reload();
                        }
                    }
                } catch (e) {
                    console.log('getReloadAll: ', e);
                }
            }
        };
        iwbHub.client.getReloadLeader = function(msg) {
            console.log('getReloadLeader: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (data) {
                        if (data.no == '@(id)' || data.no == '@(campNo)') {
                            window.location.reload();
                        }
                    }
                } catch (e) {
                    console.log('getReloadLeader: ', e);
                }
            }
        };
        iwbHub.client.getOperationLog = function(msg) {
            console.log('getOperationLog: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (data) {
                        if (data.no == '@(id)') {
                            $('#log-box .empty').remove();
                            FormatLog(data);
                        }
                    }
                } catch (e) {
                    console.log('getOperationLog: ', e);
                }
            }
        };
        iwbHub.client.getOperationLogSubmit = function(msg) {
            console.log('getOperationLogSubmit: ', msg);
            if (msg) {
                try {
                  var data = JSON.parse(msg);
                    if (data) {
                        if (data.no == '@(id)') {
                            var $that = $(`#log-box_${data.logId}`)
                            $that.addClass('send');
                            $that.find('.btn-box').html('<div class="btn btn-small">已下达</div>');
                            $that.find('.text').html(data.txt);
                        }
                    }
                } catch (e) {
                  console.log('getOperationLogSubmit: ', e);
                }
            }
        };
        iwbHub.client.getNewScene = function(msg) {
            console.log('getNewScene: ', msg);
            if (msg) {
                try {
                    var data = typeof msg == 'string' ? JSON.parse(msg) : msg;
                    if (data) {
                        if (data.no == '@(id)') {
                            RefeshRunningScene();
                        }
                    }
                } catch (e) {
                    console.log('getNewScene: ', e);
                }
            }
        };
        iwbHub.client.getRefreshScene = function(msg) {
            console.log('getRefreshScene: ', msg);
            if (msg && msg == '@(id)') {
                RefeshRunningScene(true);
            }
        };
        iwbHub.client.getPhoneQuestion = function(msg) {
            console.log('getPhoneQuestion: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (!data) {
                        return;
                    }
                    if (data.no == '@(id)') {
                        if (_phoneLogIds.indexOf(v) < 0) {
                            _phoneLogIds.push(data.id);
                        }
                        PhoneQuestion();
                    };
                } catch (e) {
                    console.log('getPhoneQuestion: ', e);
                }
            }
        };
    </script>
}