{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" type="text/css" href="__CSS__/product_subcategory.css" />
{/block}
{block name="main"}
<div class="oricoEGapp">
    <!-- banner轮播图 -->
    {notempty name="focus_image"}
    <div>
        {volist name="focus_image" id="fi"}
        <a {notempty name="fi.link"}href="{$fi.link}"{/notempty}>
            <img src="{$fi.image}" alt="" style="width:100%;margin-top:3.5rem;" />
        </a>
        {/volist}
    </div>
    {/notempty}
    <!-- 三级产品列表 -->
    <div class="oricoEGapp-subcatelists">
        <div class="m_Container">
            {notempty name="categorys_data"}
            <div class="product_list">
                {if condition="in_array('products', array_keys($categorys_data[0]))"}
                <ul>
                    {assign name="products" value=":\think\helper\Arr::flatMap(fn($pro) => $pro['products'], $categorys_data)" /}
                    {volist name="products" id="pr"}
                    <li class="img-responsive product-img">
                        {notempty name="pr.sku"}
                        <a href="{:url('product/detail', ['id' => $pr.id])}">
                            {volist name="pr.sku" id="ps" key="pk"}
                            <img src="{:thumb($ps.main_image)}" class="img_p" {neq name="pk" value="1" }style="display:none;"{/neq}>
                            {/volist}
                        </a>
                        {/notempty}
                        <a href="{:url('product/detail', ['id' => $pr.id])}">
                            <span class="title nowrap_ellipsis">{$pr.name}</span>
                            <span class="subtitle">{$pr.spu}</span>
                        </a>
                        {notempty name="pr.colors"}
                        <div class="hd Multi_color">
                            <ul>
                                {volist name="pr.colors" id="pc"}
                                <li class="img-responsive S-small-img">
                                    <div class="cricle">
                                        {assign name="color_type" value=":rgb_or_image($pc.attr_value)" /}
                                        {eq name="color_type" value="IMAGE"}
                                        <img src="{$pc.attr_value}" alt="" class="S-Cricle-Bg">
                                        {elseif condition="$color_type == 'RGB'" /}
                                        <span class="rgb_hex" {:style(['background-color'=>$pc.attr_value])}></span>
                                        {/eq}
                                    </div>
                                </li>
                                {/volist}
                            </ul>
                        </div>
                        {/notempty}
                    </li>
                    {/volist}
                </ul>
                {/if}
            </div>
            {/notempty}
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
    $(function() {
        // 图片切换
        $('.Multi_color').find('.S-small-img').click(function() {
            var index = $(this).index();
            $(this).parents('.product-img').find('.img_p').eq(index).show().siblings().hide();
        });
    })
</script>
{/block}