@using WeApp.Models.Common
@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;
    var model = new ScreenModel(1, id, campNo, true);
}

@Html.Partial("Camp/_Effect", id + "," + campNo)
@Html.Partial("Layout/V2/_Bg", false)
<div class="main-box box" style="height: 100vh; width: 100vw; padding: 0; margin: 0; position: relative">
    <div id="bg_title" style="position: relative;">
        <span class="title">@(groupName)</span>
    </div>

    <div class="btn-box btn-box-right">
        <div onclick="ShowQuestionBox()" class="btn-question" style="margin-right: 15px;">
            <img class="img" src="/Content/Image/ExerciseV2/spec-question.png" />
            <span class="text">专家提问</span>
            <span class="dot"></span>
        </div>
    </div>

    <div class="main-box-body">
        @Html.Partial("_Screen", model)
    </div>
</div>

@section scripts
{
    <script>
        $(function() {
            resizeHeight_Screen();
            window.addEventListener('resize', resizeHeight_Screen);
            getQuestions();
        });
        function resizeHeight_Screen() {
            resizeHeight((h, wh) => {
                $(".main-box .main-box-body").height(wh - h - 30).css("marginTop", "-20px");
            })
        }
        function getQuestions() {
            $(".btn-question").removeClass("notity");
            $.iwbAjax5({
                url: abp.appUrl + `query/GetQuestionsByGroup?groupNo=@(group.Id)&campNo=@(campNo)`,
                success: function (res) {
                    if (res && res.length) {
                        if (res.findIndex((v) => { return !v.answers|| v.answers.length==0 })>=0) {
                            $(".btn-question").addClass("notity");
                        }
                    }
                }
            })
        }

        function ShowQuestionBox() {
            CloseQuestionBox();
            $.iwbAjax4({
                url: abp.appUrl + `query/GetQuestionsByGroup?groupNo=@(group.Id)&campNo=@(campNo)`,
                success: function (res) {
                    if (res && res.length) {
                        formatStuQa(res);
                    }
                }
            })
        }
        var headerSvg =`<svg width="164" height="36" viewBox="0 0 164 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_632_3737)">
<path d="M14 11H24L20 25H10L14 11Z" fill="#1EA2FF" />
<path d="M14 11H24L20 25H10L14 11Z" fill="url(#paint0_linear_632_3737)" fill-opacity="0.39" style="mix-blend-mode:overlay" />
</g>
<g filter="url(#filter1_d_632_3737)">
<path d="M144 11H154L150 25H140L144 11Z" fill="#09E0F3" />
<path d="M144 11H154L150 25H140L144 11Z" fill="url(#paint1_linear_632_3737)" fill-opacity="0.39" style="mix-blend-mode:overlay" />
</g>
<path d="M56.584 17.368H43.984C43.792 18.064 43.576 18.736 43.408 19.384H52.792L53.248 19.24L55.456 20.512C53.824 22.24 51.736 24.328 49.72 26.296C51.016 26.8 52.192 27.304 53.056 27.76L51.4 30.256C48.904 28.816 43.744 26.896 39.952 25.888L41.464 23.728C43.048 24.112 44.92 24.64 46.768 25.264C47.872 24.184 49.024 23.08 50.032 22.048H39.4C39.88 20.728 40.408 19.096 40.936 17.368H35.272V14.632H41.728C41.92 13.936 42.112 13.288 42.28 12.592H37.264V9.88H43C43.168 9.112 43.336 8.416 43.504 7.696H46.528C46.36 8.416 46.168 9.136 45.976 9.88H54.88V12.592H45.304L44.752 14.632H56.584V17.368ZM62.512 12.16V14.992H59.704V9.568H68.392C68.224 9.112 68.008 8.656 67.816 8.296L70.84 7.432C71.224 8.08 71.632 8.872 71.872 9.568H80.416V14.992H77.488V12.16H62.512ZM76.552 16.288L78.928 18.16C77.968 18.904 76.888 19.672 75.832 20.392C76.768 23.224 78.688 25.6 81.448 26.704C80.8 27.232 79.96 28.336 79.552 29.032C76.672 27.664 74.776 25.096 73.6 21.832C73.36 22 73.096 22.144 72.856 22.288C73.528 25.168 72.952 27.928 71.728 28.936C70.888 29.8 70.12 30.04 68.872 30.064C68.344 30.088 67.624 30.064 66.928 30.04C66.88 29.248 66.64 28.12 66.16 27.328C67 27.424 67.768 27.448 68.32 27.448C68.896 27.448 69.28 27.376 69.616 26.872C70.024 26.488 70.312 25.6 70.312 24.448C67.576 26.32 63.808 28.096 60.616 29.056C60.304 28.36 59.68 27.328 59.128 26.68C62.92 25.864 67.528 23.8 69.904 21.784C69.808 21.496 69.688 21.184 69.544 20.872C67.144 22.384 63.64 23.944 60.904 24.784C60.592 24.136 59.992 23.176 59.488 22.576C62.44 21.952 66.376 20.44 68.464 19.048C68.248 18.784 68.032 18.52 67.792 18.256C65.704 19.36 63.376 20.176 61.12 20.776C60.856 20.224 60.136 19.096 59.656 18.544C62.368 17.992 65.224 17.08 67.384 15.904H63.256V13.48H76.672V15.904H71.344C70.912 16.288 70.432 16.672 69.904 17.008C70.84 17.872 71.536 18.88 72.016 19.912C73.672 18.808 75.4 17.44 76.552 16.288ZM100.888 11.608V10.408H94.432V11.608H100.888ZM100.888 14.68V13.456H94.432V14.68H100.888ZM103.624 8.416V16.696H91.816V8.416H103.624ZM90.592 20.392L88.048 21.16V26.752C88.048 28.072 87.832 28.768 87.112 29.2C86.392 29.68 85.336 29.776 83.8 29.752C83.728 29.056 83.416 27.88 83.056 27.136C83.944 27.16 84.76 27.16 85.048 27.136C85.336 27.136 85.456 27.04 85.456 26.728V21.928C84.664 22.144 83.944 22.36 83.248 22.552L82.6 19.792C83.416 19.624 84.376 19.36 85.456 19.096V14.848H82.864V12.208H85.456V7.672H88.048V12.208H90.448V14.848H88.048V18.4L90.208 17.824L90.592 20.392ZM98.968 24.448V27.208C99.52 27.256 100.048 27.28 100.648 27.28C101.464 27.28 104.44 27.28 105.472 27.256C105.136 27.832 104.8 29.032 104.704 29.752H100.528C97.384 29.752 94.96 29.176 93.328 26.272C92.704 27.784 91.864 29.056 90.808 30.04C90.376 29.584 89.296 28.696 88.72 28.336C90.712 26.752 91.696 24.088 92.056 20.824L94.648 21.136C94.528 22 94.384 22.816 94.192 23.56C94.72 24.952 95.416 25.816 96.28 26.368V20.104H90.64V17.8H104.824V20.104H98.968V22.216H103.552V24.448H98.968ZM107.848 30.064V13.432H110.68V30.064H107.848ZM108.016 9.208L110.08 7.816C111.256 9.04 112.936 10.768 113.776 11.824L111.568 13.384C110.824 12.328 109.192 10.504 108.016 9.208ZM119.632 17.584H115.984V21.592H119.632V17.584ZM122.392 24.136H115.984V25.48H113.416V15.04H122.392V24.136ZM128.176 8.848V26.632C128.176 28.216 127.84 28.984 126.904 29.44C125.968 29.896 124.552 29.968 122.536 29.944C122.416 29.128 122.008 27.88 121.648 27.136C122.872 27.208 124.336 27.208 124.744 27.184C125.176 27.184 125.32 27.04 125.32 26.608V11.512H114.328V8.848H128.176Z" fill="#094B88" />
<defs>
<filter id="filter0_d_632_3737" x="0" y="1" width="34" height="34" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset />
<feGaussianBlur stdDeviation="5" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix type="matrix" values="0 0 0 0 0.207843 0 0 0 0 0.623529 0 0 0 0 0.909804 0 0 0 0.34 0" />
<feBlend mode="screen" in2="BackgroundImageFix" result="effect1_dropShadow_632_3737" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_632_3737" result="shape" />
</filter>
<filter id="filter1_d_632_3737" x="130" y="1" width="34" height="34" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset />
<feGaussianBlur stdDeviation="5" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.788235 0 0 0 0 0.862745 0 0 0 0.79 0" />
<feBlend mode="screen" in2="BackgroundImageFix" result="effect1_dropShadow_632_3737" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_632_3737" result="shape" />
</filter>
<linearGradient id="paint0_linear_632_3737" x1="23" y1="18.5385" x2="10.9886" y2="19.4679" gradientUnits="userSpaceOnUse">
<stop stop-color="white" />
<stop offset="1" />
</linearGradient>
<linearGradient id="paint1_linear_632_3737" x1="148" y1="11.5385" x2="146.841" y2="24.9863" gradientUnits="userSpaceOnUse">
<stop stop-color="white" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
`

        function formatStuQa(data) {
            var str = `<div class="stu-question-box" style="display:none;">`;
            str += `<div class="question-bg-box question-box-body">
                <div class="close-icon " onclick="CloseQuestionBox()">X</div>
                <div class="questions-box">
                    <div class="question-header">${headerSvg}</div>
                    <div class="question-body">`;
            if (data && data.length) {
                str +=` <div class="questions">`
                data.forEach(function (v) {
                    var statusClass = v.answers && v.answers.length ? "has-answer" : "";
                    var statusBtn = v.answers && v.answers.length ? "继续回答" : "回答提问";
                    str += `<div class="question-item" data-id="${v.id}" data-title="${v.question}">
                    <div class="question ${statusClass}">
                        <div class="title">${v.question}</div>
                        <button type="button" class="select-question btn btn-submit" onclick="ChangeQuestion(this)">${statusBtn}</button>
                    </div>
                    <div class="answers">${__formateItem(v.answers)}</div>
                    </div>`;
                })
                str += `</div>`;
                str += `<form class="question-form" style="">
                        <input type="hidden" class="form-control"  name="id" />
                        <div class="question"></div>
                        <textarea rows="5" class="form-control required" name="answer" placeholder="回答问题..." value="" style="" aria-required="true"></textarea>
                        <button type="button" class="btn btn-submit send-btn" onclick="HandleAnswer()" disabled>发送</div>
                    <form>`;

            } else {
                str +=`<div class="empty">
                        <img class="img" src="/Content/Image/ExerciseV2/empty.png">
                        <span class="text">专家还没提问~</span>
                    </div>`
            }
            str += `</div></div><div>`
            $("body").append(str);
            $(".stu-question-box").fadeIn(500);
            resize_question();
        function __formateItem(item) {
            var str = ``;
            if (item && item.length) {
                item.forEach(function (vv) {
                    str += `<div class="answer">${vv.answer}</div>`;
                })
            } else {
                str += `<div class="answer answer-empty">还未回答~</div>`;
            }
            return str;
            }
        }

        function ChangeQuestion(that) {
            var $that = $(that).closest(".question-item"), $that2 = $(".stu-question-box .questions-box .question-form");
            var id = $that.data("id"), title = $that.data("title");
            $that2.find(".form-control[name='id']").val(id);
            $that2.find(".question").html(`<img src="/Content/Image/ExerciseV2/spec-question.png" /><span class="text">${title}</span>`);
            //$that2.find(".form-control[name='answer']").val("");
            $that2.find(".send-btn").prop("disabled",false);
            $that2.show();
            resize_question();
        }

        function resize_question() {
            var h1 = $(".stu-question-box .questions-box").height(),
                h2 = $(".stu-question-box .questions-box .question-header").height(),
                h3 = $(".stu-question-box .questions-box .question-form").height(),
                h = h1 - h2 - h3 - 50;
            $(".questions").height(h);

        }

        function HandleAnswer() {
            var $that = $(".stu-question-box .questions-box .question-form"),
                id = $that.find(".form-control[name='id']").val(),
                answer = $that.find(".form-control[name='answer']").val();
            if (!id) {
                abp.message.warn(`问题选择异常，重新选择回答！`);
                retun;
            }
            if (!answer) {
                abp.message.warn(`回答内容不能为空！`);
                retun;
            }
            $.iwbAjax4({
                url: abp.appUrl + 'eval/StudentAnswer',
                data: { id: id, campNo: '@(campNo)', groupNo: '@(group.Id)' ,answer:answer},
                success: function () {
                    getQuestions();
                    abp.message.success(`提交成功！`);
                }
            })
        }

        function newQuestion() {
            $(".btn-question").addClass("notity")
            if ($(".stu-question-box").length > 0) {
                return;
            }
            $("body").append(`<div class="stu-question-box">
                                <div class="new question-box-body" onclick="ShowQuestionBox()">
                                    <div class="close-icon " onclick="CloseQuestionBox()">X</div>
                                </div>
                            </div>`);
        }

        function CloseQuestionBox() {
            $('.stu-question-box').fadeOut(600, function () {
                $('.stu-question-box').remove();
            })
        }

        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.getReloadPublic = function(msg) {
            console.log('getReloadPublic: ', 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('getReloadPublic: ', e);
                }
            }
        };
        iwbHub.client.getSpecQuestion = function(msg) {
            console.log('getSpecQuestion: ', msg);
            if (msg) {
               try {
                   var data = JSON.parse(msg);
                   if (data) {
                       if (data.no == '@(id)' || data.no == 'all') {
                           //__questionArray.push({
                           //    id: data.logId,
                           //    question: data.question
                           //})
                           newQuestion();
                       }
                   }
               } catch (e) {
                   console.log('getSpecQuestion: ', e);
               }
            }
        };
    </script>
}