var $ = require('yoho-jquery');
var lazyload = require('yoho-jquery-lazyload');
var common = require('../../common');

var query = common.queryString();


var YohoListPage = {
    rootDoc: $('.yoho-product-list'),
    brandsDoc: $('.yoho-product-list .brand-list'),
    mulitBrand: false,
    goodsWrapper: $('.goods-area .goods-wrapper'),
    goodsWrapperState: false,
    page: query.page || 1,
    init: function() {
        require('yoho-jquery-accordion');
        require('yoho-jquery-nanoscroller');
        require('../../plugins/check');
        require('../../common/return-top');
        require('../../common/header');
        lazyload();
        $('.nano').nanoScroller();
        $('.yoho-ui-accordion', this.rootDoc).each(function() {
            var opts = {
                collapsible: true,
                heightStyle: 'content'
            };

            if ($(this).hasClass('no-active')) {
                opts.active = false;
            }
            $(this).accordion(opts);
        });

        $('.sex-body .input-radio', this.rootDoc).check({
            type: 'radio',
            group: 'gender',
            onChange: function(ele, checked, value) {
                YohoListPage.go({
                    gender: checked ? value : ''
                });
            }
        });

        $('.list-body .input-radio', this.rootDoc).check({
            type: 'radio',
            group: 'sort',
            onChange: function(ele, checked, value) {
                var subCategoryId = $(ele).data('category');
                var categoryId = $(ele).parents('.body').data('value');

                YohoListPage.go({
                    categoryId: categoryId,
                    subCategoryId: subCategoryId,
                    sort: checked ? value : ''
                });
            }
        });

        $('.price-body .input-radio', this.rootDoc).check({
            type: 'radio',
            group: 'price',
            onChange: function(ele, checked, value) {
                YohoListPage.go({
                    price: checked ? value : ''
                });
            }
        });

        $('.size-body .input-radio', this.rootDoc).check({
            type: 'radio',
            group: 'size',
            onChange: function(ele, checked, value) {
                YohoListPage.go({
                    size: checked ? value : ''
                });
            }
        });

        $('.brand-list .input-radio', this.rootDoc).check({
            type: 'radio',
            group: 'brand',
            onChange: function(ele, checked, value) {
                if (!YohoListPage.mulitBrand) {
                    YohoListPage.go({brand: value});
                } else {
                    YohoListPage.showBrandMulitBtn();
                }
            }
        });

        $('.color-body .input-radio', this.rootDoc).click(function() {
            YohoListPage.go({color: $(this).data('value')});
        });

        YohoListPage.eventBind();
    },
    eventBind: function() {
        $('.mulit-choose', this.rootDoc).click(function() {
            YohoListPage.openBrandMulitChoose();
        });

        $('.brand-btns .cancel', this.rootDoc).click(function() {
            YohoListPage.closeBrandMulitChoose();
        });

        $('.brand-btns .confirm', this.rootDoc).click(function() {
            if (!$(this).hasClass('disable')) {
                YohoListPage.go({
                    brand: YohoListPage.getSelectBrands().join(',')
                });
            }
        });

        $('.price-btns .confirm', this.rootDoc).click(function() {
            var priceLow = $('.price-low', $(this).parent()).val() || 0;
            var priceHigh = $('.price-high', $(this).parent()).val() || 0;

            if (priceLow > 0 || priceHigh > 0) {
                YohoListPage.go({
                    price: priceLow + ',' + priceHigh
                });
            }
        });

        $('.yoho-product-list .brand-body input').on('keyup', function() {
            YohoListPage.filterBrand($(this).val().toLowerCase());
        });

        $('.yoho-product-list .brand-letter-items .item').hover(function() {
            $('.yoho-product-list .brand-letter-items .item').removeClass('select');
            $(this).addClass('select');
            YohoListPage.filterBrand($(this).data('value').toLowerCase());
        });

        $('.goods-area > .goods').click(function() {
            var url = $(this).data('url');

            YohoListPage.openWin(url);
        });

        $('.goods-wrapper > .goods').click(function() {
            var url = $(this).data('url');

            YohoListPage.openWin(url);
        });

        $('.goods-area > .goods').mouseenter(function(e) {
            YohoListPage.showGoodsWrapper(e);
        });

        $('.goods-wrapper').mouseleave(function(e) {
            YohoListPage.hideGoodsWrapper(e);
        });

        $('.filter-area .filter-item').click(function() {
            var key = $(this).data('key');
            var data = {};

            data[key] = '';
            YohoListPage.go(data);
        });

        $('.filter-area .cancel').click(function() {
            var data = {};

            $('.filter-area .filter-item').each(function() {
                var key = $(this).data('key');

                data[key] = '';
            });

            YohoListPage.go(data);
        });

        $('.order-area .page').click(function() {
            if (!$(this).hasClass('disable')) {
                if ($(this).hasClass('page-pre')) {
                    YohoListPage.go({
                        page: parseInt(YohoListPage.page, 10) - 1
                    });
                } else {
                    YohoListPage.go({
                        page: parseInt(YohoListPage.page, 10) + 1
                    });
                }
            }
        });

        $('.order-area .order').click(function() {
            var order = $(this).data('order');
            var target = $(this).data('target');
            var orders = order.split(',');
            var newOrder = '';

            if (query.order === orders[0]) {
                newOrder = orders[1] || '';
            } else {
                newOrder = orders[0];
            }

            $('.order-area .order').removeClass('selected');
            $(this).addClass('selected');
            $('.' + target).find('.iconfont').each(function() {
                if ($(this).hasClass(newOrder)) {
                    $(this).addClass('selected');
                } else {
                    $(this).removeClass('selected');
                }
            });

            YohoListPage.go({
                order: newOrder
            });
        });
    },
    openBrandMulitChoose: function() {
        $('.yoho-product-list .mulit-choose').hide();
        $('.input-radio', this.brandsDoc).check({
            type: 'checkbox'
        });
        YohoListPage.mulitBrand = true;
        YohoListPage.showBrandMulitBtn();
    },
    closeBrandMulitChoose: function() {
        $('.yoho-product-list .mulit-choose').show();
        $('.yoho-product-list .brand-btns').addClass('hide');

        $('.yoho-product-list .brand-list .input-radio').check('unCheckAll');
        YohoListPage.mulitBrand = false;
        $('.input-radio', this.brandsDoc).check({
            type: 'radio'
        });
    },
    showBrandMulitBtn: function() {
        $('.brand-btns', this.rootDoc).removeClass('hide');
        if (YohoListPage.getSelectBrands().length > 0) {
            $('.brand-btns .confirm', this.rootDoc).removeClass('disable');
        } else {
            $('.brand-btns .confirm', this.rootDoc).addClass('disable');
        }
    },
    filterBrand: function(letter) {
        $('.yoho-product-list .brand-list .input-radio').each(function() {
            if (letter === '0-9') {
                var first = $('label', this).text().toLowerCase().charAt(0); // eslint-disable-line

                if ((first >= 'a' && first <= 'z') || (first >= 'A' && first <= 'Z')) {
                    $(this).hide();
                } else {
                    $(this).show();
                }
            } else {
                if ($('label', this).text().toLowerCase().indexOf(letter) === 0) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            }
        });
    },
    getSelectBrands: function() {
        let brands = [];

        $('.input-radio .checkbox', this.brandsDoc).each(function() {
            if ($(this).hasClass('checked')) {
                brands.push($(this).parent().data('value'));
            }
        });
        return brands;
    },
    showGoodsWrapper: function(e) {
        var position = $(e.currentTarget).position();
        var productId = $(e.currentTarget).data('id');

        var imgsSize = $(e.currentTarget).find('.goods-list i').length;
        var imgsCol, url;
        var pos = {};
        var self = this;

        if (YohoListPage.goodsWrapperState && YohoListPage.productId !== productId) {
            YohoListPage.goodsWrapperState = false;
        }

        if (!YohoListPage.goodsWrapperState) {
            url = $(e.currentTarget).data('url');

            YohoListPage.productId = productId;
            pos.top = position.top + 10;

            if (position.left > 500) {
                pos.right = 0;
                pos.left = 'auto';
            } else {
                pos.right = 'auto';
                pos.left = position.left;
            }

            $(this.goodsWrapper).css(pos);
            $('.goods', this.goodsWrapper).html($(e.currentTarget).html());
            $('.goods', this.goodsWrapper).data('url', url);
            $('.goods-img-list', this.goodsWrapper).empty();
            $(e.currentTarget).find('.goods-list i').each(function(index) {
                var goodsUrl = $(this).data('url');

                if (index % 4 === 0) {
                    imgsCol = document.createElement('div');
                    $(imgsCol).addClass('goods-img-col');
                }
                $(imgsCol).append(
                    '<img data-url="' + goodsUrl + '" src="' + $(this).text() + '" width="60" height="80" alt="">');
                if ((index + 1) % 4 === 0 || index === imgsSize - 1) {
                    $('.goods-img-list', YohoListPage.goodsWrapper).append(imgsCol);
                    imgsCol = null;
                }
            });
            $(this.goodsWrapper).show();
            YohoListPage.goodsWrapperState = true;

            $('.goods-img-list img', this.goodsWrapper).hover(function() {
                var _url = $(this).data('url');

                $('.goods', self.goodsWrapper).data('url', _url);
                $('.goods .goods-img img', YohoListPage.goodsWrapper).attr('src', $(this).attr('src'));
            });
            $('.goods-img-list img', this.goodsWrapper).click(function() {
                YohoListPage.openWin($(this).data('url'));
            });
        }
    },
    hideGoodsWrapper: function() {
        YohoListPage.goodsWrapperState = false;
        $('.goods-area .goods-wrapper').hide();
    },

    go: function(q) {
        var qs = $.extend(common.queryString(), q);

        location.search = $.param(qs);
    },
    openWin: function(url) {
        if (url) {
            window.open(url);
        }
    }
};

YohoListPage.init();

module.exports = YohoListPage;