@using WeApp.Helpers
@model WeApp.TrainingCamp.Dto.CampDto
@{
    string id = "base-info";
}
@Html.Partial("__/_AreaBox", $"演练信息#{id}")
<div style="display: none" id="@id-pre">
    <div class="base-info">
        @*<h4>演练基本信息</h4>*@
        <dl><dt>名称:</dt><dd>@Model.Name</dd></dl>
        <dl><dt>目标:</dt><dd>@Model.Description </dd></dl>
        <dl><dt>演练阶段:</dt><dd id="step"></dd></dl>
        <dl class="d-flex align-items-center" id="step-progress">
            <dt class="progress " style="width: 85%; border-radius: 10px; background: #041f3c;">
                <span class="progress-bar bg-success progress-bar-striped" style="width: 0%; border-radius: 10px;"></span>
            </dt>
            <dd>
                <span>0</span>%
            </dd>
        </dl>
    </div>
</div>

@using (Html.BeginScripts())
{
    <script id="base-info-script">
        var $baseInfoBody = $('#@id .box-body');
        $baseInfoBody.html($('#@id-pre').html());
        $(function() {
            GetStepInfo('@(Model.Id)');
            OverlayScrollbar($baseInfoBody.closest('.scroll-box'));
        });

        function GetStepInfo(no) {
            $.iwbAjax4({
                url: abp.appUrl + 'Query/GetCampStep?no=' + no,
                success: function(res) {
                    StepFormatter(res);
                }
            });
        }

        function StepFormatter(data) {
            if (data) {
                $("#step").html(data.name);
                $('#step-progress .progress-bar').animate({ "width": `${data.progress}%` });
                $('#step-progress dd span').html(data.progress);
            }
        }
        iwbHub.client.getUpdateStep = function(msg) {
            console.log('getUpdateStep: ', msg);
            if (msg) {
                try {
                    var data = typeof msg == 'string' ? JSON.parse(msg) : msg;
                    if (data) {
                        StepFormatter(data);
                    }
                } catch (e) {
                    console.log('getUpdateStep: ', e);
                }
            }
        };
    </script>
}