/**
 * 商品详情页
 * @author: tao.huang<tao.huang@yoho.cn>
 * @date: 2016/9/22
 */

/**
 *  说明：这里有一些优化方法。
 *  页面已经被 nginx 缓存，变化后的数据需要通过 ajax 进行获取后，重新绑定事件。
 */

var $ = require('yoho-jquery'),
    lazyLoad = require('yoho-jquery-lazyload'),
    dataLazyLoad = require('../plugins/lazy-load')(document),
    Handlebars = require('yoho-handlebars');

var bindEvent = $.Callbacks(); // eslint-disable-line

var $main = $('.main'),
    id = $main.data('id'),
    md5 = $main.data('md5'),
    skn = $main.data('skn');

var SLIDETIME = 200;

var colTxt = {
    def: '收藏商品',
    coled: '已收藏',
    hover: '取消收藏'
};

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

bindEvent.add(function() {
    var $imgShow = $('#img-show'),
        $thumbs = $('#thumbs > .thumb-wrap');

    var $size = $('#sizes'),
        $sizes = $size.children('.size'),
        $sizeWarn = $size.find('.size-warn'),
        $colorSizeTip = $size.children('.color-size-tip');

    var $num = $('#num'),
        $plusNum = $('#plus-num'),
        $minusNum = $('#minus-num');

    var $addToCart = $('#add-to-cart'),
        $soldOut = $('#sold-out');

    var $lcContainer = $('.lc-container'),
        $itemBuy = $('.item-buy');

    var $descColor = $('#desc-color');

    var thumbsLoaded = {};

    var isTicket = $('input[name="isTicket"]').length > 0 && $('input[name="isTicket"]').val() === 'true';

    var maxStock = -1; // 记录当前选中的颜色-尺码的库存量，若为-1，代表未选择尺码

    var Alert = require('../common/dialog').Alert;

    function imgShow(src) {
        $imgShow.attr('src', src);
    }

    /**
     * 获取当前选择的商品数目
     * @return [Number]
     */
    function getNum() {
        return +$num.text();
    }

    // 重置Num显示为1
    function resetNum() {
        $num.text('1');

        // +-按钮状态重置
        if (maxStock === 1 || maxStock === 0) {

            // 数目为1/0时
            $plusNum.addClass('dis');
            $minusNum.addClass('dis');
        } else {
            $plusNum.removeClass('dis');
            $minusNum.addClass('dis');
        }
    }

    // 加入购物车和已售罄状态控制
    function switchBtnStatus($color) {
        if ($itemBuy.length === 0) {

            // 全部售罄，按钮状态不变
            return;
        }

        // 选中的商品存量为0或者某个颜色的total为0
        if (maxStock === 0 || ($color && ~~$color.data('total') === 0)) {
            $itemBuy.addClass('hide'); // 隐藏加入购物车、即将开始、立即购买等相同位置的按钮
            $soldOut.removeClass('hide');
        } else {

            // 包括默认的-1情况下
            $itemBuy.removeClass('hide');
            $soldOut.addClass('hide');
        }
    }

    // size warn
    function showSizeWarn() {
        $sizes.not('.hide').children('.size-warn').removeClass('hide');
    }

    // size title
    (function() {
        var $sizeTitleJson = $('#size-title-json'),
            jsonHtml = $sizeTitleJson.html(),
            sizeTitle;

        if (!jsonHtml) {
            return;
        }

        sizeTitle = $.parseJSON(jsonHtml);

        // 数据获取后删除
        $sizeTitleJson.remove();

        $sizes.children('li').each(function() {
            var $this = $(this),
                key = $this.data('name');

            $this.data('title', sizeTitle[key]);
        });
    }());

    require('../plugins/share');

    // 品牌收藏
    $('#brand-favour').click(function() {
        var $this = $(this);

        $.ajax({
            type: 'POST',
            url: '/product/index/favoriteBrand',
            data: {
                brandId: $this.data('id')
            }
        }).then(function(data) {
            if (data.code === 200) {
                $this.toggleClass('coled');
            } else if (data.code === 403) {
                location.href = data.data.url;
            }
        });
    });

    // 颜色
    $('.colors').on('click', 'li', function() {
        var $this = $(this),
            index = $this.index();

        var $imgs;

        // 初始化color-size显示或隐藏
        $colorSizeTip.addClass('hide');

        // 隐藏尺码提示
        $sizeWarn.addClass('hide');

        maxStock = -1;

        if ($this.hasClass('focus')) {

            // 已获取焦点的颜色再次点击，清除尺码的选中
            $sizes.eq(index).children('li').removeClass('focus');
        } else {

            // 未获取焦点，选择尺码
            $this.siblings('.focus').removeClass('focus');
            $this.addClass('focus');

            // 切换图片显示
            $thumbs.not('.hide').addClass('hide');
            $imgs = $thumbs.eq(index).removeClass('hide').find('img');

            if (typeof thumbsLoaded[index] === 'undefined') {

                // trigger layLoad
                lazyLoad($imgs, {
                    event: 'sporty'
                });

                $imgs.trigger('sporty');

                thumbsLoaded[index] = true;
            }

            imgShow($imgs.first().data('shower'));

            // 切换详细信息的颜色显示
            $descColor.text($this.data('color'));

            // 切换尺码显示
            $sizes.not('.hide').addClass('hide').children('li').removeClass('focus');
            $sizes.eq(index).removeClass('hide');

            // 是否展览票
            if (isTicket) {
                $sizes.eq(index).children('li').trigger('click');
                $('.chose-size').addClass('hide');
            }
        }

        resetNum();
        switchBtnStatus($this);
    });

    // 缩略图鼠标移入显示
    $('#thumbs').on('mouseenter', '.thumb', function() {
        imgShow($(this).data('shower'));
    });

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

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

        maxStock = +$this.data('num');

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

        $colorSizeTip.html($this.data('title')).removeClass('hide');

        $sizeWarn.addClass('hide');

        switchBtnStatus();

        resetNum();
    }).on('click', '.size-ruler', function() {

        // 尺码帮助

        $('body,html').animate({
            scrollTop: $('.size-info').offset().top
        }, 300);
    });

    // 增加购买数量
    $plusNum.click(function() {
        var num = getNum();

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

        if (maxStock === -1) {
            showSizeWarn();// 显示选择尺码提示
            return;
        }

        // 已售罄
        if (maxStock === 0) {
            return;
        }

        if (num === maxStock - 1) {

            // +按钮不可点
            $(this).addClass('dis');
        }

        // 数目为1时点+则移除-不可点状态
        if (num === 1) {
            $minusNum.removeClass('dis');
        }

        $num.text(num + 1 > maxStock ? maxStock : num + 1);
    }).on('selectstart', function() {
        return false;
    });

    // 减少购买数量
    $minusNum.click(function() {
        var num = getNum();

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

        if (num === 2) {
            $(this).addClass('dis');
        }

        if (num === maxStock) {

            // 恢复+可点
            $plusNum.removeClass('dis');
        }

        $num.text(num - 1 < 0 ? 0 : num - 1);
    }).on('selectstart', function() {
        return false;
    });

    // 限购码
    $('.get-lc:not(.dis)').hover(function() {
        $lcContainer.removeClass('hide');
    }, function() {
        $lcContainer.addClass('hide');
    });

    // 加入购物车
    $addToCart.click(function() {
        if (maxStock === -1) {
            showSizeWarn();
            return;
        }

        $.ajax({
            type: 'POST',
            url: '/cart/index/add',
            data: {
                productSku: $('.size:not(.hide) li.focus').data('sku'),
                buyNumber: getNum()
            }
        }).then(function(data) {
            var code = data.code;

            if (code === 200) {
                $('#type-chose').slideUp(SLIDETIME);
                $('#balance').slideDown(SLIDETIME);

                $('#cart-num').text(data.data.goods_count); // 更新数目
            }
        });
    });

    // 收藏
    $('#collect-product').click(function() {
        var $this = $(this),
            cancel;

        if ($this.hasClass('coled')) {
            cancel = true;
        }

        $.ajax({
            type: 'POST',
            url: '/product/item/togglecollect',
            data: {
                productId: id,
                type: cancel ? 'cancel' : 'add'
            }
        }).then(function(data) {
            var code = data.code;

            if (code === 200) {

                $this.toggleClass('coled');

                if (cancel) {
                    $this.find('em').text(colTxt.def);
                } else {
                    $this.find('em').text(colTxt.coled);
                }
            } else if (code === 403) {
                location.href = data.data.url;
            }
        });
    }).hover(function() {
        var $this = $(this);

        if ($this.hasClass('coled')) {
            $this.find('em').text(colTxt.hover);
        }
    }, function() {
        var $this = $(this);

        if ($this.hasClass('coled')) {
            $this.find('em').text(colTxt.coled);
        }
    });

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

    // 电子票立即购买
    $('#buy-ticket').click(function() {
        var sku,
            buyNumber;

        if (maxStock === -1) {
            showSizeWarn();
            return;
        }

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

        sku = $('.size:not(.hide) li.focus').data('sku');
        buyNumber = getNum();

        $.ajax({
            type: 'POST',
            url: '/cart/index/setTicket',
            data: {
                productSku: sku,
                buyNumber: buyNumber
            }
        }).then(function(data) {
            var $ticketForm,
                myAlert;

            if (data.code * 1 === 200) {
                $ticketForm = $('form[name="ticket-form"]');
                $ticketForm.html(
                    '<input name="productSku" value="' + sku + '" />' +
                    '<input name="buyNumber" value="' + buyNumber + '" />'
                );
                $ticketForm.submit();
            } else if (data.code * 1 === 401) {
                document.location.href = data.message;
            } else {
                myAlert = new Alert(data.message);
                myAlert.show();
            }
        });
    });

    // 立即购买
    $('#buy-now').click(function() {
        var sku,
            base,
            myAlert;

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

        if (maxStock === -1) {
            showSizeWarn();
            return;
        }

        base = $(this).data('base');

        // 潮流尖货
        if (!base) {
            myAlert = new Alert('打开APP可抢购该商品哦~~');
            myAlert.show();
            return;
        }

        sku = $sizes.find('.focus').data('sku');

        if (sku && base) {
            location.href = base + '?product_sku=' + sku;
        }
    });

    // 按钮鼠标移入效果【dis状态的按钮状态不变】
    $('.buy-btn').mouseover(function() {
        if ($(this).hasClass('dis')) {
            return;
        }

        $(this).addClass('hover');
    }).mouseleave(function() {
        $(this).removeClass('hover');
    });

    // 只有一个尺码（多个或一个颜色）时默认选中第一个未售罄的颜色的第一个尺码
    (function() {
        var hasOnlyOneSize = true,
            i;

        for (i = 0; i < $sizes.length; i++) {
            if ($sizes.eq(i).find('li').length !== 1) {
                hasOnlyOneSize = false;
                break;
            }
        }

        if (hasOnlyOneSize) {
            $sizes.eq($('.colors .focus').index()).find('li').click();
        }
    }());

});

// yas
require('../common');
// 最近浏览
require('./detail/latest-walk');

// 商品详情/材质洗涤切换
$('.description-material').on('click', '.title', function() {
    var $this = $(this),
        index = $this.index();

    var $description = $('.description-content'),
        $material = $('.material-content');

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

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

    if (index === 0) {

        // 商品信息
        $description.slideDown(SLIDETIME);
        $material.slideUp(SLIDETIME);
    } else {
        $description.slideUp(SLIDETIME);
        $material.slideDown(SLIDETIME);
    }
});

// 售后服务
$('.after-service-switch').click(function() {
    var $this = $(this),
        $content = $this.next('.after-service-content');

    var html = {
        def: '&#xe610;',
        spread: '&#xe615;'
    };

    if ($content.css('display') === 'none') {
        $content.slideDown(SLIDETIME);

        $this.find('.triangle').html(html.spread);
    } else {
        $content.slideUp(SLIDETIME);

        $this.find('.triangle').html(html.def);
    }
});

// 商品详情区的热点

function fetchHotArea() {
    $.ajax({
        type: 'GET',
        url: '/product/detail/hotarea',
        data: {
            productId: id
        }
    }).then(function(html) {
        $('#details-html').prepend(html);

        // 修正热区尺寸使居中
        $('.hot-point-wrap > img').load(function() {
            $(this).parent('.hot-point-wrap').width($(this).width());
        });

        // Bind Hover event
        $('.hot-point').hover(function() {
            $(this).addClass('hover');
        }, function() {
            $(this).removeClass('hover');
        });
    });
}

window.fetchHotArea = fetchHotArea;

// 商品详情图片懒加载
lazyLoad($('#details-html img'));



// 咨询和评价
function fetchComment() {
    var commentPage = 1,
        consultPage = 1;

    var commentsTpl = Handlebars.compile($('#comments-tpl').html()),
        consultsTpl = Handlebars.compile($('#consults-tpl').html());

    var $commentsUl = $('#comments-ul'),
        $consultsUl = $('#consults-ul');

    var $commentNum = $('.comment-num'),
        $consultNum = $('.consult-num');

    var loadingComments,
        loadingConsults;

    // 购买评价
    function loadComments() {
        if (loadingComments) {
            return;
        }

        loadingComments = true;
        $.ajax({
            type: 'GET',
            url: '/product/detail/comment',
            data: {
                productId: id,
                page: commentPage
            }
        }).then(function(data) {
            var res;

            if (data.code === 200) {
                res = data.data;

                if (res.length === 0) {
                    $commentsUl.next('.more-wrap').addClass('hide');
                    return;
                }

                // 更新总数显示
                $commentNum.text(res[0].total);

                $commentsUl.append(commentsTpl({
                    comments: res
                }));
                commentPage++;
            }
        }).always(function() {
            loadingComments = false;
        });
    }

    // 顾客咨询
    function loadConsults() {
        if (loadingConsults) {
            return;
        }

        loadingConsults = true;

        $.ajax({
            type: 'GET',
            url: '/product/detail/consult',
            data: {
                productId: id,
                page: consultPage
            }
        }).then(function(data) {
            var res;

            if (data.code === 200) {
                res = data.data;

                if (res.length === 0) {
                    $consultsUl.next('.more-wrap').addClass('hide');
                    return;
                }

                // 更新总数显示
                $consultNum.text(res[0].total);

                $consultsUl.append(consultsTpl({
                    consults: res
                }));
                consultPage++;
            }
        }).always(function() {
            loadingConsults = false;
        });
    }

    // 评价和咨询切换
    $('.consult-comment').on('click', '.title', function() {
        var $this = $(this),
            index = $this.index();

        var $comments = $('.comments'),
            $consults = $('.consults');

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

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

        if (index === 0) {

            // 咨询
            $consults.slideDown(SLIDETIME);
            $comments.slideUp(SLIDETIME);
        } else {
            $consults.slideUp(SLIDETIME);
            $comments.slideDown(SLIDETIME);
        }
    }).on('click', '.load-more', function() {
        var $this = $(this);

        if ($this.hasClass('load-more-comments')) {
            loadComments();
        } else {
            loadConsults();
        }
    });

    // 我要咨询
    $('#consults-btn').click(function() {

        // TODO:点击我要资讯的时候更新验证码显示
        $('.new-consult').removeClass('hide');
        $('.consult-success').addClass('hide');
    });

    // 提交咨询
    $('#submit-consult').click(function() {
        var $this = $(this),
            $parent = $this.closest('.new-consult'),
            $textarea = $parent.find('.my-consult'),
            content = $.trim($textarea.val());

        var $consultWarn = $parent.find('.consult-warn');

        var pass = true;

        if (content === '') {
            $textarea.addClass('error');
            $consultWarn.removeClass('hide');

            pass = false;
        } else {
            $textarea.removeClass('error');
            $consultWarn.addClass('hide');
        }

        if (pass === false) {
            return;
        }

        $.ajax({
            type: 'POST',
            url: '/product/detail/consult',
            data: {
                productId: id,
                content: content
            }
        }).then(function(data) {
            var code = data.code;

            if (code === 200) {
                $parent.addClass('hide');

                $parent.siblings('.consult-success').removeClass('hide');

                // 清空输入
                $textarea.val('');
            } else if (code === 400) {

                // 跳转登录页
                location.href = data.data.refer;
            }
        });
    });

    loadComments();
    loadConsults();
}

window.fetchComment = fetchComment;

// 特殊商品退换货
function fetchReturn() {
    return $.ajax({
        type: 'GET',
        url: '/product/detail/return',
        data: {
            skn: skn
        }
    }).then(function(result) {
        if (result.code === 200) {
            if (result.data.result === 'N') {
                $saleReturn.removeClass().addClass('not-support-saleReturned-service');
            }
        }
    });
}

window.fetchReturn = fetchReturn;

// 首屏加载，绑定事件
bindEvent.fire();

// 首屏加载后，对比数据是否变化，如果变化，重新渲染，重新绑定事件
// 当前只渲染商品详情页的变化敏感的部分
(function() {
    $.ajax({
        type: 'GET',
        url: '/product/detail/header',
        dataType: 'html',
        data: {
            productId: id,
            md5: md5
        }
    }).then(function(result) {
        if (result) {
            $('.main').html(result);
            bindEvent.fire();
        }
    });
}());

// 数据懒加载
dataLazyLoad.init({cls: 'datalazyload', threshold: 0});