var Filter = {
    init: function () {
        var modelList = $('.model-list'),
            tableModelct = $('.model-list-ct'),
            tableModelList = $('.table-model-list'),
            modelViewAction = modelList.data('action'),
            tableModelViewAction = tableModelList.data('action'),
            width = modelList.parent().width(),
            tableWidth = tableModelList.parent().width(),
            scrollmove = {move: false},
            mouseDownPageX = 0,
            mouseUpPageX = 0;
        this.modelRows = modelList.find('.model-item-row');
        this.tableModelRows = tableModelList.find('.model-item-row');
        this.total = this.modelRows.length;
        this.tableTotal = this.tableModelRows.length;
        this.moderlFilterNum = $('.param-filter-result-info').find('span');
        this.list = $('.table-model-list');
        this.li = this.list.find('.model-item-row'),
            this.paramPagination = $('.model-pagination');
        this.len = this.li.length;
        this.pageSize = this.list.data('pagesize') || 10;

        //点击鼠标
        tableModelList.mousedown(function (event) {
            $(this).removeClass('grab').addClass('grabbing');
            scrollmove.move = true;
            scrollmove.startX = event.pageX + tableModelct.scrollLeft();
            mouseDownPageX = event.pageX;
            event.preventDefault();
        });
        //移动鼠标
        $(document).mousemove(function (event) {
            scrollmove.x = event.pageX;
            if (scrollmove.move == true) {
                tableModelct.scrollLeft(scrollmove.startX - scrollmove.x);
            }
            event.preventDefault();
        });
        //松开鼠标
        $(document).mouseup(function (event) {
            tableModelList.removeClass('grabbing').addClass('grab');
            scrollmove.move = false;
            mouseUpPageX = event.pageX;
            event.preventDefault();
        });

        //
        tableModelList.on('click', '.model-item-row', function (e) {
            if (mouseUpPageX - mouseDownPageX != 0) {
                event.preventDefault();
                return;
            }
            if ($(e.target).is('a')) return;
            var tr = $(this),
                id = tr.data('modelid'),
                panelSel = 'model-' + id + '-panel',
                panel = tr.next('.' + panelSel),
                fa = tr.find('.fa-angle-down'),
                len = tr.children('td').length,
                panelTr;

            if (!panel.length) {
                panelTr = $('<tr class="model-view-panel ' + panelSel + ' collapse in" id="collapse-' + id + '"></tr>').insertAfter(tr);
                panel = $('<td colspan="' + len + '" ></td>').appendTo(panelTr);
                panel.on('show.bs.collapse', function () {
                    fa.addClass('fa-angle-up').removeClass('fa-angle-down');
                }).on('hide.bs.collapse', function () {
                    fa.removeClass('fa-angle-up').addClass('fa-angle-down');
                });
            }
            if (!tr.data('isLoaded')) {
                fa.addClass('fa-spinner fa-loading');
                NProgress.start();
                panel.load(tableModelViewAction + '/' + id, function () {
                    NProgress.done();
                    tr.data('isLoaded', true);
                    fa.removeClass('fa-spinner fa-loading fa-angle-down').addClass('fa-angle-up');
                    carousel(panel.find('.product-preview'));
                    panel.find('.carousel').carousel();
                    panel.find('.model-view').width(tableWidth);
                });
            } else {
                panel.collapse('toggle');
            }

        });

        modelList.on('click', '.model-item-row', function (e) {
            if ($(e.target).is('a')) return;
            var tr = $(this),
                id = tr.data('modelid'),
                panelSel = 'model-' + id + '-panel',
                panel = tr.next('.' + panelSel),
                fa = tr.find('.fa-angle-down');
            if (!panel.length) {
                panel = $('<li class="model-view-panel ' + panelSel + ' collapse in" id="collapse-' + id + '"></li>').insertAfter(tr);
                panel.on('show.bs.collapse', function () {
                    fa.addClass('fa-angle-up').removeClass('fa-angle-down');
                }).on('hide.bs.collapse', function () {
                    fa.removeClass('fa-angle-up').addClass('fa-angle-down');
                });
            }
            if (!tr.data('isLoaded')) {
                fa.addClass('fa-spinner fa-loading');
                NProgress.start();
                panel.width(width).load(modelViewAction + '/' + id, function () {
                    NProgress.done();
                    tr.data('isLoaded', true);
                    fa.removeClass('fa-spinner fa-loading fa-angle-down').addClass('fa-angle-up');
                    carousel(panel.find('.product-preview'));
                });
            } else {
                panel.collapse('toggle');
            }
        });

        modelList.on('click', '.collapse-model-view', function () {
            $(this).parent().parent().parent().parent().parent().prev('tr').removeClass('open');
        });

        modelList.find('thead').find('th').each(function () {
            var me = $(this);
            me.width(me.width());
        });

        this.filterPanel = $('.param-filter').on('click', 'li', function () {
            Filter.fireClickEvent(this);
        });

        this.filterPanel.masonry({
            itemSelector: '.col-md-3'
        });
        if (!$('tr.has-para').length) {
            Filter.filterPager(this.len, 1, this.pageSize, false);
        }
    },
    filterPager: function (len, page, pageSize) {
        var pagination = $('.pagination');
        len > pageSize ? pagination.show() : '';
        if (pagination.length <= 0) {
            return;
        }
        var list = $('.table-model-list'),
            li = list.find('.model-item-row'),            //每页显示的条数
            pageCount = pageSize ? Math.ceil(len / pageSize) : 1,//总页数
            pageCls = '.event-el',
            $lastPage = $('.last-page'),
            $nextPage = $('.next-page'),
            currentPageNum = page * pageSize > len ? len : page * pageSize,
            jumphtml = '<li class="current-len"><span><i class="current-pagelen">' + (page * pageSize - pageSize + 1) + '-' + currentPageNum + '</i>, 总数<em>' + len + '</em></span></li><li class="allCount"><span>共<em>' + pageCount + '</em>页</span></li><li class="jump"><span>到第<i class="pageval"><input type="text"></i>页<i class="jumpBtn">确定</i></span></li>';
        $nextPage.after(jumphtml);
        //跳转页面
        $('.jumpBtn').click(function () {
            page = parseInt($('.jump').find('input').val());
            if (!page || page > pageCount) {
                alert('请输入正确且不能超出总页数的数字！');
            } else {
                changePage(page);
            }
            $('.jump').find('input').val('');
        });
        function getPageHtml(num, pageNum) {
            var btnHtml = '';
            for (var i = num; i < pageNum; i++) {
                btnHtml += '<li class="item"><a href="javascript:;">' + (i + 1) + '</a></li>';
            }
            return btnHtml;
        }

        //显示分页按钮
        function showPageBtn(pageCount, page) {// 总页数 ，当前页
            var html = '';
            if (pageCount <= 7) {
                html = getPageHtml(0, pageCount);
            } else if (pageCount > 7 && page <= 5) {
                if (page < 4) {
                    html = getPageHtml(0, 5);
                } else {
                    html = getPageHtml(0, page + 2);
                }
                html += '<li class="item"><i class="dot">...</i></li>';
            } else if (pageCount <= page + 2 && page > 7) {
                html = '<li class="item"><a href="javascript:;">1</a></li><li class="item"><a href="javascript:;">2</a></li><li class="item"><i class="dot">...</i></li>' + getPageHtml(pageCount - 1 - 4, pageCount);
            } else {
                html = '<li class="item"><a href="javascript:;">1</a></li><li class="item"><a href="javascript:;">2</a></li><li class="item"><i class="dot">...</i></li>' + getPageHtml(page - 2 - 1, page + 2) + '<li class="item"><i class="dot">...</i></li>';
            }
            return html;
        }

        //清空
        function clearPage() {
            pagination.find('li').each(function () {
                if ($(this).hasClass('item')) {
                    $(this).remove();
                }
            });
        }

        clearPage();
        $lastPage.after(showPageBtn(pageCount, page));
        $lastPage.next().addClass('active');
        //changepage
        changePage(page);
        function changePage(page) {//当前页，总页数 每页显示条数  总条数
            clearPage();
            $lastPage.after(showPageBtn(pageCount, page));
            $('.pagination').find('li.item').each(function () {
                if (parseInt($(this).find('a').text()) == page) {
                    $(this).addClass('active').siblings().removeClass('active');
                }
            });
            if (pageCount == 1) {
                $lastPage.addClass('disabled');
                $nextPage.addClass('disabled');
            } else if (pageCount > 1 && page == 1) {
                $lastPage.addClass('disabled');
                $nextPage.removeClass('disabled');
            } else if (pageCount == page && page > 1) {
                $lastPage.removeClass('disabled');
                $nextPage.addClass('disabled');
            } else {
                $lastPage.removeClass('disabled');
                $nextPage.removeClass('disabled');
            }
            var $currentPagelen = $('.current-pagelen');
            currentPageNum = page * pageSize > len ? len : page * pageSize;
            $currentPagelen.html((page * pageSize - pageSize + 1) + '-' + currentPageNum);
            showPager();
        }

        //分页按钮
        pagination.on('click', 'li.item a', function () {
            page = parseInt($(this).text());
            changePage(page);
        });
        function showPager() {
            var start = (page - 1) * pageSize, end = start + pageSize;
            for (var i = 0; i < len; i++) {
                if ($('tr.has-para').length > 0) {
                    i >= start && i < end ? list.find('.model-item-row.has-para').eq(i).removeClass('hide') : list.find('.model-item-row.has-para').eq(i).addClass('hide');
                } else {
                    i >= start && i < end ? li.eq(i).removeClass('hide') : li.eq(i).addClass('hide');
                }
            }
        }

        pagination.on('click', pageCls, function () {
            var el = $(this), action = el.data('func'), cls = 'disabled';
            if (el.hasClass(cls)) return;
            if (action == 'next') {
                page++;
            } else {
                page--;
            }
            changePage(page);
        });

    },
    filterParams: {},
    fireClickEvent: function (li) {
        var el = $(li), cls = 'active', param = el.parent().data('param');
        if (el.hasClass('disabled')) return;
        el.toggleClass(cls);
        el.siblings('.' + cls).removeClass(cls);

        if (el.hasClass(cls)) {
            this.filterParams[param] = el.data('value');
        } else {
            delete this.filterParams[param];
        }

        if (!this.tableModelRows.length) return;
        if (this.filterAjax) this.filterAjax.abort();
        this.tableModelRows.removeClass('open');
        if ($.isEmptyObject(this.filterParams)) {
            return this.setFilterRows();
        }
        this.filter(el);
    },

    filter: function (el) {
        var loading = $('<i class="fa fa-loading fa-spinner"></i>').appendTo(el),
            cls = 'loading';
        el.addClass(cls);
        if (!this.filterAction) this.filterAction = this.filterPanel.data('action');
        $('.model-view-panel').removeClass('in');
        NProgress.start();
        this.filterAjax = $.ajax({
            url: this.filterAction,
            type: 'post',
            dataType: 'json',
            cache: true,
            data: {
                params: this.filterParams
            },
            success: function (rs) {
                loading.remove();
                NProgress.done();
                Filter.setFilterRows(rs.rows);
                Filter.setFilterList(rs.filter);
                el.removeClass(cls).removeClass('disabled');
            },
            error: function () {
                NProgress.done();
                loading.remove();
                el.removeClass(cls).removeClass('disabled');
            }
        });
    },

    setFilterRows: function (rows) {
        if (!this.li.length || this.li.length <= 0)return;
        var tr,
            page = 1,
            hasPara = false,
            $paramPagination = $('.param-pagination'),
            pagerHtml = '<ul class="pagination param-pagination"><li class="last-page event-el disabled" data-func="prev"><a href="javascript:;">上一页</a></li><li class="next-page event-el" data-func="next"><a href="javascript:;">下一页</a></li></ul>';
        if (rows && rows.length) {
            var i = 0;
            hasPara = true;
            //显示筛选条件后的数据
            for (; i < this.tableTotal; i++) {
                tr = this.tableModelRows.eq(i);
                if ($.inArray(tr.data('modelid'), rows) < 0) {
                    tr.addClass('hide').removeClass('has-para');
                    //tr.hide();
                } else {
                    tr.addClass('has-para').removeClass('hide');
                    //tr.removeClass('hide').show();
                    $('.model-pagination').hide();
                }
            }
            this.moderlFilterNum.text(rows.length);
            $('.model-pagination').addClass('hide');
        } else if (rows) {
            this.tableModelRows.hide();
            this.moderlFilterNum.text(0);
            $('.model-pagination').addClass('hide');
        } else {
            hasPara = false;
            this.tableModelRows.show();
            this.moderlFilterNum.text(this.tableTotal);
            this.setFilterList();
            this.li.removeClass('has-para').removeClass('hide');
            $paramPagination.remove();
        }

        if ($paramPagination.length > 0) $paramPagination.remove();
        this.paramPagination.before(pagerHtml);
        if ($('tr.has-para').length > 0 && hasPara == true) {
            this.len = $('tr.has-para').length;
        } else {
            this.len = this.li.length;
        }
        Filter.filterPager(this.len, page, this.pageSize);
    },

    setFilterList: function (filter) {
        if (!this.filterParamsUl) this.filterParamsUl = this.filterPanel.find('ul');
        this.filterParamsUl.each(function () {
            var me = $(this), lis = me.find('li'), param = me.data('param'), cls = 'disabled';
            if (filter && filter[param] && filter[param].length) {
                var i = 0, k = 0, l = lis.length, li, val, poi;
                for (; i < l; i++) {
                    li = lis.eq(i);
                    val = li.data('value');
                    poi = $.inArray(li.data('value'), filter[param]);
                    if (poi < 0 && $.isNumeric(val)) poi = $.inArray(val.toString(), filter[param]);
                    if (poi < 0) {
                        li.addClass(cls);
                    } else {
                        k++;
                        li.removeClass(cls);
                    }
                }
                //if (k < 2 && typeof Filter.filterParams[param] == 'undefined') lis.addClass(cls);
            } else if (filter) {
                lis.addClass(cls);
            } else {
                lis.removeClass(cls);
            }
        });
    }
};

$(function () {
    Filter.init();
    selEndLoad();
    function selEndLoad() {
        var url = location.search,
            data = {}, arr, i, k;
        url = url.slice(1, url.length);
        arr = url.split('&');
        for (i = 0; i < arr.length; i++) {
            var endArr = arr[i].split('=');
            if (endArr[0].indexOf('%') > -1) {
                endArr[0] = endArr[0].slice(0, endArr[0].indexOf('%'));
                var key = endArr[0];
                if (data[key]) {
                    var txt = data[key];
                    data[key] = [];
                    data[key].push(txt);
                    data[key].push(endArr[1]);
                } else {
                    data[key] = endArr[1];
                }
            } else {
                data[endArr[0]] = endArr[1];
            }
        }
        for (k in data) {
            $('.param-filter .clearfix').each(function () {
                var el = $(this),
                    param = el.data('param');
                if (param == k) {
                    el.find('li').each(function () {
                        var me = $(this),
                            val = parseInt(me.data('value'));
                        if (typeof(data[k]) != 'string') {
                            if (val >= parseInt(data[k][0]) && val < parseInt(data[k][1])) {
                                me.addClass('active').siblings().addClass('disabled');
                            } else if (val == parseInt(data[k][1])) {

                            }
                        } else {
                            if (val == data[k]) {
                                me.addClass('active').siblings().addClass('disabled');
                            }
                        }
                    })
                }
            })
        }
        $('.param-filter .clearfix li').each(function () {
            var el = $(this);
            if ($(this).hasClass('active')) {
                var ul = el.parent(),
                    param = ul.data('param');
                Filter.filterParams[param] = el.data('value');
            }
        })
        if (!$.isEmptyObject(Filter.filterParams)) {
            $.ajax({
                url: '/product/seriesfilter/16',
                type: 'post',
                dataType: 'json',
                cache: true,
                data: {
                    params: Filter.filterParams,
                },
                success: function (rs) {
                    // loading.remove();
                    // el.removeClass(cls);
                    NProgress.done();
                    Filter.setFilterRows(rs.rows);
                    Filter.setFilterList(rs.filter);
                    if (rs.rows.length == 0 && rs.filter.length == 0) {
                        $('.param-filter .clearfix li').each(function () {
                            var el = $(this);
                            if (el.hasClass('active')) {
                                el.removeClass('disabled');
                            }
                        })
                    }
                },
                error: function () {
                    NProgress.done();
                    // el.removeClass(cls);
                    //loading.remove();
                }
            });
        }
    }

});