@{
    string activeMenu = PermissionNames.VberUserHelpInfo; //The menu item will be active for this page.
    ViewBag.ActiveMenu = activeMenu;

    ViewBag.Title = "系统帮助管理";
   
}
<vc:breadcrumb active-menu="@activeMenu"></vc:breadcrumb>


<div class="d-flex flex-column flex-xl-row">
    <div class="flex-lg-row-fluid me-lg-10" id="content_body">
        <div id="content_body-container">

        </div>
    </div>
    <div class="flex-column flex-lg-row-auto w-100 w-xl-300px pt-10 mb-10">
        <div class="card card-flush bg-light mb-0 h-300px"
             data-kt-sticky="true"
             data-kt-sticky-name="docs-sticky-help"
             data-kt-sticky-offset="{default: false, xl: '200px'}"
             data-kt-sticky-width="{lg: '250px', xl: '300px'}"
             data-kt-sticky-left="auto"
             data-kt-sticky-top="85px"
             data-kt-sticky-animation="false"
             data-kt-sticky-zindex="95">
            <div class="card-header  justify-content-center" id="category_header">
                <div class="card-title text-primary ">
                    <h2>目录</h2>
                </div>
            </div>
            <div class="card-body pt-0 fs-5" id="category_body">
                <div id="vb_category_scroll" class="scroll-y me-n5 pe-5" data-kt-scroll="true" data-kt-scroll-height="auto" data-kt-scroll-wrappers="#category_body" data-kt-scroll-dependencies="#category_header" data-kt-scroll-offset="5px">
                    <div class="mb-0"  id="category_body-container">
					
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section scripts
{
    <script type="text/javascript">
        $(function () {
            $(".help-list .nav-item a").on("click",
                function () {
                    $('.help-list li').find('a').removeClass("active");
                    $(this).addClass("active");
                });
            QueryHelp();
        });
           function QueryHelp() {
                $.vbAjax4({
                    url: abp.appUrl + "Query/QueryHelpByMenu",
                    success: function (res) {
                        formatterHelps(res);
                    }
                });
                let $categoryBody = $('#category_body-container') ,$contentBody=$('#content_body-container');
                function formatterHelps(data) {
                    if (data && data.length) {
                        $categoryBody.empty();
                        $contentBody.empty();
                        data.forEach(function (v) {
                            var str1 = "", str2 = "";
                            for (var i = 0; i < v.helps.length; i++) {
                                var h = v.helps[i];
                                 str1 += `<li class="nav-item"><a class="nav-link" href="#syshelp_${h.id}"><span>${i + 1
                                    }）</span>${h.title}</a></li>`;
                                str2 += ` <div id="syshelp_${h.id}" class="no-select"><span>${i + 1}）</span>${h.title}</div>
                                <div class="help-content" data-id="${h.id}"> 
                                    <div class="w-100 h-100px d-flex justify-content-center align-items-center fs-4 text-primary">
                                        加载中... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                    </div>
                                </div>`;
                            }
                            var str3 = `<div class="card mb-5 p-0  bg-primary" id="help-info_list_${v.index}" >
                                    <div class="card-header text-inverse-primary min-h-50px" data-bs-toggle="collapse" data-bs-target="#vb_help-info_${v.index}">
                                        <div class="card-title fs-bolder text-inverse-primary">
                                            <span class="pe-2 ">${v.index}.</span>${v.menuName}
                                        </div>
                                    </div>
                                    <div class="card-body pt-0 pb-2 px-2 collapse bg-white" id="vb_help-info_${v.index}">
                                        <ul class="nav help-list me-5">${str1}</ul>
                                    </div>
                                </div>`;
                            $categoryBody.append(str3);
                            var str4 = `<div class="card bg-light-primary mb-5" id="help-detail_list_${v.index}">
                                    <div class="card-header" data-bs-toggle="collapse" data-bs-target="#vb_help-detail_${v.index}">
                                        <div class="card-title ps-4">
                                             <h4 class="mb-0"><span class="pr-2">${v.index}.</span>${v.menuName}</h4>
                                        </div> 
                                        <div class="card-toolbar">
                                             <div class="fw-bolder rotate collapsible" data-bs-toggle="collapse" data-bs-target="#vb_help-detail_${v.index}">
													<span class="ms-2 rotate-180">
														<!--begin::Svg Icon | path: icons/duotone/Navigation/Angle-down.svg-->
														<span class="svg-icon svg-icon-3">
															<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
																<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
																	<polygon points="0 0 24 0 24 24 0 24"></polygon>
																	<path d="M6.70710678,15.7071068 C6.31658249,16.0976311 5.68341751,16.0976311 5.29289322,15.7071068 C4.90236893,15.3165825 4.90236893,14.6834175 5.29289322,14.2928932 L11.2928932,8.29289322 C11.6714722,7.91431428 12.2810586,7.90106866 12.6757246,8.26284586 L18.6757246,13.7628459 C19.0828436,14.1360383 19.1103465,14.7686056 18.7371541,15.1757246 C18.3639617,15.5828436 17.7313944,15.6103465 17.3242754,15.2371541 L12.0300757,10.3841378 L6.70710678,15.7071068 Z" fill="#000000" fill-rule="nonzero" transform="translate(12.000003, 11.999999) rotate(-180.000000) translate(-12.000003, -11.999999)"></path>
																</g>
															</svg>
														</span>
														<!--end::Svg Icon-->
													</span></div>
                                        </div>
                                    </div>
                                    <div class="card-body collapse show" id="vb_help-detail_${v.index}">${str2}</div>
                                </div>`;
                            $contentBody.append(str4);
                        });
                        $contentBody.find('.help-content').each(function () {
                            var $this = $(this);
                            var id = $(this).data('id');
                            $.vbAjax4({
                                url: abp.appUrl + "Query/QueryHelpDto?id=" + id,
                                success: function(res) {
                                    $this.html(res.content).fadeIn();
                                }
                            });
                        });
                    }
                }
            }

    </script>


}