@using WeApp.Authorization
@model List<WeApp.BaseInfo.SysHelp>
@{
    ViewBag.ActiveMenu = PermissionNames.PagesUserHelpInfo;
    ViewBag.Title = "系统帮助说明";
}
@section css
{
    <style>
        .i_category {
            z-index: 2;
            position: fixed !important;
            right: 10px;
            top: 20vh;
            width: 200px;
        }
       
        .help .nav-item {

            float: left;
            width: 100%;
            border-top: 1px solid #f4f4f4;
            margin-left: 0px !important;
        }
            .help .nav-item:last-of-type {
                border-bottom: 1px solid #f4f4f4;
            }
            .help .nav-item a {
                text-align: left;
                border-radius: 0;
                border-left: 3px solid transparent;
                background-color: transparent !important;
            }
            .help .nav-item a.active {
                color: #583d9c !important;
                font-weight: 600 !important;
                border-left: 3px solid #583d9c !important;
            }
        .quote {
            display: block;
            margin-bottom: 10px;
            padding: 15px;
            line-height: 22px;
            font-size: 16px;
            font-weight: 600;
            color: #583d9c;
            border-left: 5px solid #583d9c;
            border-radius: 0 2px 2px 0;
            background-color: #f2f2f2;
            cursor: pointer;
        }
        
        .quote:not(:first-of-type) {
            margin-top: 20px;
        }
    </style>
}
<div class="content-header">
   
</div>
<div class="content help">
    <div class="i_category">
        <!--begin::Portlet-->
        <div class="m-portlet">
            <div class="m-portlet__head" style="justify-content: center;height: 40px;line-height: 40px;background: #575962;border-radius: 4px 4px 0 0;">
                <a>
                    <h3 class="m-portlet__head-text" style="display: inline-block;font-size: 20px;margin: 0;line-height: 40px;color: #eee; font-weight: 600;justify-content: center;">
                        文档目录
                    </h3>
                </a> 
            </div>
            <div class="m-portlet__body" style="padding: 0;border-radius: 0 0 4px 4px">
                <ul class="nav nav-pills nav-fill help" role="tablist">
                    @{
                        foreach (var help in Model)
                        {
                            <li class="nav-item"><a class="nav-link " href="#syshelp_@help.Id"> @help.HelpTitle</a></li>
                        }
                    }
                </ul>
            </div>
        </div>

        <!--end::Portlet-->
    </div>
    <div class="col-md-12">
        <!--begin::Portlet-->
        <div class="m-portlet" style="padding:10px; border-radius: 8px; background:#f5f5f5;margin-bottom: 0;">
            @*<div class="m-portlet__head" style="justify-content: center;height: 40px;line-height: 40px;background: #575962;border-radius: 4px 4px 0 0;">
                    <a>
                        <h3 class="m-portlet__head-text" style="display: inline-block;font-size: 20px;margin: 0;line-height: 40px;color: #eee; font-weight: 600;justify-content: center;">
                            文档目录
                        </h3>
                    </a> 
                </div>*@
            <div class="m-portlet__body" style="height: calc(100vh - 170px); overflow: auto;padding: 5px;">
                @{
                    foreach (var h in Model)
                    {
                        <div id="syshelp_@h.Id" class="quote no-select">
                            @Html.Raw(h.HelpTitle)
                        </div>
                        <div style="padding-left: 20px;">
                            @Html.Raw(h.HelpContent)
                        </div>
                    }
                }
            </div>
        </div>

        <!--end::Portlet-->
    </div>
</div>
@section scripts
{
    <script>
        $(function() {
            $(".help .nav-item a").on("click",
                function() {
                    var $other = $(this).parent().siblings();
                    $other.find('a').removeClass("active");
                    $(this).addClass("active");
                });
            
        });
    </script>
}