{extend name="public/nas_base" /}
{block name="title"}
    {notempty name="article.seo_title"}<title>{$article.seo_title}</title>{else /}{__BLOCK__}{/notempty}
{/block}
{block name="seo"}
    {notempty name="article.seo_keywords"}
    <meta name="keywords" content="{$article.seo_keywords}" />
    <meta name="description" content="{$article.seo_desc}" />
    {else /}
    {__BLOCK__}
    {/notempty}
{/block}
{block name="style"}
<link rel="stylesheet" href="__CSS__/topic_nas_help-detail.css"/>
{/block}
{block name="main"}
<div class="orico_Page_index">
    <div class="narshelpdetailPc">
        <!-- top 搜索-->
        <div class="narsssmain">
            <div class="ml">{:lang('topic_nas_help.module_title')}/{:lang('topic_nas_help.article_section_title')}</div>
            <div class="nars-hlp-search">
                <input id="search-input" placeholder="{:lang('topic_nas_help.search_input_placeholder')}" autocomplete="off" />
                <img src="__IMAGES__/nas_help_detail_search.png" class="ssimg">
            </div>
            <!-- 下拉搜索框 -->
            <div class="dropdown" id="dropdown"></div>
        </div>
        <!-- 目录-文章详情-锚点定位--->
        <div class="nars-help-content">
            <!--目录 -->
            <div class="nars-hlpdt-ml">
                {notempty name="article_categorys"}
                <div class="nav-tree">
                    {volist name="article_categorys" id="ac"}
                    <div class="category">
                        <div class="category-title">
                            <div class="arrow"><img src="__IMAGES__/nas-jt.png" class="arrow" /></div>
                            <span>{$ac.name}</span>
                        </div>
                        <ul class="sub-list">
                            {volist name="ac.article" id="ar"}
                            <li><a href="{:url('/index/topic/nas/help_detail', ['id' => $ar.id])}" style="padding-top: 6px;">{$ar.title}</a></li>
                            {/volist}
                        </ul>
                    </div>
                    {/volist}
                </div>
                {/notempty}
            </div>
            <!--文章详情 -->
            <div class="nars-hlpdt-mm" id="rendered-content">{$article.content|raw|default=''}</div>
            <!--锚点定位 -->
            <div class="nars-hlpdt-mr">
                <div id="title-list">
                    <h2 class="tt">{:lang('topic_nas_help.content')}</h2>
                    <ul></ul>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
    $(document).ready(function () {
        $('.category-title').click(function () {
            $(this).next('.sub-list').slideToggle();
            $(this).find('.arrow').toggleClass('rotate');
        });
        // 搜索
        $(document).on('click', function (e) {
            var target = $(e.target);
            if (!target.closest('.nhlp-search').length) {
                $('#dropdown').hide();
            }
        });
        var timeout = null;
        $('.nars-hlp-search input').on('focus input', function () {
            clearTimeout(timeout);
            var _this = this;
            timeout = setTimeout(function () {
                var keywords = $(_this).val();
                if (keywords == '') {
                    $('#dropdown').hide().html('');
                    return;
                }
                $.ajax({
                    url: "{:url('/index/topic/nas/help_search')}",
                    type: 'POST',
                    data: {
                        keywords: keywords
                    },
                    dataType: 'JSON',
                    success: function (r) {
                        var html = '';
                        if (r.code == 0) {
                            html = '<ul>'
                            $.each(r.data, function (k, v) {
                                html +=
                                    '<li><a href="{:url(\'/index/topic/nas/help_detail\')}?id=' + v.id + '">' + v.title + '</a></li>'
                            })
                            html += '</ul>'
                        }
                        $('#dropdown').show().html(html);
                    }
                })
            }, 300);
        })
        // 内容
        // 清空标题列表
        $("#title-list ul").empty();
        // 提取 h1 标题
        var h1Titles = $("#rendered-content").find("h3");
        h1Titles.each(function (index) {
            var title = $(this);
            var titleText = title.text();
            var titleId = "title-" + index;
            title.attr("id", titleId);
            var listItem = $("<li>");
            var link = $("<a>", {
                href: "#" + titleId,
                text: titleText
            });
            listItem.append(link);
            $("#title-list ul").append(listItem);
        });
    });
</script>
{/block}