var colorTpl = require('../../tpl/me/color-list.hbs');
var sizeTpl = require('../../tpl/me/size-list.hbs');

// var numCtrl = {
//     valueEl: $('.number .value'),
//     btn: {
//         minus: $('.number .minus'),
//         plus: $('.number .plus')
//     },
//     scope: {
//         1: {
//             min: true,
//             do: function(t) {
//                 t.btn.minus.addClass('disable');
//             }
//         }
//     },
//     initNumberScope: function() {
//         var maxValue = this.valueEl.text();
//
//         this.btn.plus.addClass('disable');
//
//         this.scope[maxValue] = {
//             max: true,
//             do: function(t) {
//                 t.btn.plus.addClass('disable');
//             }
//         };
//     },
//     bindNumberEvent: function() {
//         var $val = this.valueEl;
//         var val = parseInt($val.text(), 10);
//         var scope = this.scope;
//         var that = this;
//
//
//         this.btn.minus.on('click', function() {
//             if ($(this).hasClass('disable')) {
//                 return;
//             }
//
//             if (that.btn.plus.hasClass('disable')) {
//                 that.btn.plus.removeClass('disable');
//             }
//
//             val -= 1;
//             $val.text(val);
//
//             if (scope[val] && scope[val].min) {
//                 scope[val].do(that);
//             }
//         });
//
//         this.btn.plus.on('click', function() {
//             if ($(this).hasClass('disable')) {
//                 return;
//             }
//
//             if (that.btn.minus.hasClass('disable')) {
//                 that.btn.minus.removeClass('disable');
//             }
//
//             val += 1;
//             $val.text(val);
//
//             if (scope[val] && scope[val].max) {
//                 scope[val].do(that);
//             }
//         });
//     },
//     init: function() {
//         this.initNumberScope();
//         this.bindNumberEvent();
//     }
// };

function setActive($item) {
    var color = $item.find('.color-text').data('color');

    // var size = $item.find('.size-text').data('size');
    var $colorList = $item.find('.color-list');

    console.log(color);
    $colorList.find('.img-box').each(function(i, box) {
        var $box = $(box);

        if ($box.find('img').data('color') === color) {
            $box.find('.img-box').eq(i).addClass('active');
        }
    });
}

function renderList(data) {
    var cTpl;
    var sTpl;
    var $el = $('.goods-container');
    var resultId;
    var resultSkn;

    if (data) {
        resultId = data.productId;
        resultSkn = data.productSkn;

        $el.each(function(index, item) {
            var $item = $(item);
            var id = $item.data('id');
            var skn = $item.data('skn');
            var $form;

            if (id === resultId && skn === resultSkn) {
                $form = $item.closest('.table-body').next('.form');

                if (!$form.find('.color-list').length) {
                    cTpl = colorTpl(data);
                    sTpl = sizeTpl(data);
                    $form.find('.group.color').append(cTpl);
                    $form.find('.group.size').append(sTpl);
                    setActive($form);
                }
            }
        });
    }
}

function bindColorEvent() {
    $('.color-list img').off('clice').on('click', function() {
        var $this = $(this);
        var $sizeList = $this.closest('.group').next('.group').find('.size-list');
        var index = $this.data('index');
        var colorId = $this.data('color');
        var colorText = $this.attr('alt');
        var $c = $this.closest('.group.color').find('.color-text');

        $c.text(colorText);
        $c.attr('data-color', colorId);

        $this.closest('.color-list').find('.active').removeClass('active');
        $this.parent().addClass('active');

        $sizeList.removeClass('hide');
        $sizeList.addClass('hide');

        $sizeList.eq(index).removeClass('hide');
    });
}

function initSizeId() {
    var s = $('.size-list:not("hide")').find('span').eq(0).data('size');

    $('.group.size .size-text').eq(0).attr('data-size', s);
}

function bindSizeEvent() {
    $('.size-list span').off('click').on('click', function() {
        var $this = $(this);
        var s = $this.text();
        var id = $this.data('size');
        var $s = $this.closest('.group.size').find('.size-text');

        $this.parent().find('.active').removeClass('active');
        $this.addClass('active');

        $s.text(s);
        $s.attr('data-size', id);
    });
}

function getProductInfo() {
    var $el = $('.goods-container');

    $el.each(function(index, item) {
        var id = $(item).data('id');
        var skn = $(item).data('skn');

        if (id && skn) {
            $.ajax({
                url: '/me/return/getProductInfo',
                data: {
                    productId: id,
                    productSkn: skn
                }
            }).done(function(result) {
                console.log(result);
                if (result.code === 200) {
                    renderList(result.data);
                    initSizeId();
                    bindColorEvent();
                    bindSizeEvent();
                }
            });
        }
    });
}

getProductInfo();

// numCtrl.init();