/**
 * 商品详情
 * @author: yyqing<yanqing.yang@yoho.cn>
 * @date: 2016/7/15
 */

var $ = require('yoho-jquery'),
    handlebars = require('yoho-handlebars'),
    lazyload = require('yoho-jquery-lazyload'),
    Dialog = require('../plugins/dialog').Dialog,
    regx = require('../passport/common/mail-phone-regx').phoneRegx;

var $main = $('.product-main'),
    $mainThumb = $('#main-thumb'),
    $checkBtns = $('.check-btns');

var $tradeWrapper = $('.trade-wrapper'),
    $balanceWrapper = $('.balance-wrapper'),
    $thumbWrap = $('.thumb-wrap'),
    $colorText = $('.choose-color .color'),
    $sizeText = $('.choose-size .size'),
    $colorItem = $('.color-list .round-color'),
    $sizeList = $('.size-list'),
    $sizeItem = $('.size-list > li');

var $addToBag = $('#add-to-bag'),
    $soldOut = $('#sold-out');

var $sizeInfo = $('.size-info');

var $thumbCur = $('.thumb-wrap .cur'); // 当前选中展示图片

var SLIDETIME = 200;

var noticeFn = handlebars.compile($('#arrival-notice-tpl').html() || ''),
    noticeSuccFn = handlebars.compile($('#arrival-notice-success-tpl').html() || '');

var thumbsLoaded = [],
    id = $main.data('id');

require('../plugins/share');
require('../common/header');
require('../common/return-top');
require('../plugins/share');

lazyload($('img.lazy'));

function changeThumb($dom) {
    var data;

    if ($dom && $dom.length) {
        $thumbCur = $dom;
        $dom.addClass('cur').siblings('.cur').removeClass('cur');

        data = $dom.data();
        if (data.shower) {
            $mainThumb.attr('src', data.shower);
        }
    }
}

function getBuyProduct() {
    var sku;

    $sizeItem.each(function() {
        var $this = $(this),
            data;

        if ($this.hasClass('cur')) {
            data = $this.data();
            if (+data.num) {
                sku = data.sku;
            }
        }
    });

    return sku;
}

function chooseColor(index) {
    var $thumb = $thumbWrap.eq(index),
        $imgs = $thumb.children();

    $thumbWrap.not('.hide').addClass('hide');
    $thumb.removeClass('hide');
    changeThumb($imgs.first());

    if (!thumbsLoaded[index]) {
        lazyload($imgs, {
            event: 'sporty'
        });
        $imgs.trigger('sporty');

        thumbsLoaded[index] = true;
    }

    // 控制左右切换按钮显示与隐藏
    if ($imgs.length > 1) {
        $checkBtns.removeClass('hide');
    } else {
        $checkBtns.addClass('hide');
    }

    // 控制才显示对应颜色尺码
    $sizeList.not('.hide').addClass('hide').children('.cur').removeClass('cur');
    $sizeList.eq(index).removeClass('hide');
    $sizeText.text('');
}

function arrivalNotice() {
    var tip = new Dialog({
        className: 'arr-notice-dialog',
        content: noticeSuccFn(),
        btns: [
            {
                id: 'sure',
                btnClass: ['sure'],
                name: '确定',
                cb: function() {
                    // 目前没有到货通知接口，前端只有展示逻辑
                    tip.close();
                }
            }
        ]
    }).show();
}

function bagBtnSwitch(num) {
    if (num) {
        $addToBag.removeClass('hide');
        $soldOut.addClass('hide');
    } else {
        $addToBag.addClass('hide');
        $soldOut.removeClass('hide');
    }
}

// 缩略图垂直居中
$thumbWrap.each(function() {
    var $this = $(this),
        $child = $this.children();

    if ($child.length) {
        $this.css('padding-top', (642 - 105 * $child.length) / 2);
    }

});
$thumbWrap.parent().removeClass('hide');

// 展示图
$thumbWrap.on('mouseenter', '.thumb', function() {
    changeThumb($(this));
});

$checkBtns.on('click', '.iconfont', function() {
    var $dom;

    if ($(this).hasClass('pre-thumb')) {
        $dom = $thumbCur.prev();
    } else {
        $dom = $thumbCur.next();
    }

    if ($dom.length) {
        changeThumb($dom);
    }
});

// 颜色
$('.color-list').on('click', '.color-item', function() {
    var $this = $(this),
        index = $this.index(),
        data = $this.data();

    if (!$this.children().hasClass('cur')) {
        $colorItem.removeClass('cur');
        $colorText.text(data.color ? data.color : '');
        $this.children().addClass('cur');

        // 设置图片及尺码
        chooseColor(index);

        // 加入购物车按钮显示控制
        bagBtnSwitch(+data.total);
    }
});

// 尺码
$('.size-list').on('click', 'li', function() {
    var $this = $(this),
        data = $this.data();

    $sizeItem.removeClass('cur');
    $sizeText.text(data.name ? data.name : '');
    $this.addClass('cur');

    // 加入购物车按钮显示控制
    bagBtnSwitch(+data.num);
});

// 到货通知
$('.arr-notice').click(function() {
    var tip = new Dialog({
        className: 'arr-notice-dialog',
        content: noticeFn({}),
        btns: [
            {
                id: 'apply',
                btnClass: ['apply'],
                name: '订阅',
                cb: function() {
                    var dom = tip.$el.find('.notice-phone'),
                        num = dom.val ? dom.val() : '';

                    if (regx['+86'].test(num)) {
                        arrivalNotice(num);
                        tip.close();
                    } else {
                        dom.addClass('err');
                    }
                }
            },
            {
                id: 'cancel',
                btnClass: ['cancel'],
                name: '取消',
                cb: function() {
                    tip.close();
                }
            }
        ]
    }).show();
});

// 加入购物袋
$addToBag.click(function() {
    var sku = getBuyProduct();

    if (!sku) {
        $sizeText.html('<em class="blue">请选择尺码</em>');
        return;
    }

    $.ajax({
        type: 'POST',
        url: '/shopping/cart/add',
        data: {
            productSku: sku,
            buyNumber: 1
        }
    }).then(function(data) {
        if (data.code === 200) {
            $tradeWrapper.slideUp(SLIDETIME);
            $balanceWrapper.slideDown(SLIDETIME);
        }
    });
});

// 继续购物
$('#keep-shopping').click(function() {
    $balanceWrapper.slideUp(SLIDETIME);
    $tradeWrapper.slideDown(SLIDETIME);
});

$('#brand-fav').click(function() {
    var $this = $(this),
        param = {
            brandId: $this.data('id'),
            type: 'add'
        };

    if (!param.brandId) {
        return;
    }

    if ($this.hasClass('coll')) {
        param.type = 'cancel';
    }

    $.ajax({
        type: 'POST',
        url: '/product/brand/togglecollect',
        data: param
    }).then(function(data) {
        if (data.code === 200) {
            $this.toggleClass('coll');
        } else if (data.code === 400) {
            location.href = data.data.refer;
        }
    });
});

// 商品收藏
$('#collect-product').click(function() {
    var $this = $(this),
        param = {
            productId: id,
            type: 'add'
        };

    if ($this.hasClass('coll')) {
        param.type = 'cancel';
    }

    $.ajax({
        type: 'POST',
        url: '/product/item/togglecollect',
        data: param
    }).then(function(data) {
        if (data.code === 200) {
            $this.toggleClass('coll');
        } else if (data.code === 400) {
            location.href = data.data.refer;
        }
    });
});

$sizeInfo.on('click', '.show-img', function() {
    var img = $sizeInfo.data('img');

    new Dialog({
        className: 'item-doubt-dialog',
        content: '<img src="' + img + '">',
        btns: []
    }).show();
});