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

var $ = require('yoho.jquery'),
    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;

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

    productList = productEvent($goodItem, num);

    /**
     * @description 构造商品颜色列表的html结构
     * @param data 商品颜色的数组，[url: '',src: '']
     * @return json {'colorListStr': '', 'ulNum': ''}
     * */
    function createColorList(data) {
        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 href="' + data[i * row + j].url + '">' +
                    '<img src="' + data[i * row + j].src + '" />' +
                    '</a>' +
                    '</li>';

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

    productList.addHandler('MouseEnter', function(event) {



        var itemMr = 10, //list的右边距
            itemMb = 35, //list的下边距
            ulStr = '',
            ulNum,
            wrapperWidth,
            diffWidth,
            wrapperX,
            wrapperY,
            wrapperPl, //鼠标移入时弹层的左内边距
            wrapperPt, //鼠标移入时弹层的上内边距
            containerPt; //商品列表容器的上内边距

        $goodInfoMain.html('');
        $goodSelectColor.html('');
        $goodItemWrapper.css({
            display: 'none'
        });
        $.ajax({
            type: 'GET',
            url: '/product/index/productColor',
            dataType: 'json'
        }).then(function(data) {

            ulStr = createColorList(data).colorListStr; //ajax请求的颜色列表
            ulNum = createColorList(data).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) + 1);
            wrapperY = (event.targetY - 1) *
            (event.targetHeight + itemMb) + parseInt(containerPt) - (parseInt(wrapperPt) + 1);

            //todo
            diffWidth = event.offsetR - ((15 + 50) * ulNum + 25);

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

        });
    });

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

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