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

var dialog = require('../plugins/dialog');
var _alert = dialog.Alert;

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


var addressReg = /^[\s\S]{2,100}$/;
var phoneReg = /^(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;

var validate = require('./order/validation');

var imgBoxTpl = require('../../tpl/me/thumbnail.hbs');
var changeTypeTpl = require('../../tpl/me/change-type.hbs');

var validateMap = {
    user: {
        sl: '#user',
        v: {
            maxLength: 12,
            minLength: 2,
            necessary: true,
            errMsg: '真实姓名至少2个字符,最多12个字符'
        }
    },
    addr: {
        sl: '#addr',
        v: {
            reg: addressReg,
            errMsg: '详细地址不能为空'
        }
    },
    mob: {
        sl: '#mob',
        v: {
            reg: phoneReg,
            errMsg: '您输入的联系电话格式不正确'
        }
    }
};

lazyLoad($('.banner-img'));

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

// 个人中心共用代码加载
require('./me');

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) {
            var $box = $(ele).closest('.change-info-box');

            if (checked) {
                $box.addClass('will-change');
                $box.find('.form').removeClass('hide');
            } else {
                $box.removeClass('will-change');
                $box.find('.form').addClass('hide');
            }

            if ($('.will-change').length) {
                $('.btn.disable').removeClass('disable');
            } else {
                $('.btn.confirm').addClass('disable');
            }
        }
    });
}

function submitChange(d) {
    $.ajax({
        url: '/me/return/submitExchange',
        data: d
    }).done(function(result) {
        if (result.code === 200) {
            location.href = 'http://www.yohoblk.com/me/return/exchange/detail/?orderCode=' + result.data.apply_id;
        } else {
            new _alert('<h1>' + result.message + '</h1>').show();
        }
    }).fail(function(err) {
        console.log(err);
        new _alert('<h1>出错了!</h1>').show();
    });
}

function validateData() {
    var $inputs = $('.express-info-box .require input');
    var pass = true;

    $inputs.each(function(idx, input) {
        var k = input.id;

        if (k && validateMap[k]) {
            if (!validate.start(validateMap[k].sl, validateMap[k].v)) {
                pass = false;
            }
        }
    });

    // 检查地址
    if (!validate.addr(addr.getAreaIds(), {
        el: '#city',
        errMsg: '请填写完整的省市区信息'
    })) {
        pass = false;
    }

    return pass;
}

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

        if ($(this).hasClass('disable')) {
            return false;
        }

        if (!validateData()) {
            return false;
        }


        $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');

            if ($specialReason.length && $specialReason.get(0).style.display === 'block') {
                goodObj.remark = $specialReason.find('.right-content').find('.mark-text').val();

                $imgs = $specialReason.find('.right-content').find('.thumb-box');

                $imgs.each(function(idx, img) {
                    imgs.push($(img).data('img'));
                });

                goodObj.evidence_images = imgs;
            }
            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.delivery_tpye = $('.change-type .type.active').data('type');
        changeData.mobile = $('#mob').val();

        submitChange(changeData);
    });
}

function bindBlurEvent() {
    $('.express-info-box .require input').on('blur', function() {
        var $this = $(this);
        var v = validateMap[this.id];

        if ($this.val().length > 0) {
            validate.start(v.sl, v.v);
        }
    });
}


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

    if (areaCode) {
        addr.setAddress(areaCode.toString());
    }
}

function bindImgDeleteEvent() {
    $('.operation-box .delete').off('click').on('click', function() {
        var $thumb = $(this).closest('.thumb-box');
        var $t = $thumb.siblings('.img-up-tip');
        var number = $(this).closest('.left.right-content').find('.thumb-box').length - 1;

        $t.text(number + '/4');
        $thumb.siblings('.img-upload').show();
        $thumb.remove();
    });
}

function bindUploadEvent() {
    var $tip = $('.img-up-tip');

    $tip.text('0/4');

    $('.img-upload').on('click', function() {
        var upload = require('../plugins/upload');
        var that = this;
        var n = parseInt($(that).siblings('.thumb-box').length, 10);



        if (n < 4) {
            upload.up({
                callback: function(result) {
                    var img;
                    var $t;
                    var o;

                    if (result.code === 200) {
                        n = parseInt($(that).siblings('.thumb-box').length, 10);
                        o = {src: result.data};

                        if (result.imgs && result.imgs.length) {
                            o.url = result.imgs[0];
                        }

                        img = imgBoxTpl(o);
                        $t = $(that).next('.img-up-tip');
                        $(that).before(img);

                        n += 1;
                        $t.text(n + '/4');
                        bindImgDeleteEvent();

                        if (n >= 4) {
                            $(that).hide();
                        }

                    } else {
                        new _alert(result.message).show();
                    }
                }
            });
        }
    });
}

function bindKeyUpEvent() {
    $('.mark-text').on('keyup', function() {
        var $this = $(this),
            str = $.trim($this.val());

        if (str.length > 100) {
            str = str.substring(0, 100);
        }
        $this.val(str);
    });
}

function getChangeType(areaCode) {
    $.ajax({
        url: '/me/return/getChangeType',
        data: {
            areaCode: areaCode
        }
    }).done(function(result) {
        var changeTypeHtml = changeTypeTpl({
            type: result.data
        });

        if (changeTypeHtml.length) {
            $('.change-type .box-title').after(changeTypeHtml);
            bindTypeEvent();
        }
    });
}

$(document).on('ready', function() {
    var areaCode = $('#city').data('code');

    getProductInfo();
    getChangeType(areaCode);
    initAddr(areaCode);
    bindSelectEvent();
    bindCheckboxEvent();
    bindConfirmEvent();
    bindBlurEvent();
    bindUploadEvent();
    bindKeyUpEvent();
});