@using WeOnlineApp.Configuration
@using WeOnlineApp.Views.Shared.Modals
@model WeOnlineApp.Question.Dto.QuestionDto
@{
    Layout = "~/Views/Shared/Layout/_Layout.Play.cshtml";
    ViewBag.Title = "问题详情";
    bool isAnswer = Model.QuestionState == QuestionStateDefinition.Answer;
}

@Html.Partial("~/Views/Play/_BoxBaseStyle.cshtml")
<style>
    .select-answer {
        font-weight: 600;
        color: #049e9a;
        border-color: #049e9a;
    }
       
    .box {
        width: 100%;
        height: calc(100vh - 20px);
        position: relative;
    }

    .answer-box {
        border: 2px solid var(--mainColor);
        margin: 15px 0;
        border-radius: 5px;
        position: relative;
    }

        .answer-box .answer-box {
            border-style: dotted;
            margin: 10px;
        }

    .answer-box .text {
        padding: 5px 10px;
        word-break: break-all;
        min-height: 60px;
        display: flex;
        align-items: center;
    }

    .answer-box .tool {
        border-top: 1px solid var(--mainColor);
        padding: 5px 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .answer-box .tool:not(:last-child) {
        border-bottom: 1px solid var(--mainColor);
    }
              

    .answer-box .answer-box .tool {
        border-top-style: dotted;
    }
    .answer-box     .answer-box .tool:not(:last-child) {
        border-bottom-style: dotted;
    }
    .answer-box .tool .name {
        font-size: 14px;
        color: #666;
    }

    .answer-box .tool .name strong {
        color: var(--mainColor);
        font-size: 16px;
    }

    .answer-box .tool .btn {
        padding: 3px 8px;
        font-size: 12px;
        margin: 0 5px;
    }

    .more-box {
        width: 100%;
        height: 200px;
        background: linear-gradient(rgba(255, 255, 255, .8), rgba(255, 255, 255, 1));
        position: absolute;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .has-answer {
        position: absolute;
        font-size: 20px;
        padding: 5px 10px;
        color: red;
        border: 3px solid red;
        opacity: 0.5;
        top: calc(50% - 20px);
        left: calc(50% - 35px);
        margin: 0 auto;
        transform: rotateZ(-25deg);
        z-index: 2;
    }
</style>
<div style="padding: 0 15px;" >
    <div class="row">
        <div class="col-sm-5">
            <div class="box">
                <div class="box-header">
                    <span>问题详情</span>
                    <div class="back-btn" style="left: 20px; right: auto">
                        @if (Model.CreatorUserId != AbpSession.UserId)
                        {
                             if (Model.IsFavorite)
                             {
                                 <button type="button" class="btn  btn-danger btn-sm" style="width: 80px;" onclick="Favorite(this, false)">取消收藏</button>
                             }
                             else
                             {
                                 <button type="button" class="btn  btn-success btn-sm" style="width: 80px;" onclick="Favorite(this, true)">收藏问题</button>
                             }
                        }
                     
                    </div> <div class="back-btn">

                        @if (!isAnswer)
                        {
                            <button type="button" class="btn  btn-outline-success btn-sm" style="width: 80px;" onclick="Answer('')">我要答疑</button>
                        }

                        <button type="button" class="btn  btn-outline-light btn-sm" style="width: 80px;" onclick="Back()">返回课程</button>
                    </div>
                   
                </div>
             

                <div class="box-body scroll">
                    <dl class="dl">
                        <dt>问题标题：</dt>
                        <dd>@Model.Title</dd>
                    </dl>
                    <dl class="dl">
                        <dt>问题详情：</dt>
                        <dd  id="has-answer-box" style="position: relative">
                            @Model.ContentInfo
                            @if (isAnswer)
                            {
                                <div class="has-answer">已解答</div>
                            }
                        </dd>

                    </dl>
                    @if (Model.Camp != null)
                    {
                        <dl class="dl">
                            <dt>课程名称：</dt>
                            <dd>@Model.Camp.Name</dd>
                        </dl>

                        <dl class="dl">
                            <dt>课程主题：</dt>
                            <dd>@Model.Camp.PackageName</dd>
                        </dl>

                        <dl class="dl">
                            <dt>课程目标：</dt>
                            <dd>@Model.Camp.Purposes</dd>
                        </dl>
                        <dl class="dl">
                            <dt>课程积分：</dt>
                            <dd>@Model.Camp.SubjectPoint 分</dd>
                        </dl>
                    }

                </div>
            </div>
        </div>
        <div class="col-sm-7">
            <div class="box">
                <div class="box-header">
                    <span>答疑详情</span>
                    <div class="back-btn">
                        @*<button type="button" class="btn  btn-outline-light btn-sm" style="width: 80px;" onclick="Back()">返回课程</button>*@
                    </div>
                </div>
                <div class="box-body scroll" style="padding-bottom: 0">
                    <div id="answer-box" style="position: relative">
                        @if (Model.Answers != null && Model.Answers.Any())
                        {
                            foreach (var a in Model.Answers)
                            {
                                var isAnswer2 = isAnswer && a.AnswerState == AnswerStateDefinition.Answer;
                                <div class="answer-box" id="qa-@(a.Id)">
                                    @if (isAnswer2)
                                    {
                                        <div class="has-answer">已采纳</div>
                                    }
                                    <div class="text">@(a.ContentInfo)</div>
                                    <div class="tool">
                                        <div class="name">
                                            <strong>@(a.RealName)</strong>&nbsp;&nbsp;@(a.CreationTime.ToString("yyyy-MM-dd HH:mm:ss"))
                                        </div>
                                        <div class="btn-box">
                                            @if (!isAnswer && Model.CreatorUserId == AbpSession.UserId && a.UserName != AbpSession.UserName)
                                            {
                                                <button type="button" class="select-answer btn btn-outline-info btn-sm" onclick="SelectAnswer('@(a.Id)')">采纳答疑</button>
                                            }
                                            @if (a.ChildrenCount > 0)
                                            {
                                                <button type="button" class="btn btn-info btn-sm" data-type="2" onclick="QueryAnswer(this, '@(a.Id)')">查看回复(@(a.ChildrenCount))</button>
                                            }
                                            @if (!isAnswer)
                                            {
                                                <button type="button" class="btn btn-info btn-sm" onclick="Answer('@(a.Id)')">回复答疑</button>
                                            }
                                        </div>

                                    </div>
                                </div>
                            }

                            if (Model.Answers.Count == IwbConsts.AnswerTakeCount)
                            {
                                <div class="more-box">
                                    <button type="button" class="btn btn-danger" data-type="1" onclick="QueryAnswer(this, '', '@(Model.Id)')">查看更多</button>
                                </div>
                            }
                        }
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
@section modal
{
    @{
        var modal2 = new ModalViewModel("我要答疑", "", new ModalBodyViewModel(new List<Input>()
        {
            new InputHide("id"),
            new InputHide("questionNo"),
            new InputHide("answerNo"),
            new Input("campName", "课程名称",placeholder:"未选择课程").SetNotRequired().SetDisabled(),
            new Input("title", "问题标题").SetDisabled(),
            new InputTextarea("contentInfo", "答疑内容"),
        }, "form-a"), "modal-a");
    }
    @Html.Partial("Modals/_Modal", modal2)
}

@section scripts
{
    <script>
        $(function() {
            OverlayScrollbar($('.scroll'));
        });

        function Back() {
            window.location.href = "@Url.Action("PlayList", "Play")";
        }

        function Answer(answerNo) {
            OpenModal({
                url: abp.appUrl + "Question/AddAnswer",
                modal: "modal-a",
                data: {
                    questionNo: '@(Model.Id)',
                    answerNo: answerNo,
                    title: '@(Model.Title)',
                    campName: '@(Model.Camp == null ? "" : Model.CampName)'
                },
                success: function(res) {
                    var str = AnswerFormatter(res, 1);
                    if (answerNo) {
                        $('#qa-' + answerNo + '>.tool').after(str);
                    } else {
                        $('#answer-box').prepend(str);
                    }
                }
            });
        }
        function SelectAnswer(no) {
            $.iwbAjax4({
                url: abp.appUrl + "Question/SelectAnswer",
                data: { id: '@(Model.Id)', answerNo:no},
                success: function() {
                    $('#has-answer-box').append('<div class="has-answer">已解答</div>');
                    $('#qa-' + no).append('<div class="has-answer">已采纳</div>');
                    $('.select-answer').remove();
                }
            });
        }
        function Favorite(that,favorite) {
            $.iwbAjax4({
                url: abp.appUrl + "Question/Favorite",
                data: { id: '@(Model.Id)', isFavorite: favorite },
                success: function () {
                    if (favorite) {
                        $(that).removeClass('btn-success').addClass('btn-danger').text('取消收藏');
                    } else {
                        $(that).removeClass('btn-danger').addClass('btn-success').text('收藏问题');
                    }
                    abp.message.success(favorite?'收藏成功':'取消成功', "收藏问题");
                }

            });
        }

        function QueryAnswer(that, answerNo, questionNo) {
            var skip , take = 5;
            var type = $(that).data('type');
            var $that = type == 1 ? $('#answer-box') : $(that).closest('.answer-box');
            skip = $that.children('.answer-box').length;
            $.iwbAjax4({
                url: abp.appUrl + "Question/GetChildAnswer",
                data: { questionNo: questionNo, answerNo: answerNo, skip: skip, take: take },
                success: function(res) {

                    if (type == 2) {
                        $(that).remove();
                        type = 3;
                    }
                    $that.children('.more-box').remove();
                    var str = AnswersFormatter(res, type);
                    if (str) {
                        if (type == 1) {
                            $('#answer-box').append(str);
                        } else {
                            $('#qa-' + answerNo).append(str);
                        }

                    }
                    if (res && res.length == take) {
                        str =
                            '<div class="more-box"><button type="button" data-type="{0}" class="btn btn-danger" onclick="QueryAnswer(this,\'{1}\',\'{2}\')">查看更多</button></div>'
                                .format(type, answerNo, questionNo);
                        $that.append(str);
                    }

                }
            });
        }

        function AnswersFormatter(data, type) {
            var str = '';
            if (data && data.length) {
                data.forEach(function(v) {
                    str += AnswerFormatter(v, type);
                });
            }

            return str;
        }

        function AnswerFormatter(data, type) {
            var str = '';
            if (data) {
                str += '<div class="answer-box" id="qa-{0}">'.format(data.id);
                str += '<div class="text">{0}</div>'.format(data.contentInfo);
                str += '<div class="tool">';
                str += '<div class="name"><strong>{0}</strong>&nbsp;&nbsp;{1}</div>'.format(data.realName,new Date
                    (data.creationTime).format("yyyy-MM-dd hh:mm:ss"));
                str += '<div class="btn-box">';
                if (type == 1 &&
                    data.UserName != '@(AbpSession.UserName)' &&
                    data.questionState == @(QuestionStateDefinition.New)) {
                    str +=
                        '<button type="button" class="select-answer btn btn-outline-info btn-sm" onclick="SelectAnswer(\'{0}\')">采纳答疑</button>'
                        .format(data.id);
                }
                str += data.childrenCount > 0
                    ? '<button type="button" class="btn btn-info btn-sm" data-type="2" onclick="QueryAnswer(this,\'{0}\')">查看回复({1})</button>'
                    .format(data.id, data.childrenCount)
                    : '';
                str += '<button type="button" class="btn btn-info btn-sm" onclick="Answer(\'{0}\')">回复答疑</button>'
                    .format(data.id);
                str += '</div>';
                str += '</div>';
                str += '</div>';
            }
            return str;
        }
    </script>
}