/**
 *Description: 商品列表页
 *Author: chenglong.wang@yoho.cn
 *Date: 2015/12/2
 */

var $ = require('yoho-jquery'),
    lazyLoad = require('yoho-jquery-lazyload'),
    Handlebars = require('yoho-handlebars'),
    productEvent = require('./product-event');

var $goodsContainer = $('.goods-container'),
    $goodItem = $goodsContainer.find('.good-info'),
    $goodItemWrapper = $goodsContainer.find('.good-item-wrapper'),
    $goodInfoMain = $goodsContainer.find('.good-info-main'),
    $goodSelectColor = $goodsContainer.find('.good-select-color'),
    $productListNav = $('.product-list-nav'),
    productList;

lazyLoad($('img.lazy'));

/**
 * @description 初始化鼠标移入商品列表弹层效果
 * @num 每列存放商品的个数
 */
exports.init = function(num) {

    productList = null;

    $goodItem.unbind();

    productList = productEvent($goodItem, num);

    /**
     * @description 构造商品颜色列表的html结构
     * @param data 商品颜色的数组，[url: '',src: '']
     * @return json {'colorListStr': '', 'ulNum': ''}
     * */
    function createColorList(data, _from) {
        var colorListStr = '',
            len = data.length,
            row = 4, // 每列ul放4个li
            col = Math.ceil(len / row), // 需要几**列**ul
            i,
            j,
            index,
            ulNum = 0;

        for (i = 0; i < col; i++) {
            colorListStr += '<ul>';
            for (j = 0; j < row; j++) {
                index = i * row + j;
                if (index === len) {
                    break;
                }
                colorListStr +=
                    '<li>' +
                    '<a target="_blank" href="' + data[i * row + j].url + _from + '">' +
                    '<img src="' + data[i * row + j].src + '" data-cover="' + data[i * row + j].coverImg + '" />' +
                    '</a>' +
                    '</li>';

                if (j === row - 1) {
                    colorListStr += '</ul>';
                    ulNum++;
                }
            }
        }
        if (ulNum < col) {
            colorListStr += '</ul>';
        }
        return {
            colorListStr: colorListStr,
            ulNum: col
        };
    }

    function removeHtmlFn() {
        $goodInfoMain.html('');
        $goodSelectColor.html('');
        $goodItemWrapper.css({
            display: 'none'
        });
    }

    productList.addHandler('MouseEnter', function(event) {
        var itemMr = 10, // list的右边距
            itemMb = 35, // list的下边距
            colorList,
            pic,
            pics,
            ulNum, ulStr,
            wrapperWidth,
            diffWidth,
            wrapperX,
            wrapperY,
            wrapperPl, // 鼠标移入时弹层的左内边距
            wrapperPt, // 鼠标移入时弹层的上内边距
            containerPt, // 商品列表容器的上内边距
            _from = event.target.attr('data-from') || '';


        pics = [];
        event.target.find('.hideList > li').each(function() {
            pic = $(this).data();
            pic.coverImg = pic.src;
            pics.push(pic);
        });

        colorList = createColorList(pics, _from);

        removeHtmlFn();

        ulStr = colorList.colorListStr; // ajax请求的颜色列表
        ulNum = colorList.ulNum;// ajax请求的颜色的数量

        $goodInfoMain.append(event.targetDuplicate);
        $goodSelectColor.append($(ulStr));

        wrapperPl = $goodItemWrapper.css('paddingLeft');
        wrapperPt = $goodItemWrapper.css('paddingTop');
        containerPt = $goodsContainer.css('paddingTop');

        wrapperWidth = 10 + (15 + 50) * ulNum + event.targetWidth;

        wrapperX = (event.targetX - 1) * (event.targetWidth + itemMr) - (parseInt(wrapperPl, 10) + 1);
        wrapperY = (event.targetY - 1) * (event.targetHeight + itemMb) + parseInt(containerPt, 10) -
            (parseInt(wrapperPt, 10) + 1);


        // todo
        // event.offsetR表示当前列表距离浏览器右侧边缘的距离
        diffWidth = event.offsetR - ((15 + 50) * ulNum + 25);

        if (diffWidth <= 0) {
            wrapperX = wrapperX + diffWidth - 25;
        }
        $goodItemWrapper.css({
            width: wrapperWidth,
            left: wrapperX,
            top: wrapperY,
            display: 'inline-block'
        });

        // 鼠标悬浮获取到商品信息后显示第一张图片
        if (pics[0] && pics[0].src) {
            $goodInfoMain.find('.good-thumb img').attr('src', pics[0].src);
        }
    });

    productList.addHandler('MouseLeave', function() {
        removeHtmlFn();
    });

    $goodItemWrapper.mouseleave(function() {

        removeHtmlFn();
    });

};

// 鼠标放在颜色列表上效果
$(document).on('mouseenter', '.good-select-color li', function() {
    var coverImg = $(this).find('img').attr('data-cover'),
        $coverImg = $(this).closest('.good-item-wrapper').find('.good-detail-img img');

    $coverImg.attr('src', coverImg);
});

// 左侧导航
$productListNav.find('h3').click(function() {
    var $this = $(this).closest('.product-list-nav');

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

        $this.find('.sort-child-list').stop(true, true).slideUp();

    } else {

        $this.find('.sort-child-list').stop(true, true).slideDown();
    }

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

// 左侧需要ajax内容
(function() {
    var $brandCard = $('#brand-card');
    var $brandFavor = $('#brand-favor');
    var html;

    if ($brandCard.length) {
        $.ajax({
            type: 'POST',
            url: '/product/index/getNodeContent',
            data: {
                node: $brandCard.data('node')
            }
        }).then(function(data) {
            $brandCard.html(data);
        });
    }

    // 品牌页请求
    if ($brandFavor.length) {
        html = $('#pic-link-tpl').html();

        $.ajax({
            type: 'POST',
            url: '/product/index/getAdnav',
            data: {
                brandId: $brandFavor.data('id')
            }
        }).then(function(data) {
            if (data) {
                $('#brand-ad').html(Handlebars.compile(html)({
                    picLink: data
                }));
            }
        });
    }
}());