$(function () {
    var filterForm = $('.form-param-filter'), sliders;

    function renderFilter() {
        if (!filterForm.length) return;
        if (typeof brandFilter == 'undefined') return;
        var html = '',
            type,
            data,
            unit,
            param,
            min, max, step;
        for (var i in brandFilter) {
            type = typeof brandFilter[i];
            if (type == 'object') {
                if (productParams[i]) param = productParams[i];
                if (!brandFilter[i].length) continue;
            } else if (type == 'string') {
                if (productParams[i]) param = productParams[brandFilter[i]];
            }
            if (!param || (param.type != 'select' && param.type != 'number')) continue;

            if (param.type == 'select') {
                html += '<div class="filter-item dropdown" data-code="' + param.id + '" data-type="' + param.type + '">' +
                    '<label class="control-label">' + param.name + '</label>' +
                    '<div class="form-control" data-toggle="dropdown">涓嶉檺</div>';
                html += '<div class="dropdown-menu filter-menu"><ul class="filter-menu-list">';
                html += '<li><label class="radio-inline"><input type="radio" name="' + param.id + '" value="" checked>涓嶉檺</label></li>';
                $.each(param.data, function (k, val) {
                    if (type == 'object' && $.inArray(val.value, brandFilter[i]) < 0) return;
                    html += '<li><label class="radio-inline"><input type="radio" name="' + param.id + '" value="' + val.value + '">' + val.text + '</label></li>';
                });
                html += '</ul></div></div>';
            } else if (param.type == 'number') {
                if (brandFilter[i].length < 2) continue;
                max = Math.max.apply(Math, brandFilter[i]);
                min = Math.min.apply(Math, brandFilter[i]);
                step = param.step || 1;
                unit = '';
                if (param.unit) unit = '(' + param.unit + ')'
                html += '<div class="filter-item" data-code="' + param.id + '" data-type="' + param.type + '">' +
                    '<label class="control-label">' + param.name + unit + '</label>' +
                    '<input class="form-control form-range-slider" name="' + param.id + '" value="" data-type="double" data-min="' + min + '" data-max="' + max + '"  data-step="' + step + '" data-values-separator="-"data-prettify-enabled="0">';

                html += '</div>';
            }
        }
        if (html) filterForm.removeClass('hide').prepend(html);

        sliders = $('.form-range-slider').ionRangeSlider({
            onFinish: function (data) {
                fireRangeSlider(data);
            }
        });
    }

    renderFilter();

    filterForm.find('aa.btn').on('click', function () {
        var me = $(this);
        me.find('.fa').remove();
        me.prepend('<i class="fa fa-loading fa-spinner" style="margin-right:4px"></i>');
        loadFilterSeries(null, function () {
            me.find('.fa').remove()
        });
    });


    var filterData = {}, filterText = {}, baseUrl = filterForm.data('baseurl');

    var filterCrumb = filterForm.find('.filter-crumb');
    filterForm.on('click', '.filter-menu', function (e) {
        e.stopPropagation();
        var me = $(this), code = me.parent().data('code'), type = me.parent().data('type'),
            name = me.parent().find('.control-label').text(), inputs = me.find('input:checked'),
            selected = filterCrumb.find('.crumb-' + code);

        filterData[code] = [];
        filterText[code] = [];

        inputs.each(function () {
            if (this.value == '') return;
            var ipt = $(this), v = ipt.parent().text(), el;
            filterData[code].push(this.value);
            filterText[code].push(v);
            el = '<div class="filter-crumb-item crumb-' + code + '" data-code="' + code + '" data-value="' + this.value + '">' + name + '锛�' + v + '</div>';
            if (selected.length) {
                selected.eq(0).before(el);
            } else {
                filterCrumb.append(el);
            }
        });
        selected.remove();
        var text = filterText[code].join(', ') || '涓嶉檺';
        me.parent().find('.form-control').text(text).attr('title', text);

        loadFilterSeries();
    });


    var filterClear = $('.btn-filter-clear').on('click', function () {
        var me = $(this), action = me.data('action');
        filterCrumb.empty().parent().addClass('hide');
        filterForm.find('.filter-item .form-control').text('涓嶉檺');
        filterForm.find('.filter-item input:checkbox').attr('checked', false);
        sliders.each(function () {
            $(this).data("ionRangeSlider").reset();
        });
        filterData = {};
        filterText = {};

        loadFilterSeries();
    });

    filterForm.on('click', '.filter-crumb-item', function () {
        var me = $(this), isSlider = me.hasClass('filter-crumb-item-slider'), code = me.data('code');
        if (isSlider) {
            filterForm.find('input[name=' + code + ']').data("ionRangeSlider").reset();
            filterData[code] = null;
        } else if ($.isArray(filterData[code])) {
            var val = me.data('value'), idx = $.inArray((val + ''), filterData[code]);
            if (idx >= 0) {
                filterData[code].splice(idx, 1);
                filterText[code].splice(idx, 1);
                filterForm.find('input[name=' + code + '][value=' + val + ']:checked').attr('checked', false).parents('.filter-item').find('.form-control').text(filterText[code].join(', ') || '涓嶉檺');
            }
        } else {
            filterData[code] = null;
            filterText[code] = null;
        }
        me.remove();

        loadFilterSeries();
    });

    function fireRangeSlider(data) {
        var me = data.input, name = me.parent().find('.control-label').text(), code = me.parent().data('code'),
            type = me.parent().data('type'), selected = filterCrumb.find('.crumb-' + code);
        if (data.from != data.min || data.to != data.max) {
            var v = data.from, el;
            if (v != data.to) v += '-' + data.to;
            el = '<div class="filter-crumb-item filter-crumb-item-slider crumb-' + code + '" data-code="' + code + '">' + name + '锛�' + v + '<i class="closed"></i></div>';
            if (selected.length) {
                selected.replaceWith(el);
            } else {
                filterCrumb.append(el);
            }
            filterData[code] = [data.from, data.to];
        } else {
            selected.remove();
            filterData[code] = null;
        }

        loadFilterSeries();
    }

    function setFilterCrumbVisiable() {
        if (!filterCrumb.text()) {
            filterCrumb.parent().addClass('hide');
            filterClear.addClass('hide');
        } else {
            filterCrumb.parent().removeClass('hide');
            filterClear.removeClass('hide');
        }
    }

    var cate = $('#cate').val() || 0, cName, filterSeriesAjax;
    var brandCate = $('#productCate').on('click', 'h4', function (e) {
        e.preventDefault();
        var h4 = $(this), cls = 'active', cls1 = 'selected';
        cate = h4.data('value');
        cName = h4.text();
        brandCate.find('.' + cls1).removeClass(cls1);
        h4.parent().addClass(cls).addClass(cls1).siblings().removeClass(cls);
        h4.parent().find('li').removeClass(cls);
        filterData.type = 0;
        productType.find('li').removeClass(cls1);
        affixCategory(brandCate.parent());

        loadFilterSeries();

        $(window).scrollTop($('h1.titlebar').offset().top);
    });

    var productType = $('#productType').on('click', 'a', function (e) {
        e.preventDefault();
        var el = $(this), cls = 'active', cls1 = 'selected', li = el.closest('li');
        if (el.hasClass(cls1)) return;
        filterData.type = el.data('id');
        cate = '';
        cName = el.text();
        li.addClass(cls1).siblings().removeClass(cls1);

        loadFilterSeries();
        $(window).scrollTop($('h1.titlebar').offset().top);
    });

    var total = -1, seriesList, seriesFilterList, pages, countEl;

    function setPage(pager, filter) {

        if (pager === false) {
            seriesList.show();
            seriesFilterList.parent().hide();
            countEl.text(total);
            return;
        }

        seriesList.hide();
        seriesFilterList.parent().show();

      
       

        countEl.text(pager.total || 0);
    }
    function loadFilterSeries(options, callback) {
        setFilterCrumbVisiable();

        if (filterSeriesAjax) filterSeriesAjax.abort();

        var flag, k;
        for (k in filterData) {
            if (filterData[k] && filterData[k].length) {
                flag = true;
                //break;
                if (filterData[k].length == 1) filterData[k] = filterData[k][0];
            }
        }

        if (!filterData.type) {
            delete filterData.type;
        }

        filterData.cate = cate || filterForm.get(0).cate.value;


        if (!seriesList) {
            seriesList = $('#productList');
            seriesFilterList = $('<ul class="row img-list img-list-white"></ul>').insertAfter(seriesList);
            seriesFilterList.wrap('<div/>');
            countEl = $('#filterCount');
            total = countEl.text();
        }

        for (var k in filterData) {
            if (filterData[k] === null || filterData[k] == '') {
                delete filterData[k];
            }
        }

        if (!flag && !cate) {
            return setPage(false, null);
        }

        NProgress.start();
        filterSeriesAjax = $.ajax({
            url: filterForm.data('action'),
            type: 'post',
            dataType: 'json',
            data: filterData,
            success: function (rs) {
                NProgress.done();
                if ($.isFunction(callback)) callback();
                var html = '';
                if (rs && rs.rows) {
                    var l = rs.rows.length, i = 0, uri = $.param(filterData), k;
                    if (uri) uri = '?' + uri;
                    for (; i < l; i++) {

                        html += '<li class="col-md-4 mb30">' +
                            '<a class="img-list-item" href="' + rs.rows[i].url + uri + '" target="_blank">' +
                            '<div class="img img-square"><figure>' +
                            (rs.rows[i].cover ? '<img src="' + rs.rows[i].cover + '" alt="' + rs.rows[i].name + '">' : '' ) +
                            '</figure></div>' +
                            '<h3 class="text-center">' + rs.rows[i].name + '</h3><p class="desc text-gray line-overflow-2 line-height-20 text-center">' + (rs.rows[i].slogan || '') + '</p>' +
                            '</a>' +
                            '</li>'
                    }

                }
                seriesFilterList.html(html);
                setPage(rs);
            },
            error: function () {
                NProgress.done();
                if ($.isFunction(callback)) callback();
            }
        });
    }

    var brandNetWorkingProvince = $('#brandNetWorkingProvince'),
        brandNetWorkingCity = $('#brandNetWorkingCity');
    if (brandNetWorkingProvince.length) {
        var cities = brandNetWorkingCity.find('option:gt(0)');
        var list = brandNetWorkingProvince.parent().find('ul');
        brandNetWorkingProvince.on('change', function () {
            brandNetWorkingCity.val('');
            cities.hide().filter("[data-province='" + this.value + "']").show();
        });
        brandNetWorkingCity.on('change', function () {
            list.hide();
            if (this.value) {
                list.filter('.net_working_' + brandNetWorkingProvince.val() + '_' + this.value).show();
            }
        });
    }
})
;