/**
 *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');

var MouseOver = productEvent($goodItem, 5);

/**
 * @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
    };
}

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

    var itemMr = 10, //list的右边距
        itemMb = 35, //list的下边距
        ulStr = '',
        ulNum,
        wrapperWidth,
        diffWidth,
        wrapperX = (event.targetX - 1) * (event.targetWidth + itemMr) - 21,
        wrapperY = (event.targetY - 1) * (event.targetHeight + itemMb) + 25 - 19;

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

        ulStr = createColorList(data).colorListStr;
        ulNum = createColorList(data).ulNum;

        $goodInfoMain.append(event.targetDuplicate);
        $goodSelectColor.append($(ulStr));
        wrapperWidth = 10 + (15 + 50) * ulNum + event.targetWidth;

        //
        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'
    });
});