{extend name="web/official_common/pc/base" /}

{block name="content"}

{if input('param.pid') == 19 || (isset($res['name']) && strpos($res['name'],'服务') !== false)}
    <!-- 引入纳海川服务独立页 -->
    {include file="web/official_product/service_page" /}
{elseif input('param.pid') == 22 || (isset($res['name']) && strpos($res['name'],'产品') !== false) /}
    <!-- 引入纳海川产品独立页 -->
    {include file="web/official_product/product_page" /}
{else/}
    <!-- 通用产品/服务列表 开始 -->
    <div class="product nhc-container" style="padding: 110px 0 60px;">
        <div id="right" style="width: 100%;">
            <div class="right_title" style="margin-bottom: 24px;">
                <div id="location" class="nhc-breadcrumb">
                    <a href="/" target="_self">首页</a> &gt;&gt;
                    <a href="javascript:;">{:ze($res,'name')}</a>
                    {if !empty($son_data)}
                    &gt;&gt; <a href="javascript:;">{:ze($son_data,'name')}</a>
                    {/if}
                </div>
                <h2 style="font-family: var(--font-serif); font-size: 28px; color: var(--text-primary); margin-top: 12px;">
                    {:ze($res,'name')}
                </h2>
            </div>
            {if !empty($res['son'])}
            <div id="subchannel_main" style="margin-bottom: 32px;">
                <div id="subchannel">
                    <ul class="subchannellist" style="display: flex; gap: 12px; list-style: none;">
                        {foreach $res['son'] as $item}
                            <li class="depth1 {if $item['is_choose']}active{/if}" style="padding: 6px 18px; border: 1px solid var(--border-color); border-radius: 4px; background: {if $item['is_choose']}var(--primary){else}#FFF{/if};">
                                <a href="{:get_cate_url($item)}" style="color: {if $item['is_choose']}#FFF{else}var(--text-secondary){/if};">{:ze($item,'name')}</a>
                            </li>
                        {/foreach}
                    </ul>
                </div>
            </div>
            {/if}
            <div class="right_body minwidth">
                <ul class="productlist" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; list-style: none;">
                    {foreach $data as $index => $item}
                    <li style="background: #FFF; border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-subtle);">
                        <a href="{:addon_url('official/web.official_product/details',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.sid'),':id'=>$item['id']])}" target="_blank" class="info_wrap" style="display: block; text-decoration: none;">
                            <div class="InfoPicture" style="height: 180px; overflow: hidden; background: #F8FAFC; display: flex; align-items: center; justify-content: center;">
                                <img src="{$item['image']}" title="{$item['title']}" alt="{$item['title']}" style="max-width: 100%; max-height: 100%; object-fit: cover;">
                            </div>
                            <div class="InfoWrap" style="padding: 16px;">
                                <div class="InfoTitle" style="font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: var(--text-primary);">
                                    {$item['title']}
                                </div>
                            </div>
                        </a>
                    </li>
                    {/foreach}
                </ul>
                <div class="page_custom" style="margin-top: 40px; text-align: center;">
                    <div class="page_son">
                        {$data->render(['pid'=>(int)input('param.pid'),'sid'=>(int)input('param.sid')])}
                    </div>
                </div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
    <!-- 通用产品/服务列表 结束 -->
{/if}

{/block}