{include file="header" /}
<link rel="stylesheet" href="/assets/xtu/support.css?v=20260410-1922">
<link rel="stylesheet" href="/assets/xtu/support-detail.css?v=20260428-1633">

<main class="support-page support-detail-page">
  <section class="support-detail-hero">
    <div class="support-container support-detail-hero-inner">
      <div class="support-detail-hero-copy">
        <h1>{if !empty($supportProject.title)}{$supportProject.title}{elseif !empty($title)}{$title}{/if}</h1>
        <p>{:cms_t('support_product_support','产品支持')}</p>
      </div>
      <div class="support-detail-hero-media" aria-hidden="true">
        <img src="{$supportProject.thumb}" alt="{if !empty($supportProject.title)}{$supportProject.title}{else /}{:cms_t('support_product_support','产品支持')}{/if}">
      </div>
    </div>
  </section>

  <section class="support-detail-main support-container">
    <div class="support-detail-tabs" role="tablist" aria-label="{if getCategory($catid,'catname')}{:getCategory($catid,'catname')}{else /}{:cms_t('support_product_tab_switch','产品支持内容切换')}{/if}">
      <button class="support-detail-tab is-active" type="button" role="tab" aria-selected="true" data-target="support-detail-panel-video">{:getCategory(34,'catname')}</button>
      <button class="support-detail-tab" type="button" role="tab" aria-selected="false" data-target="support-detail-panel-faq">{:getCategory(25,'catname')}</button>
      <button class="support-detail-tab" type="button" role="tab" aria-selected="false" data-target="support-detail-panel-guide">{:getCategory(35,'catname')}</button>
      <button class="support-detail-tab" type="button" role="tab" aria-selected="false" data-target="support-detail-panel-download">{:getCategory(40,'catname')}</button>
    </div>

    <div class="support-detail-panels">
      <section class="support-detail-panel is-active" id="support-detail-panel-video" role="tabpanel">
        {if !empty($supportVideoTabs) && !empty($supportVideoHasContent)}
        <div class="support-detail-subtabs">
          {volist name="supportVideoTabs" id="videoTab"}
          <button class="support-detail-subtab {if $i==1}is-active{/if}" type="button" data-target="video-group-{$videoTab.id}">{$videoTab.catname}</button>
          {/volist}
        </div>
        <div class="support-detail-subpanels">
          {volist name="supportVideoTabs" id="videoPanel"}
          <div class="support-detail-subpanel {if $i==1}is-active{/if}" id="video-group-{$videoPanel.id}" {if $i!=1}hidden{/if}>
            <div class="support-video-grid" data-collapsible="video" data-visible-count="6">
              {volist name="supportVideoMap[$videoPanel['id']]" id="videoItem"}
              <a class="support-video-card" href="{$videoItem.url|default='javascript:;'}">
                <span class="support-video-card-media"><img src="{$videoItem.thumb}" alt="{$videoItem.title}"></span>
                <span class="support-video-card-title">{$videoItem.title}</span>
              </a>
              {/volist}
            </div>
            {if empty($supportVideoMap[$videoPanel['id']])}<div class="support-empty-state">{:cms_t('support_empty_video','暂无相关视频教程')}</div>{/if}
            <div class="support-more-wrap" hidden><button class="support-more-btn" type="button" data-more-text="{:cms_t('support_view_more','查看更多')}" data-less-text="{:cms_t('support_view_less','收起更多')}">{:cms_t('support_view_more','查看更多')}</button></div>
          </div>
          {/volist}
        </div>
        {else /}
        <div class="support-video-grid" data-collapsible="video" data-visible-count="6">
          {volist name="supportVideoDirect" id="videoItem"}
          <a class="support-video-card" href="{$videoItem.url|default='javascript:;'}">
            <span class="support-video-card-media"><img src="{$videoItem.image|default='/uploads/20260409/15d257a4faf1bc9aadd0095112b6b7f7.png'}" alt="{$videoItem.title}"></span>
            <span class="support-video-card-title">{$videoItem.title}</span>
          </a>
          {/volist}
        </div>
        {if empty($supportVideoDirect)}<div class="support-empty-state">{:cms_t('support_empty_video','暂无相关视频教程')}</div>{/if}
        <div class="support-more-wrap" hidden><button class="support-more-btn" type="button" data-more-text="{:cms_t('support_view_more','查看更多')}" data-less-text="{:cms_t('support_view_less','收起更多')}">{:cms_t('support_view_more','查看更多')}</button></div>
        {/if}
      </section>

      <section class="support-detail-panel" id="support-detail-panel-faq" role="tabpanel" hidden>
        {if !empty($supportFaqTabs) && !empty($supportFaqHasContent)}
        <div class="support-detail-subtabs">
          {volist name="supportFaqTabs" id="faqTab"}
          <button class="support-detail-subtab {if $i==1}is-active{/if}" type="button" data-target="faq-group-{$faqTab.id}">{$faqTab.catname}</button>
          {/volist}
        </div>
        <div class="support-detail-subpanels">
          {volist name="supportFaqTabs" id="faqPanel"}
          <div class="support-detail-subpanel {if $i==1}is-active{/if}" id="faq-group-{$faqPanel.id}" {if $i!=1}hidden{/if}>
            <div class="support-article-list" data-collapsible="list" data-visible-count="5">
              {volist name="supportFaqMap[$faqPanel['id']]" id="faqItem"}
              <a class="support-article-item" href="{$faqItem.url|default='javascript:;'}"><span>{$faqItem.title}</span><i class="bi bi-chevron-right"></i></a>
              {/volist}
            </div>
            {if empty($supportFaqMap[$faqPanel['id']])}<div class="support-empty-state">{:cms_t('support_empty_faq','暂无相关常见问题')}</div>{/if}
            <div class="support-more-wrap" hidden><button class="support-more-btn" type="button" data-more-text="{:cms_t('support_view_more','查看更多')}" data-less-text="{:cms_t('support_view_less','收起更多')}">{:cms_t('support_view_more','查看更多')}</button></div>
          </div>
          {/volist}
        </div>
        {else /}
        <div class="support-article-list" data-collapsible="list" data-visible-count="5">
          {volist name="supportFaqDirect" id="faqItem"}
          <a class="support-article-item" href="{$faqItem.url|default='javascript:;'}"><span>{$faqItem.title}</span><i class="bi bi-chevron-right"></i></a>
          {/volist}
        </div>
        {if empty($supportFaqDirect)}<div class="support-empty-state">{:cms_t('support_empty_faq','暂无相关常见问题')}</div>{/if}
        <div class="support-more-wrap" hidden><button class="support-more-btn" type="button" data-more-text="{:cms_t('support_view_more','查看更多')}" data-less-text="{:cms_t('support_view_less','收起更多')}">{:cms_t('support_view_more','查看更多')}</button></div>
        {/if}
      </section>

      <section class="support-detail-panel" id="support-detail-panel-guide" role="tabpanel" hidden>
        {if !empty($supportGuideTabs) && !empty($supportGuideHasContent)}
        <div class="support-detail-subtabs">
          {volist name="supportGuideTabs" id="guideTab"}
          <button class="support-detail-subtab {if $i==1}is-active{/if}" type="button" data-target="guide-group-{$guideTab.id}">{$guideTab.catname}</button>
          {/volist}
        </div>
        <div class="support-detail-subpanels">
          {volist name="supportGuideTabs" id="guidePanel"}
          <div class="support-detail-subpanel {if $i==1}is-active{/if}" id="guide-group-{$guidePanel.id}" {if $i!=1}hidden{/if}>
            <div class="support-article-list" data-collapsible="list" data-visible-count="5">
              {volist name="supportGuideMap[$guidePanel['id']]" id="guideItem"}
              <a class="support-article-item" href="{$guideItem.url|default='javascript:;'}"><span>{$guideItem.title}</span><i class="bi bi-chevron-right"></i></a>
              {/volist}
            </div>
            {if empty($supportGuideMap[$guidePanel['id']])}<div class="support-empty-state">{:cms_t('support_empty_guides','暂无相关产品教程')}</div>{/if}
            <div class="support-more-wrap" hidden><button class="support-more-btn" type="button" data-more-text="{:cms_t('support_view_more','查看更多')}" data-less-text="{:cms_t('support_view_less','收起更多')}">{:cms_t('support_view_more','查看更多')}</button></div>
          </div>
          {/volist}
        </div>
        {else /}
        <div class="support-article-list" data-collapsible="list" data-visible-count="5">
          {volist name="supportGuideDirect" id="guideItem"}
          <a class="support-article-item" href="{$guideItem.url|default='javascript:;'}"><span>{$guideItem.title}</span><i class="bi bi-chevron-right"></i></a>
          {/volist}
        </div>
        {if empty($supportGuideDirect)}<div class="support-empty-state">{:cms_t('support_empty_guides','暂无相关产品教程')}</div>{/if}
        <div class="support-more-wrap" hidden><button class="support-more-btn" type="button" data-more-text="{:cms_t('support_view_more','查看更多')}" data-less-text="{:cms_t('support_view_less','收起更多')}">{:cms_t('support_view_more','查看更多')}</button></div>
        {/if}
      </section>

      <section class="support-detail-panel" id="support-detail-panel-download" role="tabpanel" hidden>
        {if !empty($supportDownloadTabs) && !empty($supportDownloadHasContent)}
        <div class="support-detail-subtabs">
          {volist name="supportDownloadTabs" id="downloadTab"}
          <button class="support-detail-subtab {if $i==1}is-active{/if}" type="button" data-target="download-group-{$downloadTab.id}">{$downloadTab.catname}</button>
          {/volist}
        </div>
        <div class="support-detail-subpanels">
          {volist name="supportDownloadTabs" id="downloadPanel"}
          <div class="support-detail-subpanel {if $i==1}is-active{/if}" id="download-group-{$downloadPanel.id}" {if $i!=1}hidden{/if}>
            <div class="support-article-list" data-collapsible="list" data-visible-count="5">
              {volist name="supportDownloadMap[$downloadPanel['id']]" id="downloadItem"}
              <a class="support-article-item" href="{$downloadItem[$supportDownloadField]|default='javascript:;'}" target="_blank"><span>{$downloadItem.title}</span><i class="bi bi-chevron-right"></i></a>
              {/volist}
            </div>
            {if empty($supportDownloadMap[$downloadPanel['id']])}<div class="support-empty-state">{:cms_t('support_empty_downloads','暂无相关下载文档')}</div>{/if}
            <div class="support-more-wrap" hidden><button class="support-more-btn" type="button" data-more-text="{:cms_t('support_view_more','查看更多')}" data-less-text="{:cms_t('support_view_less','收起更多')}">{:cms_t('support_view_more','查看更多')}</button></div>
          </div>
          {/volist}
        </div>
        {else /}
        <div class="support-article-list" data-collapsible="list" data-visible-count="5">
          {volist name="supportDownloadDirect" id="downloadItem"}
          <a class="support-article-item" href="{$downloadItem[$supportDownloadField]|default='javascript:;'}" target="_blank"><span>{$downloadItem.title}</span><i class="bi bi-chevron-right"></i></a>
          {/volist}
        </div>
        {if empty($supportDownloadDirect)}<div class="support-empty-state">{:cms_t('support_empty_downloads','暂无相关下载文档')}</div>{/if}
        <div class="support-more-wrap" hidden><button class="support-more-btn" type="button" data-more-text="{:cms_t('support_view_more','查看更多')}" data-less-text="{:cms_t('support_view_less','收起更多')}">{:cms_t('support_view_more','查看更多')}</button></div>
        {/if}
      </section>
    </div>
  </section>

  <section class="support-detail-contact support-container">
    {include file="support-contact-block" /}
  </section>

  {include file="footer-links" /}
</main>

<div class="support-video-modal" id="supportVideoModal" hidden>
  <div class="support-video-modal__backdrop" data-modal-close></div>
  <div class="support-video-modal__dialog" role="dialog" aria-modal="true" aria-label="{:cms_t('video_play','视频播放')}">
    <button class="support-video-modal__close" type="button" aria-label="{:cms_t('close','关闭')}" data-modal-close>×</button>
    <div class="support-video-modal__body">
      <video class="support-video-modal__player" controls playsinline preload="metadata"></video>
    </div>
  </div>
</div>

<script src="/assets/xtu/support.js?v=20260410-2041"></script>
<script src="/assets/xtu/support-detail.js?v=20260421-1941"></script>
{include file="footer" /}