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

var addrSelector = require('../plugins/cascading-address');
var addr;

// 添加.check方法
require('../plugins/check');

// 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');
    var $sizeList = $item.find('.size-list');

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

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

            return false;
        }
    });

    $sizeList.find('span').each(function(i, s) {
        var $size = $(s);

        if ($size.data('size') === size) {
            $sizeList.find('span').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) {
                if (result.code === 200) {
                    renderList(result.data);
                    initSizeId();
                    bindColorEvent();
                    bindSizeEvent();
                }
            });
        }
    });
}

function bindSelectEvent() {
    $('.exchange-reasons').on('change', function() {
        var $op = $(this).find('option:selected');

        $(this).attr('data-reason', $op.val());

        if ($op.hasClass('is-special')) {
            $op.closest('.table-body').siblings('.special-reason').show();
        } else {
            $op.closest('.table-body').siblings('.special-reason').hide();
        }
    });
}

function bindTypeEvent() {
    $('.change-type .type').on('click', function() {
        $('.change-type .type').removeClass('active');
        $(this).addClass('active');
    });
}

function bindCheckboxEvent() {
    $('.checkbox-box').check({
        type: 'checkbox',
        group: 'exchange-good',
        onChange: function(ele, checked) {
            if (checked) {
                $(ele).closest('.change-info-box').addClass('will-change');
            } else {
                $(ele).closest('.change-info-box').removeClass('will-change');
            }
        }
    });
}

function submitChange(d) {
    $.ajax({
        url: '/me/return/submitExchange',
        data: d
    }).done(function(result) {
        console.log(result);
    }).fail(function(err) {
        console.log(err);
    });
}

function bindConfirmEvent() {
    $('.confirm').on('click', function() {
        var $changeGood = $('.change-info-box.will-change');
        var changeGoodsList = [];
        var changeData = {};

        $changeGood.each(function(index, good) {
            var goodObj = {};
            var $good = $(good);
            var $c = $good.find('.goods-container');
            var $f = $good.find('.form');

            goodObj.product_skn = $c.data('skn');
            goodObj.product_skc = $c.data('skc');
            goodObj.product_sku = $c.data('sku');
            goodObj.last_price = $c.data('price');
            goodObj.product_id = $c.data('id');
            goodObj.goods_type = $c.data('goodsType');
            goodObj.exchange_reason = $c.find('.exchange-reasons').data('reason');
            goodObj.new_goods_id = $f.find('.color-list .img-box.active img').data('goodsId');
            goodObj.new_product_sku = $f.find('.size-list span.active').data('sku');
            changeGoodsList.push(goodObj);
        });

        changeData.app_type = 1; // BLK的类型规定为1
        changeData.goods = changeGoodsList;
        changeData.area_code = addr.getAreaIds().split(',')[2];
        changeData.order_code = $('.returns-wrap>.order').data('code');
        changeData.consignee_name = $('#user').val();
        changeData.address = $('#addr').val();
        changeData.mobile = $('#mob').val();
        changeData.delivery_tpye = $('.change-type .type.active').data('type');

        submitChange(changeData);
    });
}


function initAddr() {
    addr = addrSelector({
        el: '#city'
    });
}

$(document).on('ready', function() {
    getProductInfo();
    bindSelectEvent();
    bindTypeEvent();
    bindCheckboxEvent();
    bindConfirmEvent();
    initAddr();
});