/**
 * 订单确认页地址相关
 * @author：xuqi<qi.xu@yoho.cn>
 * @date: 2016/7/12
 */

var $ = require('yoho-jquery'),
    cascadingAddress = require('../../plugins/cascading-address'),
    common = require('../../common'),
    popup = require('../../plugins/dialog'),
    xss = require('xss');

var $receiver = $('#receiver');

var Dialog = popup.Dialog,
    Confirm = popup.Confirm,
    Alert = popup.Alert;

var detailErr = '2-100字符。1个中文为2个字符';

var addressDialogTpl;
var addressTpl;

require('yoho-jquery-placeholder');
require('yoho-jquery-dotdotdot');

// dot someone
function dotYou($el) {
    $el.find('.address-detail').dotdotdot({
        wrap: 'letter'
    });
}

// place holder
function placeHolderYou($el) {
    $el.placeholder();
}

// set address-all show or not
function setAllOfAddress() {

    // 显示全部地址[3个地址块+1个新增地址按钮]
    if ($('#address-list .address').length > 3) {
        $('.address-all').removeClass('vhide');
    } else {
        $('.address-all').addClass('vhide');
    }
}

addressDialogTpl = require('../../../tpl/shopping/address-dialog.hbs');
addressTpl = require('../../../tpl/shopping/address-list.hbs');

// address dialog 数据验证
function validateAddress($el, isUpdate) {
    var field = {
        name: [
            {
                noEmpty: true,
                err: '收货人不能为空'
            },
            {
                regx: /[\u4e00-\u9fa5a-zA-Z\d]{2,12}/,
                err: '请输入2-12个汉字、英文或数字'
            }
        ],
        detail: [
            {
                noEmpty: true,
                err: '详细地址不能为空'
            }
        ],
        mobile: [
            {
                noEmpty: true,
                err: '手机号码不能为空'
            }
        ],
        phone: [
            {
                regx: /^[\d-]+$/,
                err: '只能包含数字、-组合',
                skipWhenEmpty: true
            }
        ]
    };

    var key,
        $cur,
        cur,
        vaKey,
        vaRegx;

    var pass = true;

    // 新增情况下须验证正确的手机号；编辑情况下可通过****的验证
    if (isUpdate) {
        field.mobile.push({
            regx: /^\d{3}(\d|\*){4}\d{4}$/, // 验证正常数字或者****
            err: '手机号码格式不正确'
        });
    } else {
        field.mobile.push({
            regx: /^\d{11}$/,
            err: '手机号码格式不正确'
        });
    }

    for (key in field) {
        if (field.hasOwnProperty(key)) {
            $cur = $el.find('.address-' + key);
            cur = $cur.val();

            // 按顺序去验证对应filed的值
            for (vaKey = 0; vaKey < field[key].length; vaKey++) {
                vaRegx = field[key][vaKey];

                // 非空验证、非空下正则验证、其他正则验证
                if ((vaRegx.noEmpty && cur === '') || (vaRegx.regx &&
                    (vaRegx.skipWhenEmpty ? !(cur === '' || vaRegx.regx.test(cur)) : !vaRegx.regx.test(cur))
                )) {
                    pass = false;
                    $cur.siblings('.error-tips').find('em').text(vaRegx.err).end().show();
                    break;
                }

                // 否则隐藏提示
                $cur.siblings('.error-tips').hide();
            }

            if (key === 'detail' && common.getStrLength($cur.val()) > 100) {
                pass = false;
                $cur.siblings('.error-tips').find('em').text(detailErr).end().show();
            }
        }
    }

    // 区域判断
    if (!$el.address.hasFullAera()) {
        pass = false;
        $('.cascading-address + .error-tips').show();
    } else {
        $('.cascading-address + .error-tips').hide();
    }

    return pass;
}

// 更新收货信息：姓名，手机号码，区域，详细
function receiver(ad) {
    var html = ad.consignee + ' ' + ad.mobile + ' ' + ad.area + ' ' + ad.address;

    $receiver.html(xss(html));
}

// 地址弹窗Factory
function addressDialogFactory(opt, $the) {
    var address = new Dialog({
        closeIcon: false,
        className: 'address',
        content: addressDialogTpl(opt),
        btns: [
            {
                id: 'save-address',
                btnClass: ['save-address'],
                name: '保存',
                cb: function() {
                    var $el = address.$el,
                        consignee,
                        detail,
                        mobile,
                        phone,
                        areaCode;

                    // 验证输入
                    if (validateAddress(address.$el, opt && opt.id)) {

                        // form value
                        consignee = $el.find('.address-name').val();
                        detail = $el.find('.address-detail').val();
                        mobile = $el.find('.address-mobile').val();
                        phone = $el.find('.address-phone').val();
                        areaCode = $el.address.getAreaIds().split(',')[2];

                        if (opt && opt.id) {

                            // update
                            $.ajax({
                                type: 'POST',
                                url: '/me/address/update',
                                data: {
                                    id: opt.id,
                                    consignee: consignee,
                                    address: detail,
                                    mobile: mobile,
                                    phone: phone,
                                    'area_code': areaCode // eslint-disable-line
                                }
                            }).then(function(data) {
                                var updated;

                                if (data.code === 200) {
                                    updated = {
                                        consignee: consignee,
                                        address: detail,
                                        mobile: mobile.replace(/^(\d{3}).*(\d{4})$/, '$1****$2'),
                                        phone: phone,
                                        area_code: data.data.area_code, // eslint-disable-line
                                        address_id: opt.id,
                                        focus: $the.hasClass('focus'),
                                        area: $el.address.getAreaLabels().replace(/,/g, ' '),
                                        is_default: $the.hasClass('default') ? 'Y' : 'N'
                                    };

                                    $the.before(addressTpl({
                                        address: [updated]
                                    }));

                                    // 如果当前地址正在被使用，则更新收货信息
                                    if ($the.hasClass('focus')) {
                                        receiver(updated);
                                    }

                                    dotYou($the.prev('.address'));

                                    $the.remove();
                                    address.close();
                                }
                            });
                        } else {

                            // add
                            $.ajax({
                                type: 'POST',
                                url: '/me/address/add',
                                data: {
                                    consignee: consignee,
                                    address: detail,
                                    mobile: mobile,
                                    phone: phone,
                                    'area_code': areaCode, // eslint-disable-line
                                    init: opt.init
                                }
                            }).then(function(data) {
                                var the;

                                if (data.code === 200) {
                                    the = $.extend(data.data, {
                                        focus: true
                                    });

                                    $('.address.focus').removeClass('focus');

                                    $('#address-list').prepend(addressTpl({
                                        address: [the],
                                        hasNew: opt.init ? true : false // 初始地址添加增加收货地址的block
                                    }));

                                    dotYou($('#address-list .address').first());

                                    setAllOfAddress();

                                    // 新地址默认使用，更新收货信息
                                    receiver(the);

                                    address.close();
                                }
                            });
                        }
                    }
                }
            },
            {
                id: 'cancel-address',
                btnClass: ['cancel-address', 'white'],
                name: '取消',
                cb: function() {
                    address.close();
                }
            }
        ]
    });

    return address;
}

/**
 * 初始化弹窗内容
 * @param $el dialog的jquery对象
 * @param areaCode 区码，初始化选择区域的组件
 */
function initAddressContent($el, areaCode) {

    // 初始化地址组件/将组件attr到$el方便操作
    $el.address = cascadingAddress({
        el: '#address'
    });

    if (areaCode) {
        $el.address.setAddress(areaCode + ''); // need convert to string
    }

    // blur验证
    $('.address-detail').on('blur', function() {
        var $cur = $(this);

        if (common.getStrLength($cur.val()) > 100) {
            $cur.siblings('.error-tips').find('em').text(detailErr).end().show();
        } else {
            $cur.siblings('.error-tips').hide();
        }
    });

    // place holder
    placeHolderYou($el.find('[placeholder]'));
}

/**
 * 新增地址
 * @param isInit Boolean 是否地址列表无地址(首次添加不显示取消按钮)
 */
function newAddress(isInit) {
    var address;

    address = addressDialogFactory({
        init: isInit ? true : false
    });

    if (isInit) {
        address.$el.addClass('is-init');
    }

    initAddressContent(address.$el);

    address.show();
}

function newAddressHandle() {

    // 判断是否超过20条地址
    if ($('#address-list .address').length >= 7) {
        new Alert('您最多添加7个收货地址，可删除不需要的地址后再添加新地址').show();
        return;
    }

    newAddress();
}

// 显示全部地址
$('.address-all').click(function() {
    $(this).siblings('.address-list').removeClass('shrink').end().addClass('vhide');
});

// 新增地址
$('.new-address').click(newAddressHandle);

$('.address-list').on('click', '.address', function() {

    // 地址切换
    var $this = $(this);

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

    $this.addClass('focus');
    $this.siblings('.focus').removeClass('focus');

    // 切换地址后切换收货信息
    receiver({
        consignee: $this.data('name'),
        area: $this.data('area'),
        mobile: $this.data('mobile'),
        address: $this.data('address')
    });
}).on('click', '.modify', function(e) {


    // 修改地址
    var $this = $(this).closest('.address');
    var areaCode = $this.data('areacode');
    var address = addressDialogFactory({
        updateAddress: true,
        id: $this.data('id'),
        name: $this.data('name'),
        mobile: $this.data('mobile'),
        phone: $this.data('phone'),
        areacode: areaCode,
        detail: $this.data('address')
    }, $this);

    initAddressContent(address.$el, areaCode);

    address.show();

    e.stopPropagation();
}).on('click', '.delete', function(e) {

    // 删除地址
    var $this = $(this).closest('.address');

    var delConfirm = new Confirm({
        className: 'address-confirm-dialog',
        content: '<p class="main">删除地址</p><p class="sub">您确定要删除该收货地址吗？</p>',
        cb: function() {

            // 确认删除，do something
            $.ajax({
                type: 'POST',
                url: '/me/address/del',
                data: {
                    id: $this.data('id')
                }
            }).then(function(data) {
                if (data.code === 200) {

                    // 若当前选中，则移除后选中默认地址
                    if ($this.hasClass('focus')) {
                        $this.siblings('.default').addClass('focus');
                    }
                    $this.remove();
                    delConfirm.close();

                    setAllOfAddress();
                }
            });
        }
    }).show();

    e.stopPropagation();
}).on('click', '.set-default', function(e) {

    // 设置为默认地址
    var $this = $(this).closest('.address');

    $.ajax({
        type: 'POST',
        url: '/me/address/default',
        data: {
            id: $this.data('id')
        }
    }).then(function(data) {
        if (data.code === 200) {

            // 切换default和focus状态
            $this.addClass('default focus');
            $this.siblings('.default, .focus').removeClass('default focus');
        }
    });
    e.stopPropagation();
}).on('click', '.new-address-block', newAddressHandle);

// 页面加载时请求地址列表，若有则展示列表；若无则直接显示新建弹窗并不可被关闭
$.ajax({
    url: '/me/address/list'
}).then(function(data) {
    var list;

    if (data && data.code === 200) {
        if (data.data.length === 0) {

            // new address
            newAddress(true);
        } else {
            list = data.data.slice(0, 7);
            $('#address-list').append(addressTpl({
                address: list,
                hasNew: true
            }));

            // 3个地址块+1个新增地址块
            if (list.length > 3) {
                $('.address-all').removeClass('vhide');
            }

            dotYou($('.address'));
        }
    }
});