{extend name="public/base" /}
{block name="title"}分类{/block}
{block name="css"}
<style type="text/css">
.fenlei-li-active{pointer-events: none;}
</style>
{/block}
{block name="content"}
<div class="fenlei-search-box">
    <input type="text" placeholder="搜索商品" class="fenlei-search pl30">
    <div class="fenlei-search-box-img fs0" id="search">
        <img src="__MOD__/shop/images/search.png " alt=" ">
    </div>
</div>
<div class="fenlei-content">
    <ul class="fenlei-content-left fs0">
        {volist name="$levelOne" id="vo"}
        <li class="classSel" data-id="{$vo.id}" data-name="{$vo.name}">
            <div>{$vo.name}</div>
        </li>
        {/volist}
    </ul>
    <div class="fenlei-content-right">
        <div id="fenleiShipin"></div>
    </div>
</div>
{include file="public/menu" /}
{/block}
{block name="footjs"}
<script type="text/javascript">
function listHtml(name, data){
    var html = '';

    if(data[0].img){
        if(data[0].landing_url){
            html += '<div class="fenlei-content-right-img fs0"><a href="'+data[0].landing_url+'"><img src="__FILEROOT__/thumb'+data[0].img+'" alt=""></a></div>';
        }else{
            html += '<div class="fenlei-content-right-img fs0"><img src="__FILEROOT__/thumb'+data[0].img+'" alt=""></div>';
        }
    }

    html += '<div class="fenlei-tuijian fs0">'
                    +'<span class="fs14 cl33">'+name+'</span>'
              +'</div>';

    html += '<div class="tuijian-content fs0">';

    $.each(data[1], function(i,v){
        html += ''
                 +'<a href="{:route(\'search\')}?pid='+v.id+'">'
                 +'<div class="tuijian-content-item">'
                    +'<img src="__FILEROOT__'+v.main_img+'" alt="">'
                    +'<div class="fs14 cl33 tc">'+v.name+'</div>'
                 +'</div>'
                 +'</a>';
    })

    html += '</div>';

    return html;
}
function classData(id, name){
    $.post('{:route(\'getSecondClass\')}', {id:id}, function(data){
        var list = listHtml(name, data.result)
        $('#fenleiShipin').html(list)
    })
}
</script>
<script type="text/javascript">
$(function() {
    var _id = $('.fenlei-content-left').find('li:eq(0)').data('id')
    var _name = $('.fenlei-content-left').find('li:eq(0)').data('name')

    var from = '{$from}'
    if(from == 'index'){
        $('.fenlei-search').trigger("click").focus();
    }

    $('.classSel').on('click', function(){
        var _this = $(this)
        var id = _this.data('id')
        var name = _this.data('name')

        window.location.hash = '#id='+_this.index()

        _this.attr('disabled', 'disabled')
        _this.addClass('fenlei-li-active')
        _this.siblings().removeClass('fenlei-li-active')

        classData(id, name)
    })

    var _hash = window.location.hash

    if(_hash){
        var h = _hash.split('=')
        $('.classSel').eq(h[1]).click();
    }else{
        $('.classSel').eq(0).addClass('fenlei-li-active')
        classData(_id, _name)
    }

    $('#search').on('click', function(){
        var content = $(this).siblings('input').val()
        if(content != '' && content != null){
            window.location.href = '{:route(\'search\')}?wd='+content
        }
    })

    $('.fenlei-search').on('keypress', function(e){
        if (e.keyCode == '13') {
            var content = $(this).val()
            if(content != '' && content != null){
                window.location.href = '{:route(\'search\')}?wd='+content
            }
        }
    })
})
</script>
{/block}