/**
 * 首页
 * @author: liuyue<yue.liu@yoho.cn>
 * @date: 2015/12/17
 */

var $ = require('yoho.jquery'),
    Handlebars = require('yoho.handlebars'),
    lazyLoad = require('yoho.lazyload');

require('../common/slider');
require('../common/logo-brand');

lazyLoad($('img.lazy'));
$('.slide-container').slider();
$('.logo-brand').logoBrand({
    showNum: 10,
    url: $('.logo-brand').data('url')
});

/*
 * 一周热卖
 */
(function($) {
    var floatlayer = $('.hot-week').find('.floatlayer'),
        sid = $('.hot-cate').find('li').eq(0).data('sid'),
        weekOffsetTop,
        source,
        template,
        page = 1,
        hotCateW = 0,
        weekEnd = false;

    source = '\{{# list}}' +
        '<div class="good-info">' +
            '<div class="item-img">' +
                '<a class="good-thumb" target="_blank" href="\{{url}}">' +
                    '<img class="lazy" data-original="\{{thumb}}">' +
                '</a>' +
            '</div>' +
            '<div class="good-detail-text">' +
                '<a target="_blank" href="{{url}}">{{name}}</a>' +
                '<p class="price">' +
                    '{{# marketPrice}}<span class="market-price">¥{{.}}</span>{{/ marketPrice}} ' +
                    '<span class="sale-price{{#unless marketPrice}}prime-cost{{/unless}}">' +
                    '¥{{salePrice}}</span>' +
                '</p>' +
            '</div>' +
        '</div>' +
        '{{/ list}}';

    //监听滚动事件，控制浮层样式及下拉加载更多
    $(window).on('scroll', function() {
        var maxH = weekOffsetTop + $('.hot-week').outerHeight(),
            sid;

        //热卖右侧浮动导航位置
        weekOffsetTop = $('.hot-week').offset().top;
        if ($(this).scrollTop() >= weekOffsetTop - $(window).height() / 2) {
            if (floatlayer.offset().top + floatlayer.outerHeight() >= maxH) {
                floatlayer.css({
                    position: 'absolute',
                    marginTop: 0,
                    top: $('.hot-week').outerHeight() - floatlayer.outerHeight()
                });
            } else {
                floatlayer.css({
                    marginTop: -floatlayer.height() / 2
                }).stop().animate({
                    opacity: 1
                }, 200, function() {
                    floatlayer.show();
                });
            }

        } else {
            floatlayer.stop().animate({
                opacity: 0
            }, 200, function() {
                floatlayer.hide();
            });
        }

        if (floatlayer.offset().top >= $(this).scrollTop() + ($(window).height() - floatlayer.outerHeight()) / 2) {
            floatlayer.css({
                position: 'fixed',
                marginTop: -floatlayer.height() / 2,
                top: '50%'
            });
        }

        //下拉加载
        if ($(this).scrollTop() >= weekOffsetTop + $('.hot-week').height() - $(window).height()) {
            if (!weekEnd) {
                sid = $('.hot-cate').find('li.current').data('sid');
                page++;
                weekEnd = true; //防止多次请求
                weekAjax(sid, page);
            }
        }

    });

    //热卖横导航及竖导航的超出显示控制
    $('.hot-cate').find('li').each(function(i) {
        var maxW = $('.hot-cate').width();

        if (hotCateW <= maxW) {
            hotCateW = hotCateW + $(this).width();
            if (hotCateW >= maxW) {
                $('.floatlayer').find('li').eq(i).hide().nextAll().hide();
            }
        }

    });

    //热卖横导航点击事件处理
    $('.hot-cate').on('click', 'li', function() {
        var nowIndex = $(this).index(),
            sid = $(this).data('sid');

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

        //处理current样式
        $(this).addClass('current').siblings().removeClass('current');
        $('.floatlayer').find('li').removeClass('current').eq(nowIndex).addClass('current');

        //返回热卖顶部，110为floor-header所占高度
        $('body,html').stop().animate({
            scrollTop: weekOffsetTop - 110
        }, 500);

        //调用ajax请求函数，重置page，weekEnd
        weekAjax(sid);
        page = 1;
    });

    //热卖右侧悬浮导航点击事件处理
    $('.floatlayer').on('click', 'li', function() {
        var nowIndex = $(this).index();

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

        $('.hot-cate').find('li').eq(nowIndex).trigger('click');

        //处理current样式
        $(this).addClass('current').siblings().removeClass('current');
        $('.hot-cate').find('li').removeClass('current').eq(nowIndex).addClass('current');
    });

    /*
     * 热卖内容ajax请求
     * param: sid(ajax请求的id), page(ajax请求的页码)
     */
    function weekAjax(sid, page) {
        var param = {};

        if (page) {
            param = {
                sid: sid,
                page: page
            };
        } else {
            param = {
                sid: sid
            };
        }
        $.ajax({
            type: 'GET',
            dataType: 'json',
            url: '/product/index/getdata',
            data: param,
            success: function(res) {
                var data;

                if (res.code === 200) {
                    data = {
                        list: res.data
                    };

                    //mustache渲染数据,并替换原内容
                    template = Handlebars.compile(source);
                    if (page) {
                        $('.hot-week-list').append(template(data));
                        floatlayer.css({
                            position: 'fixed',
                            marginTop: -floatlayer.height() / 2,
                            top: '50%'
                        });
                    } else {
                        $('.hot-week-list').html(template(data));
                    }

                    lazyLoad($('img.lazy'));
                    weekEnd = false;
                }
            }
        });
    }

    //热卖中导航current类处理
    $('.hot-cate').find('li').eq(0).addClass('current');
    $('.floatlayer').find('li').eq(0).addClass('current');
})($);