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');

    //点击鼠标
    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'
    });

    var pagination = $('.model-pagination');
    if (pagination.length) {
      var list = $('.table-model-list'),
          li = list.find('.model-item-row'),
          len = li.length,                                     //总条数
          pageSize = list.data('pagesize') || 10,               //每页显示的条数
          pageCount = pageSize ? Math.ceil(len / pageSize) : 1,//总页数
          pageCls = '.event-el',
          pageBtn = pagination.find(pageCls),
          page = 1,                                            //当前页
          $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) {
        if(len <= 0){
          pagination.hide();return;
        }
        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++) {
          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++;
          /*if (page == pageCount) el.addClass(cls);
          pageBtn.eq(0).removeClass(cls);*/
        } else {
          page--;
          /*if (page == 1) el.addClass(cls);
          pageBtn.eq(1).removeClass(cls);*/
        }
        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');
      console.log(this.filterParams);
    $('.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 (rows && rows.length) {
      var i = 0, tr;
      for (; i < this.tableTotal; i++) {
        tr = this.tableModelRows.eq(i);
        if ($.inArray(tr.data('modelid'), rows) < 0) {
          tr.hide();
        } else {
          tr.removeClass('hide').show();
          $('.pagination').hide();
        }
      }
      this.moderlFilterNum.text(rows.length);
    } else if (rows) {
      this.tableModelRows.hide();
      this.moderlFilterNum.text(0);
    } else {
      this.tableModelRows.show();
      this.moderlFilterNum.text(this.tableTotal);
      this.setFilterList();
      $('.pagination').show();
    }
  },

  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();
              }
          });
      }
  }

});