/**
 * 商品筛选逻辑
 * @author: xuqi<qi.xu@yoho.cn>
 * @date: 2015/12/4
 */

var $ = require('yoho-jquery'),
    Handlebars = require('yoho-handlebars');

var checkUnicode = {
        unchecked: '&#xe612;',
        checked: '&#xe613;'
    },
    moreUnicode = {
        up: '&#xe607;',
        down: '&#xe60b;'
    };

// 品牌相关变量
var $brandDefault = $('.brand .default'),
    $brandInput = $('#brand-search-input'),
    $brandPanel = $('.brand .brand-panel'),
    $brandAttrs = $brandPanel.find('.attr'),
    $brandMore = $('#brand-more'),
    $brandMulti = $('#brand-multi'),
    $brandsIndex = $('.brands-index');

var $brandMoreTxt, $brandMoreIcon;

// 价格相关变量
var $udPrice = $('.ud-price-range'),
    interReg = /^\d+$/,
    $limit, $min, $max, $btn;

// 分类相关变量
var $sortSub = $('.sort-sub-wrap');

// 高级选项相关变量
var $seniorSubWrap = $('.senior-sub-wrap'),
    $seniorAttrWrap = $('.senior-attr-wrap');

var seniorHoverTime, hoveredIndex;

// 尺寸 handlebars 模板
var sizeTmpl = '{{# size}}<a class="attr {{#if checked}}checked{{/if}}" href="{{href}}">{{name}}</a>{{/ size}}',
    sizeCache = {}, // 缓存一下尺寸信息
    $sizeWrap = $('.filter-box .size');

sizeTmpl = Handlebars.compile(sizeTmpl);

// 清除checkbox选中状态[页面默认checked不清空]
function clearChecked($checkbox, $checked) {
    $checkbox.each(function() {
        if ($(this).closest('.attr').hasClass('checked')) {
            return;
        }
        $(this).removeClass('checked').html(checkUnicode.unchecked);
    });
    $checked.find('.checkbox').addClass('checked').html(checkUnicode.checked);
}

// 显示更多品牌面板
function brandShowMore() {
    $brandDefault.addClass('hide');
    $brandPanel.removeClass('hide');
}

// 隐藏更多品牌面板
function brandHideMore() {
    $brandPanel.addClass('hide');
    $brandDefault.removeClass('hide');

    // 清除索引状态
    $brandsIndex.children('span').removeClass('hover');
}

// url构造&跳转
function uriLoc(attr, val) {
    var qs = window.queryString(),
        newHref;

    qs[attr] = val;
    delete qs.page;
    newHref = '?' + decodeURIComponent($.param(qs));
    window.location.href = newHref;
}

// 隐藏高级选项面板
function hideSeniorPanel() {
    $seniorSubWrap.children('.senior-sub:eq(' + hoveredIndex + ')').addClass('hide');
    $seniorAttrWrap.children('.attr:eq(' + hoveredIndex + ')').removeClass('hover');
    hoveredIndex = -1;
}

// 屏蔽筛选项双击文字选中
$('.filter-box').on('selectstart', '.attr, .brands-index span', function() {
    return false;
});

// 【分类】
$('.sort-pre').on('click', 'li', function() {
    var $this = $(this),
        index = $this.index(),
        id = $this.data('id');

    if ($this.hasClass('active')) {

        // 选中时，再次点击取消选中
        $this.removeClass('active');
        $sortSub.children(':eq(' + index + ')').addClass('hide');
        $sizeWrap.addClass('hide');
        return;
    }

    $this.siblings('.active').removeClass('active');
    $this.addClass('active');

    $sortSub.children(':not(.hide)').addClass('hide');
    $sortSub.children(':eq(' + index + ')').removeClass('hide');

    if (!$sizeWrap.data('load')) {
        if (sizeCache[id]) {
            $sizeWrap.find('.attr-content').html(sizeCache[id]);
            $sizeWrap.removeClass('hide');
        } else {
            $.ajax({
                url: '/product/search/sortSize',
                data: {
                    msort: id
                }
            }).then(function(res) {
                if ($.type(res) === 'array' && res.length) {
                    sizeCache[id] = sizeTmpl({
                        size: res
                    });
                    $sizeWrap.find('.attr-content').html(sizeCache[id]);
                    $sizeWrap.removeClass('hide');
                } else {
                    $sizeWrap.addClass('hide');
                }
            });
        }
    }
});

// 【品牌】
if ($brandMore.length > 0) {
    $brandMoreTxt = $brandMore.children('em');
    $brandMoreIcon = $brandMore.children('.iconfont');
}

// 【品牌】多选
$brandMulti.click(function() {
    if ($brandPanel.css('display') === 'none') {

        // 显示品牌面板
        $brandMore.trigger('click');
    }

    brandShowMore();
    $brandPanel.removeClass('hide').addClass('multi'); // 显示出checkbox
    $(this).addClass('hide');

    // 隐藏更多按钮
    $brandMore.addClass('hide');
});

// 【品牌】更多
$brandMore.click(function() {
    var $this = $(this);

    if ($this.hasClass('more')) {
        brandHideMore();

        $brandMoreTxt.text('更多');
        $brandMoreIcon.html(moreUnicode.down);

        // 清空搜索框和搜索结果
        $brandInput.val('').trigger('keyup');
    } else {
        brandShowMore();

        $brandMoreTxt.text('收起');
        $brandMoreIcon.html(moreUnicode.up);
    }

    $(this).toggleClass('more');
});

// 【品牌】索引
$brandsIndex.on('mouseenter', 'span', function() {
    var $this = $(this),
        index = $this.data('index');

    if ($this.hasClass('hover')) {
        return;
    }
    setTimeout(function() {
        $this.siblings('span.hover').removeClass('hover');
        $this.addClass('hover');

        if ($this.index() === 0) {

            // 全部
            $brandAttrs.removeClass('hide');
        } else {
            $brandAttrs.addClass('hide').filter('[data-index=' + index + ']').removeClass('hide');
        }
    }, 120);
});

// 【品牌】搜索
$brandInput.keyup(function() {
    var val = $(this).val().toLowerCase();

    if (val === '') {
        $brandAttrs.removeClass('hide');
    } else {
        $brandAttrs.addClass('hide').filter('[data-key*="' + val + '"]').removeClass('hide');
    }
});

// 【品牌】多选确定
$('#brand-multi-ok').click(function() {
    var val = [];

    if ($(this).hasClass('dis')) {
        return;
    }

    $brandPanel.find('span.checked').each(function() {
        val.push($(this).data('id'));
    });

    uriLoc('brand', val.join(','));
});

// 【品牌/高级选项】多选取消
$('.multi-select-cancel').click(function() {
    var $panel = $(this).closest('.multi');

    if ($panel.hasClass('brand-panel')) {

        $brandMulti.removeClass('hide'); // 显示多选按钮
        $brandMore.trigger('click');

        // 显示出更多按钮
        $brandMore.removeClass('hide');

        // 清空搜索框和搜索结果
        $brandInput.val('').trigger('keyup');
        brandHideMore();
    }

    $panel.addClass('hide').removeClass('multi');
    clearChecked($panel.find('.checkbox.checked'), $panel.find('.attr.checked')); // 清除选中状态

    // 确定按钮状态恢复dis
    $(this).siblings('.multi-select-ok').addClass('dis');
});

// 【品牌/高级选项】checkbox
$('.check-container').on('click', '.attr', function() {
    var $this = $(this),
        $check = $this.find('.checkbox'),
        $btnOk = $this.closest('.brand-panel, .senior-sub').find('.multi-select-ok');

    $check.toggleClass('checked');

    if ($check.hasClass('checked')) {
        $check.html(checkUnicode.checked);
    } else {
        $check.html(checkUnicode.unchecked);
    }

    // 更新按钮状态
    if ($check.hasClass('checked') ||
        $this.siblings('.attr').find('.checked').length > 0) {
        $btnOk.removeClass('dis');
    } else {
        $btnOk.addClass('dis');
    }
});

// 【品牌/高级选项】当多选时阻止链接默认跳转
$('.brand, .senior').on('click', '.attr > a', function(e) {
    if ($(this).closest('.multi').length > 0) {
        e.preventDefault();
    }
});

// 已选中的条件，点击不刷新
$('.filter-box').on('click', 'li.checked, a.checked', function(e) {
    e.preventDefault();
});

// 【价格】用户定义价格处理
if ($udPrice.length > 0) {
    $limit = $udPrice.find('.limit');
    $min = $limit.filter('.min');
    $max = $limit.filter('.max');
    $btn = $udPrice.find('.price-sure');

    // 【价格】输入
    $limit.keyup(function() {
        var thisPrice = $.trim($(this).val()),
            isPriInt = interReg.test(thisPrice),
            intPrice,
            min,
            max;

        if (!isPriInt) {
            intPrice = parseInt(thisPrice, 10);
            $(this).val(isNaN(intPrice) ? '' : intPrice);
        }

        min = $.trim($min.val());
        max = $.trim($max.val());

        if (min !== '' || max !== '') {
            $btn.removeClass('hide');
        } else {
            $btn.addClass('hide');
        }
    });

    // 【价格】多项查询
    $btn.click(function() {
        var min = $.trim($min.val()),
            max = $.trim($max.val()),
            tmp;

        // 对于min大于max的情况，交换位置
        if (min !== '' && max !== '' && +min > +max) {
            tmp = max;
            max = min;
            min = tmp;
        }

        uriLoc('price', min + ',' + max);
    });
}

// 【高级选项】鼠标移入显示子项
$seniorAttrWrap.on('mouseenter', '.attr', function() {
    var $this = $(this);
    var index = $this.index();

    if ($this.hasClass('no-sub')) {
        return;
    }
    $this.addClass('hover').siblings().removeClass('hover');

    $seniorSubWrap.children('.senior-sub:eq(' + index + ')').removeClass('hide').siblings().addClass('hide');
}).on('mouseleave', '.attr', function() {
    var $this = $(this),
        index = $this.index();

    if ($this.hasClass('no-sub')) {
        return;
    }

    hoveredIndex = index;

    seniorHoverTime = setTimeout(function() {
        hideSeniorPanel();
    }, 100);
});

// 【高级选项】多选
$('.senior-sub').on('click', '.multi-select', function() {
    $(this).closest('.senior-sub').addClass('multi');
}).on('click', '.multi-select-ok', function() {
    var $btn2 = $(this),
        $sub = $btn2.closest('.senior-sub'),
        val = [];

    if ($btn2.hasClass('dis')) {
        return;
    }

    $sub.find('span.checked').each(function() {
        val.push($(this).data('id'));
    });

    uriLoc($sub.data('attr'), val.join(','));
}).on('mouseenter', function() {
    clearTimeout(seniorHoverTime);
}).on('mouseleave', function() {
    hideSeniorPanel();
});