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

var $ = require('yoho.jquery'),
    lazyLoad = require('yoho.lazyload'),
    Handlebars = require('yoho.handlebars'),
    productEvent = require('../common/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的下边距
            ulStr = '',
            ulNum,
            wrapperWidth,
            diffWidth,
            wrapperX,
            wrapperY,
            wrapperPl, //鼠标移入时弹层的左内边距
            wrapperPt, //鼠标移入时弹层的上内边距
            containerPt, //商品列表容器的上内边距
            _from = event.target.attr('data-from') || '';

        $.ajax({
            type: 'POST',
            url: '/product/list/getProductPic',
            dataType: 'jsonp',
            jsonp: 'callback',
            data: {
                skn: event.target.attr('data-skn'),
                skc: event.target.attr('data-skc')
            }
        }).then(function(res) {
            var data = res.data,
                colorList = createColorList(data.pics, _from);

            removeHtmlFn();

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

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

            // 点击收藏商品不需要了
            // if (data.isFavorite) {
            //     $goodInfoMain.find('.col-btn').addClass('coled');
            // } else {
            //     $goodInfoMain.find('.col-btn').removeClass('coled');
            // }

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

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

            //wrapperWidth = $goodItemWrapper.width();

            wrapperX = (event.targetX - 1) * (event.targetWidth + itemMr) - (parseInt(wrapperPl) + 1);
            wrapperY = (event.targetY - 1) *
            (event.targetHeight + itemMb) + parseInt(containerPt) - (parseInt(wrapperPt) + 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 (data.pics[0] && data.pics[0].src) {
                $goodInfoMain.find('.good-thumb img').attr('src', data.pics[0].src);
            }
        });
    });

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

    $goodItemWrapper.mouseleave(function() {

        removeHtmlFn();
    });

};

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

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

// 左侧导航
$productListNav.find('h3').click(function(event) {
    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
                }));
            }
        });
    }
}());