<link href="{$template_shop_path}/visual/modules/common/screening/css/style.css" rel="stylesheet">


<div class="col-md-12">
     <div class="cation-content cation-content-$_id" id="sxid">
    <div class="cation-middle">
        <dl class="cation-list">
            <dt>{lang('category')}：</dt>
            <dd id="cateGory">
                <a href="#" rel="" name="mode" class="all">{lang('all_columns')}</a>
            </dd>
        </dl>
        <dl class="cation-list">
            <dt>{lang('type')}：</dt>
            <dd id="type">
                <a href="#" rel="" name="theme" class="all">{lang('all_type')}</a>
            </dd>
        </dl>
        <dl class="cation-list">
            <dt>{lang('special')}：</dt>
            <dd id="special">
                <a href="#" rel="" name="system" class="all">{lang('all_special')}</a>
            </dd>
        </dl>
        <dl class="cation-list">
            <dt>{lang('price')}：</dt>
            <dd id="getprice">
                <input  type="text" name="minprice" id="minprice" value="{if $minprice}{$minprice}{else}0{/if}" placeholder="{lang('unit')}" /> - <input  type="text" name="maxprice" placeholder="{lang('unit')}" id="maxprice" value="{$maxprice}"/>
            </dd>
        </dl>
        <input type="button" onclick="getWhere()" value="{lang('sure')}" class="btn cation-btn cation-btn-$_id">
    </div>
</div>
</div>

<style type="text/css">

    .cation-list-$_id a {
        font-size:$_link-font-size;
        color:$_link-color;
        border-color:$_link-border-color;
        border-radius: $_link-border-radius;
        background:$_link-background-color;
    }

    .cation-list-$_id a.active,.cation-list-$_id a:hover {
        color:$_link-hover-color;
        border-color:$_link-border-hover-color;
        border-radius: $_link-border-hover-radius;
        background:$_link-background-hover-color;
    }

    .cation-list-$_id dt {
        font-size:$_p-size;
        color:$_p-color;
    }
    .cation-list-$_id dt:hover {
        font-size:$_p-size;
        color:$_p-hover-color;
    }

    .cation-content-$_id .cation-list{
        border-bottom-color: $_list-border-color;
    }

    .cation-content-$_id {
        border-color:$_background-border-color;
        background:$_background-color;
    }
    .cation-content-$_id:hover {
        background:$_background-hover-color;
        border-color:$_background-border-hover-color;
    }
    .cation-btn-$_id {
        font-size:$_btn-size;
        color:$_btn-text-color;
        border-color:$_btn-border-color;
        border-radius: $_btn-border-radius;
        background:$_btn-background-color;
    }
    .cation-btn-$_id:hover {
        color:$_btn-text-hover-color;
        border-color:$_btn-border-hover-color;
        border-radius: $_btn-border-hover-radius;
        background:$_btn-background-hover-color;
    }
</style>

<script type="text/javascript">

    var whereDate={"cateGory":"{$cateGorycolor}","type":"{$typecolor}","special":"{$specialcolor}"};

    $(function(){

        $.get('{url("archive/getScreening/langurl/".lang::getistemplate())}', function(data){
            var dataObj = JSON.parse(data);
            var cateGoryData=dataObj['cateGoryData'];
            var cateGory=document.getElementById('cateGory');
            setHtml(cateGoryData,cateGory,'cateGory');
            var typeData=dataObj['typeData'];
            var type=document.getElementById('type');
            setHtml(typeData,type,'type');
            var specialData=dataObj['specialData'];
            var special=document.getElementById('special');
            setHtml(specialData,special,'special');
            if(cateGoryData.length==0 && typeData.length==0 && specialData.length==0){
                $("#sxid").remove();
            }
        });
        function setHtml(data,elementStr,name) {
            if(data.length>0){
                var str='';
                var strcolor=false;
                for(var i=0;i<data.length;i++){
                    var reg=/[`~！!@#$%^&*_+<>{}\/'[\]]/g;
                    data[i].name=data[i].name.replace(reg,'-');
                    if((name=='cateGory' && '{$cateGorycolor}'==data[i].id ) || (name=='type' && '{$typecolor}'==data[i].id)
                        || (name=='special' && '{$specialcolor}'==data[i].id)){
                        str =str+ '  <a href="javascript:void(0)" class="active" onclick="setWhere(\''+name+'\','+data[i].id+',this)" rel="'+data[i].name+'"  name="'+name+'" >'+data[i].name;+'</a>  '
                        whereDate['name']=data[i].id;
                        strcolor=true;
                    }else{
                        str =str+ '  <a href="javascript:void(0)" onclick="setWhere(\''+name+'\','+data[i].id+',this)" rel="'+data[i].name+'"  name="'+name+'">'+data[i].name;+'</a>  '
                    }

                }
                var strhead='';
                var classtype="";
                if(!strcolor){
                    classtype="class=\"active\"";
                    whereDate['name']='';
                }
                if(name=='cateGory' ){
                    strhead='<a href="javascript:void(0)" '+classtype+'  rel="" onclick="setWhere(\''+name+'\',\'\',this)" name="'+name+'" >{lang('all_columns')}</a>';
                }else if (name=='type' ) {
                    strhead='<a href="javascript:void(0)" '+classtype+' rel="" onclick="setWhere(\''+name+'\',\'\',this)" name="'+name+'" >{lang('all_type')}</a>';
                }else if (name=='special' ) {
                    strhead='<a href="javascript:void(0)" '+classtype+'  rel="" onclick="setWhere(\''+name+'\',\'\',this)" name="'+name+'" >{lang('all_special')}</a>';
                }

                str=strhead+str;
                elementStr.innerHTML=str;
            }else{

                $(elementStr).parent().remove();
                whereDate['name']='';
            }
        }
    });

    function setWhere(name,key,setcolor){
        whereDate[name]=key;

        $("[name="+name+"]").removeClass("active");
        $(setcolor).addClass("active");

    }

    function getWhere(){

        var newpath="{url('archive/listscreening/langurl/'.lang::getistemplate())}";
        for ( var key in whereDate) {
            newpath =newpath+'&'+key+'='+whereDate[key];
        }
        if($('#minprice').val() != '' ){
            newpath=newpath+'&minprice='+$('#minprice').val();
        }
        if($('#maxprice').val() != ''){
            newpath=newpath+'&maxprice='+$('#maxprice').val();
        }
        window.location.href = newpath;
    }

</script>

