{extend name="public/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="header"}
<!-- 重置header头为空 -->
{/block}
{block name="main"}
<div class="oricoEGapp">
    <div class="narshelpCenterdetail-app">
        <div class="headtop">
            {eq name=":cookie('think_lang')" value="zh-cn"}
            <a href="{:url('/index/topic/nas/index')}">
                {else/}
                <a>
                    {/eq}
                    <img src="__IMAGES__/logo.png" class="logoicoimg">
                </a>
                <div style="display: flex;">
                    <img src="__IMAGES__/fenlei.png" class="ssicoimg" id="flico">
                    <img src="__IMAGES__/sousuo.png" class="ssicoimg" id="ssico" style="margin-right:32px">
                </div>
        </div>
        <!-- 文章内容 -->
        <div class="ql-container">
            <div id="rendered-content" class="nhlp-app-content ql-editor">
                {$article.content|raw|default=''}
            </div>
        </div>
        <!-- 搜索 -->
        <div class="nhlpapp-search">
            <div class="nhlpappshtop">
                <div class="nhlpapp-shdiv">
                    <input class="nhlp-ipt" id="search-input" placeholder="{:lang_i18n('请输入搜索关键字,如安装赛博云空间,影视库')}"
                        autocomplete="off">
                    <img src="__IMAGES__/ssapp.png" class="searchimg">
                </div>
                <span class="closetx">{:lang_i18n('取消')}</span>
            </div>
            <div class="nhlpappline"></div>
            <!-- 下拉搜索框 -->
            <div class="dropdown" id="dropdown"></div>
        </div>
        <!-- 分类文章目录 -->
        <div class="nhlpapp-pagescate" {:style(['display'=> $Request.get.view == 'more' ? 'block' : 'none'])}>
            <div class="nars-hlpdt-ml">
                {notempty name="article_categorys"}
                <div class="nav-tree">

                    
                    {volist name="article_categorys" id="ac" key="idx"}
                    <div class="categoryhelp">
                        <div class="categoryhelp-title">
                            <div>
                                <img src="__IMAGES__/nars-jt.png"
                                    class="arrow {if condition='$ac.id == $Request.get.cid'}rotate{/if}">
                            </div>
                            <span>{$ac.name}</span>
                        </div>
                        <ul class="sub-list" {if condition='$ac.id == $Request.get.cid' }style="display: block;" {/if}>
                            {volist name="ac.child" id="ad"}
                            <li class="two-mues">
                                <a href="#" class="two-a">
                                    <div><img src="__IMAGES__/nars-jt.png"
                                              class="arrow {if condition='$ad.id == $Request.get.pid'}rotate{/if}">
                                    </div>
                                    <span>{$ad.name}</span>
                                </a>
                                <ul class="thress-mues" {if condition='$ad.id == $Request.get.pid' }style="display: block;" {/if}>
                                    {volist name="ad.article" id="ae"}
                                    <li>
                                        <a href="{:url('/index/topic/nas/help_detail', ['cid' => $ac.id ,'pid' => $ad.id, 'id' => $ae.id])}"
                                           style="margin-left:18%;padding: 0.4rem;">{$ae.title}</a>
                                    </li>
                                    {/volist}
                                </ul>
                            </li>
                            {/volist}
                            {volist name="ac.article" id="ar"}
                            <li>
                                <a href="{:url('/index/topic/nas/help_detail', ['cid' => $ac.id , 'id' => $ar.id])}"
                                    style="padding-top: 6px;">
                                    {$ar.title}
                                </a>
                            </li>
                            {/volist}
                        </ul>
                    </div>
                    {/volist}



                </div>
                {/notempty}
            </div>
        </div>
        <!-- 顶部国家选择-->
        <div class="top-country">
            <div class="mask"></div>
            <div class="action-sheet">
                <div class="menu-title">
                    <div class="menu-name">{:lang_i18n('请择地区')}</div>
                    <div class="close-icon">
                        <img src="__IMAGES__/close.png">
                    </div>
                </div>
                <ul>
                    {volist name="header_languages" id="la"}
                    <li>
                        <a href="{$la.lang_url}" target="_blank">
                            <img src="{$la.lang_icon}">{$la.country_en_name} - {$la.lang_en_name}
                        </a>
                    </li>
                    {/volist}
                </ul>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
    $(document).ready(function () {
        // 点击顶部分类图标
        $('#flico').click(function () {
            $('.nhlpapp-pagescate').toggle();
            // 检查分类菜单是否显示
            if ($('.nhlpapp-pagescate').is(':visible')) {
                // 如果分类菜单显示，则隐藏文章内容
                $('#rendered-content').hide();
                $('.footer').hide()
            } else {
                // 如果分类菜单隐藏，则显示文章内容
                $('#rendered-content').show();
                $('.footer').show()
            }
        });
        // 点击分类的交互
        $('.categoryhelp-title').click(function () {
            $(this).next('.sub-list').slideToggle();
            $(this).find('.arrow').toggleClass('rotate');
        });
        //分类二三级交互
        $('.two-a').click(function(e) {
			e.preventDefault();
			e.stopPropagation(); // 阻止事件冒泡

			// 切换当前二级菜单的箭头方向
			$(this).find('.arrow').toggleClass('rotate');

			// 切换对应的三级菜单显示/隐藏
			$(this).siblings('.thress-mues').slideToggle();
		});
        // 点击顶部搜索图标-点击取消关闭
        $('#ssico').click(function () {
            $('.nhlpapp-pagescate').hide();
            $('.nhlpapp-search').show();
        });
        $('.closetx').click(function () {
            $('.nhlpapp-search').hide();
        });
        // 顶部国家选择
        $('.top-country-toggle').click(function () {
            $(".mask,.action-sheet").show();
        })
        $('.top-country .close-icon').click(function () {
            $(".mask,.action-sheet").hide();
        })
        // 搜索
        var timeout = null;
        $('#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 class="search-item" href="{:url(\'/index/topic/nas/help_detail\')}?id=' + v.id + '">' + v.title + '</a></li>'
                            })
                            html += '</ul>'
                        }
                        $('#dropdown').show().html(html);
                    }
                })
            }, 300);
        });
        // 英文截断处理
        // 目标容器：富文本内容所在的元素
        const contentContainer = $('#rendered-content');

        // 遍历所有包含文本内容的标签（p、h1-h6、strong等）
        contentContainer.find('*').each(function () {
            const $element = $(this);
            const htmlContent = $element.html();

            // 条件1：排除内容仅为一个&nbsp;的标签（如<p>&nbsp;</p>）
            if (htmlContent.trim() === '&nbsp;') {
                return; // 不处理，继续下一个元素
            }

            // 条件2：检查是否包含&nbsp;且有实际文本内容
            if (htmlContent.includes('&nbsp;')) {
                // 将所有&nbsp;替换为普通空格（有效占位符，支持单词完整换行）
                const newContent = htmlContent.replace(/&nbsp;/g, ' ');
                $element.html(newContent);
            }
        });
    });
</script>
{/block}