{extend name="public/base" /}

{block name="style"}
<link rel="stylesheet" href="__CSS__/category.css">

<script type="text/javascript">
  (function (doc, win) {
        var docEl = doc.documentElement;
        var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';

        function setRootFontSize() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            var fontSize = clientWidth / 8.04; // 750px/7.5=100px，375px/7.5=50px
            console.log(fontSize,'======fontSize=====')
            // 直接修改内联样式，优先级最高
            docEl.setAttribute('style', 'font-size: ' + fontSize + 'px !important;');
        }

        setRootFontSize();
        win.addEventListener(resizeEvt, setRootFontSize);
        doc.addEventListener('DOMContentLoaded', setRootFontSize);
    })(document, window);
</script>




{/block}

{block name="main"}
<!-- 顶部返回栏（已完全按图纸修改） -->
<div class="top-box">
    <div class="top-bar">
        <div class="back">
            <image src="__IMAGES__/left.png"></image>
        </div>
        <div class="title">{$parent.name|default=''}</div>
    </div>
</div>
<div class="main">
    <!-- 左侧导航 -->
    {if condition="!empty($categorys)"}
    <ul class="sidebar">
        {volist name="categorys" id="category"}
        <li class="nav-item {eq name='$key' value='0'}active{/eq}" data-tab="tab{$category.id}">{$category.name}</li>
        {/volist}
    </ul>

    <!-- 右侧分区内容 -->
    <div class="right-content">
        {volist name="categorys" id="category"}
        <div class="tab-pane {eq name='$key' value='0'}active{/eq}" id="tab{$category.id}">
            {if condition="!empty($category.children)"}
            {volist name="$category.children" id="child"}
            <section class="sec-box">
                <div class="sec-header">
                    <div class="sec-title">{$child.name}</div>
                    <a class="sec-arrow" href="{:url('product/subcategory', ['id' => $child.id])}" target="_self">
                        <img src="__IMAGES__/y.png" alt="">
                    </a>
                </div>
                {if condition="!empty($child.products)"}
                <div class="scroll-box">
                    {volist name="$child.products" id="pro"}
                    <a class="card" href="{:url('product/detail', ['id' => $pro.id])}">
                        <div class="card-img">
                            <img src="{$pro.cover_image}" alt="">
                        </div>
                        <div class="card-info">
                            <div class="card-name">{$pro.name}</div>
                            <div class="card-model">{$pro.spu}</div>
                        </div>
                    </a>
                    {/volist}
                </div>
                {/if}
            </section>
            {/volist}
            {/if}
        </div>
        {/volist}
    </div>
    {/if}
</div>
{/block}

{block name="script"}

<script>
    // 点击右侧箭头滚动
    function scrollNext (el)
    {
        const box = el.closest('section')?.querySelector('.scroll-box')
            || el.parentElement.nextElementSibling
        if (box) box.scrollBy({ left: 150, behavior: 'smooth' })
    }
    const back = document.querySelector('.back')
    // 左侧Tab切换
    const navItems = document.querySelectorAll('.nav-item')
    const tabPanes = document.querySelectorAll('.tab-pane')

    navItems.forEach(item =>
    {
        item.addEventListener('click', () =>
        {
            // 切换左侧激活状态
            navItems.forEach(i => i.classList.remove('active'))
            item.classList.add('active')
            // 切换右侧内容
            const target = item.dataset.tab
            tabPanes.forEach(p => p.classList.remove('active'))
            document.getElementById(target)?.classList.add('active')
        })
    })

    back.addEventListener('click',()=>{
        window.location.href = document.referrer;
    })
</script>
{/block}