{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" href="__CSS__/product_subcategory.css" type="text/css" />
{/block}
{block name="main"}
<div class="orico_Page_subcategory">
    {notempty name="focus_image"}
    <div class="opdBanner">
        {volist name="focus_image" id="fi"}
        <a {notempty name="fi.link"}href="{$fi.link}"{/notempty}>
            <img src="{$fi.image}" alt="" class="opdbannerImg" />
        </a>
        {/volist}
    </div>
    {/notempty}
    <!-- 首页主题内容 -->
    <div class="pageMain">
        {notempty name="categorys_data"}
        {volist name="categorys_data" id="vo"}
        <div class="ori-pd-title">
            <span>{$vo.name}</span>
        </div>
        {notempty name="vo.products"}
        <div class="ori-pd-list">
            {volist name="vo.products" id="vp"}
            <a class="oripditem" href="{:url('product/detail', ['id' => $vp.id])}">
                <div>
                    {volist name="vp.sku" id="vs" key="vs_idx"}
                    <img src="{:thumb($vs.main_image)}" id="sku_image_{$vs.id}" class="prdimg {eq name='vs_idx' value='1'}prdimg-show{/eq}" />
                    {/volist}
                </div>
                <div class="prdName">{$vp.name}</div>
                <div class="prddec">{$vp.spu}</div>
                {notempty name="vp.colors"}
                <div class="prd-colors">
                    {volist name="vp.colors" id="vc" key="vc_idx"}
                    <div class="prdolorit {eq name='vc_idx' value='1'}on{/eq}" data-sku_id="{$vc.sku_id}">
                        {assign name="color_type" value=":rgb_or_image($vc.attr_value)" /}
                        {eq name="color_type" value="IMAGE"}
                        <img src="{$vc.attr_value}" />
                        {elseif condition="$color_type == 'RGB'" /}
                        <span class="rgb_hex" {:style(['background-color'=>$vc.attr_value])}></span>
                        {/eq}
                    </div>
                    {/volist}
                </div>
                {/notempty}
            </a>
            {/volist}
        </div>
        {/notempty}
        {/volist}
        {/notempty}
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
    $(function () {
        // 显示第一张图片
        $('.opdbannerImg').eq(0).show();
        let currentIndex = 0;
        const imgCount = $('.opdbannerImg').length;
        setInterval(() => {
        // 淡出当前图片
        $('.opdbannerImg').eq(currentIndex).fadeTo(10, 0, () => {
            // 隐藏当前图片
            $('.opdbannerImg').eq(currentIndex).hide();
            // 计算下一张图片的索引
            currentIndex = (currentIndex + 1) % imgCount;
            // 显示并淡入下一张图片
            $('.opdbannerImg').eq(currentIndex).show().fadeTo(10, 1);
        });
        }, 10000);

        $('.prd-colors .prdolorit').click(function(event) {
            event.stopPropagation();
            event.preventDefault();

            var sku_id = $(this).data('sku_id');
            $('#sku_image_' + sku_id).addClass('prdimg-show').siblings().removeClass('prdimg-show');
            $(this).addClass('on').siblings().removeClass('on');
        });
    })
</script>
{/block}