{extend name="public/nas_base" /}
{block name="style"}
<link rel="stylesheet" href="__CSS__/topic_nas_help.css"/>
{/block}
{block name="main"}
<div class="orico_Page_index">
    <!-- 帮助中心 -->
    <div class="narshelpCenterPc">
        <!-- banner-搜索 -->
        <div class="pagetopbg">
            <img src="__IMAGES__/nas_help_banner.jpg" class="hpbgimg" />
            <div class='nhlp-search'>
                <input class="nhlp-ipt" id="search-input" placeholder="{:lang('topic_nas_help.search_input_placeholder')}" autocomplete="off" />
                <img src="__IMAGES__/nas_help_search.png" class="searchimg" />
            </div>
            <!-- 下拉搜索框 -->
            <div class="dropdown" id="dropdown">
                <ul>
                    <li>拿到产品后我该如何安装使用?</li>
                </ul>
            </div>
        </div>
        <!-- 使用教程 -->
        {notempty name="article_categorys"}
        <div class="nhlppart1">
            <h1 class="helph1">{:lang('topic_nas_help.article_section_title')}</h1>
            <div class="nhlp-row">
                {volist name="article_categorys" id="vo" key="idx"}
                <div class="nhlpit {gt name='idx' value='6'}nhlpit-w{/gt}">
                    <div class="nhlptl">
                        <img src="{$vo.icon}" class="bhlpicoimg" />{$vo.name}
                    </div>
                    <div class="nhlp-tx-list">
                        {volist name="vo.article" id="va" key="index"}
                        <a class="txrow" href="{:url('/index/topic/nas/help_detail', ['id' => $va.id])}">
                            <div class="nhlp-point"></div>
                            <span class="nhlpsp">{$va.title}</span>
                            <span class="narhelpgoimg">
                                <img src="__IMAGES__/nas-jt.png" />
                            </span>
                        </a>
                        {egt name="index" value="3"}
                        <div class="ckgdbt">{:lang('topic_nas_help.view_more')} ></div>
                        {/egt}
                        {/volist}
                    </div>
                </div>
                {/volist}
            </div>
        </div>
        {/notempty}
        <!-- 联系我们 -->
        {notempty name="contacts"}
        <div class="nhlp-lxwm">
            <h1 class="lxwmtitle">{:lang('topic_nas_help.contact_section_title')}</h1>
            <div class="nhlp-row">
              <div class="nhlp-row-content">
                {volist name="contacts" id="co" key="idx" offset="0" length="3"}
                <a class="nhlplxwmit nhlplxwmit-w1" {notempty name="co.link"}href="{$co.link}"{/notempty} {eq name="idx" value="3"}style="margin-right: 0;"{/eq}>
                    <img src="{$co.image}" class="lximg" />
                    {if condition="!empty($co.desc) && str_contains($co.desc, '<img')"}
                    <img src="{:get_path_from_img_tag($co.desc)}" class="lxewmimg" />
                    <span class="t1" {:style(['color'=>$co.title_txt_color])}>{$co.title}</span>
                    {else/}
                    <span class="t1" {:style(['color'=>$co.title_txt_color])}>{$co.title}</span>
                    <span class="t2" {:style(['color'=>$co.desc_txt_color])}>{$co.desc|raw}</span>
                    {/if}
                </a>
                {/volist}
              </div>
              <div class="nhlp-row-content">
                {volist name="contacts" id="co" key="idx" offset="3"}
                <a class="nhlplxwmit nhlplxwmit-w2" {notempty name="co.link"}href="{$co.link}"{/notempty} {eq name="idx%4" value="0"}style="margin-right: 0;"{/eq}>
                    <img src="{$co.image}" class="lximg" />
                    {if condition="!empty($co.desc) && str_contains($co.desc, '<img')"}
                    <img src="{:get_path_from_img_tag($co.desc)}" class="lxewmimg" />
                    <span class="t1" {:style(['color'=>$co.title_txt_color])}>{$co.title}</span>
                    {else/}
                    <span class="t1" {:style(['color'=>$co.title_txt_color])}>{$co.title}</span>
                    <span class="t2" {:style(['color'=>$co.desc_txt_color])}>{$co.desc|raw}</span>
                    {/if}
                </a>
                {/volist}
              </div>
            </div>
        </div>
        {/notempty}
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
    $(document).ready(function () {
        $(document).ready(function () {
            // 监听输入框内容变化
            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 href="{:url(\'/index/topic/nas/help_detail\')}?id=' + v.id + '">' + v.title + '</a></li>'
                                })
                                html += '</ul>'
                            }
                            $('#dropdown').show().html(html);
                        }
                    })
                }, 300);
            })
            $(document).on('click', function (e) {
                var target = $(e.target);
                if (!target.closest('.nhlp-search').length) {
                    $('#dropdown').hide();
                }
            });
            $('.nhlplxwmit:not(:first)').hover(function () {
                // 当鼠标移入时，显示.lxewmimg 并隐藏.lximg
                var lxe = $(this).find('.lxewmimg');
                var lxi = $(this).find('.lximg');
                if (lxe.length > 0) {
                    lxe.show();
                    lxi.hide();
                }
            }, function () {
                // 当鼠标移出时，隐藏.lxewmimg 并显示.lximg
                var lxe = $(this).find('.lxewmimg');
                var lxi = $(this).find('.lximg');
                if (lxe.length > 0) {
                    lxe.hide();
                    lxi.show();
                }
            });
        });
    })
</script>
{/block}