@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;
}
@section css{
    <link href="~/Content/Css/ExerciseV2/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">
            <div class="body-card" id="cmd-box">
                <div id="log-box" class="logs-box">
                    <div class='empty'>暂无指令，等待组员发送指令</div>
                </div>
            </div>
            <div class="body-card">
                <div class="btn" onclick="SubmitNextScene()">进入下一阶段场景</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" 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>
        $(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 .save-btn').click();
                }
            });
        });

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

        function RoleHandle(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').html('已下达');
                        }
                    });
                });
        }

        function SubmitNextScene() {
            var log = $("#log-box .log-box.send");
            if (!log || log.length <= 0) {
                abp.message.warn("请至少下达一条指令后再操作！");
                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) {
                        $("#box-body").empty();
                        var str = '';
                        for (var i = 0; i < res.length; i++) {
                            var item = res[i];
                            str += FormatLog(item);
                        }
                        if (str) {
                            $("#log-box").html(str);
                        } else {
                            $("#log-box").html("<div class='empty'>暂无指令，等待组员发送指令</div>");

                        }
                    }
                }
            });
        }

        function FormatLog(data) {
            var str = "";
            if (data) {
                var msg = data.word ? data.word : "",
                    state = data.logState == '@(LogStateDefinition.New)' ? '' : 'send',
                    btn = data.logState == '@(LogStateDefinition.New)' ? '<div class="btn btn-small" onclick="RoleHandle(this)">下达指令</div>' : '<div class="btn btn-small">已下达</div>';
                str = '<div class="log-box {0}" data-id="{1}"><div class="content"><div class="title">{2}</div><div class="text">{3}</div></div><div class="btn-box">{4}</div></div>'.format(state, data.id, data.role, msg, btn);
            }
            return str;
        }

        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-text').html(_currentPhoneQuestionText);
                            Show();
                        }
                    });
                } else {
                    Show();
                }
            }

            function Show() {
                if (_voiceText) {
                    //voice(_voiceText);
                    playVoice(_voiceText);
                    _voiceText = undefined;
                }
                OpenModal({
                    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();
                            var str = FormatLog(data);
                            $('#log-box').prepend(str);
                        }
                    }
                } catch (e) {
                    console.log('getOperationLog: ', e);
                }
            }
        };
        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>
}