{if !empty($relatedData['faq'])}
<div class="faq-related">
    <div class="related-title">
        <span class="biaoti">{:lang('zg_related_faq')}</span>
    </div>
    <div class="related-swiper ">
        <div class="swiper-container swiper-related swiper-related-faq">
            <div class="swiper-wrapper">
                {php}
                    $relatedDataFaq = array_chunk(is_array($relatedData['faq']) ? $relatedData['faq'] : ($relatedData['faq']->toArray() ?? []), 4);
                {/php}
                {foreach $relatedDataFaq as $relatedFaqList}
                <div class="swiper-slide">
                    <div class="faq-list fix">
                        {foreach $relatedFaqList as $relatedFaqKey => $relatedFaqItem}
                        <div class="faq-item">
                            <div class="item-box {if $relatedFaqKey==0} active {/if}">
                                <div class="faq-item-name {if $relatedFaqKey==0} active {/if}">
                                    {$relatedFaqItem.name|default=''}
                                </div>
                                <div class="faq-item-text" {if $relatedFaqKey==0}style="display: block;" {/if}>
                                    <div class="text ">
                                        <p>{$relatedFaqItem.answer|default=''}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {/foreach}
                    </div>
                </div>
                {/foreach}
            </div>
        </div>
        <div class="swiper-button-next swiper-button related-button-next  related-button-next-faq"> </div>
        <div class="swiper-button-prev swiper-button related-button-prev  related-button-prev-faq"> </div>
    </div>
    <script type="text/javascript">
        $(function() {
            $(".faq-item .faq-item-name").click(function(e) {
                e.preventDefault();
                $(".faq-item .faq-item-name").each(function (index, item) {
                    $(item).removeClass('active');
                    $(item).parent().removeClass('active');
                    $(item).next().slideUp();
                });
                var _this = $(this),
                    $next = _this.next();
                if ($next.is(":hidden")) {
                    $next.slideDown();
                    _this.addClass('active');
                    _this.parent().addClass('active');
                } else {
                    $next.slideUp();
                    _this.removeClass('active');
                    _this.parent().removeClass('active');
                }
            })
        })
    </script>
</div>
{/if}