/**
 * [秒抢页面js]
 * author: 陈峰<feng.chen@yoho.cn>
 * date: 2016/09/08
 */
require('common.js');
require('common/share');
let yoho = require('yoho-app');
let $ = require('yoho-jquery'),
    IScroll = require('yoho-iscroll'),
    loading = require('plugin/loading'),
    lazyload = require('yoho-jquery-lazyload'),
    tip = require('plugin/tip');

loading.init($(document.body));

let seckillObj = {};

lazyload('img.lazy');

seckillObj = {
    $container: null, // .seckill-list

    $productList: null, // DOMContentLoaded的时候 赋值，即init
    pageTemplate: require('product/seckill/index.hbs'),
    listTemplate: require('product/seckill/product-list.hbs'),
    diff: 0, // 客户端与服务端时间的误差

    el: {},

    /**
     * [初始化界面]
     */
    init: function() {
        let self = this;

        this.$container = $('.seckill-list');
        this.pageLoad(function() {
            self.domInit();

            let $el = self.el;
            let focus = $el.$navUl.find('>li.focus');

            self.$productList = $('.product-list');

            $el.$navUl.find('>li').click(function(event) {
                self.selectTime(event.currentTarget);
            });

            // 在app webview中click捕获不到translate样式后的新位置
            // let $navLis = $el.$navUl.find('>li');

            // $navLis.on('touchmove', function() {
            //     self.navMove = true;
            // });
            // $navLis.on('touchend', function(event) {
            //     if (self.navMove) {
            //         self.navMove = false;
            //         return;
            //     }
            //     setTimeout(() => {
            //         self.selectTime(event.currentTarget);
            //     }, 200);
            // });

            $(window).resize(function() {
                self.initNav();
            });

            self.initNav();

            if (focus.length && (focus.hasClass('now') || focus.hasClass('wait'))) {
                self.initTick($el.$navUl.find('>li.focus'));
            }
            self.bindEvents();
        });
    },

    domInit: function() {
        this.el = {
            // doms
            $navUl: $('.nav-ul'),
            $navList: $('.nav-list'),

            // 变量
            times: $('.nav-ul>li').length,
            startX: 0,
            timeWidth: 0,
            focusTimeWidth: 0,
            iScroll: null,
            currentTick: null
        };
    },

    /**
     * [初始化时间段]
     */
    initNav: function() {
        let $el = this.el, that = this;

        $el.timeWidth = ($el.$navUl.find('>li:not(.focus)').width() + 1);
        $el.focusTimeWidth = ($el.$navUl.find('>li.focus').width() + 1);

        $el.$navUl.width($el.times * $el.timeWidth + $el.focusTimeWidth).removeClass('hide');

        // 只有时间段大于3个才需要定位
        if ($el.$navUl.find('>li').length > 3 && $el.$navUl.find('>li.focus').length) {
            $el.startX = (0 - ($el.$navUl.find('>li.focus').index() - 1) * $el.timeWidth);
        }
        if ($el.iScroll) {
            $el.iScroll.destroy();
        }
        $el.iScroll = new IScroll($el.$navList[0], {
            scrollX: true,
            scrollY: false,
            startX: $el.startX,
            tap: true,
            eventPassthrough: true,
            preventDefault: true,
            HWCompositing: false,
            bounceTime: 400,
            bounceEasing: {
                style: 'cubic-bezier(0.333333, 0.666667, 0.666667, 1)'
            }
        });
        that.registerScrollEvents($el.iScroll);
    },

    /**
     * [注册iscroll事件，滑动停止时判断位置自动选中居中时间段]
     */
    registerScrollEvents: function(iScroll) {
        let $el = this.el, that = this;

        iScroll.on('scrollStart', function() {
            $el.$navList.addClass('srolling');
        });
        iScroll.on('scrollEnd', function() {
            let offsetLeft = 0;
            let i = 0;

            // 避免死循环
            if ($el.$navList.hasClass('srolling')) {
                $el.$navList.removeClass('srolling');
                offsetLeft = this.x - $(window).width() / 2;

                for (; i < $el.$navUl.find('>li').length; i++) {
                    offsetLeft += $el.$navUl.find('>li').eq(i).width();
                    if (offsetLeft >= 0) { // 判断选中时间段
                        that.selectTime($el.$navUl.find('>li').eq(i));
                        break;
                    }
                }
            }
        });
    },

    /**
     * [选中时间段]
     */
    selectTime: function(elem) {
        let $el = this.el, that = this;
        let index = 0;

        $el.$navUl.find('>li').removeClass('focus');
        index = $(elem).index();

        $(elem).addClass('focus');

        // 点击切换时遇到首尾特殊处理选中时间段位置,大于3个才需要滑动选中
        if ($el.$navUl.find('>li').length > 3) {
            if (index === 0) {
                $el.iScroll.scrollTo(0, 0, 400);
            } else if (index === $el.$navUl.find('>li').length - 1) {
                $el.iScroll.scrollTo(0 - $el.$navUl.width() + $el.timeWidth * 2 + $el.focusTimeWidth, 0, 400);
            } else {
                $el.iScroll.scrollTo((0 - (index - 1) * $el.timeWidth), 0, 400);
            }
        }

        if ($el.currentTick) {
            clearTimeout($el.currentTick);
            delete $el.currentTick;
        }

        if ($(elem).hasClass('now') || $(elem).hasClass('wait')) {
            // 初始化倒计时并开始计时
            that.initTick(elem);
        }

        // 刷新商品列表
        that.refreshProductList(
            $(elem).find('input.activityId').val(),
            $(elem).find('input.date').val()
        );
    },

    /**
     * [刷新状态]
     */
    refreshList: function() {
        let $el = this.el, that = this, time, nowTime, nextTime;

        // 刷新时间段状态
        $el.$navUl.find('>li').each(function() {
            $(this).removeClass('now over wait');
            time = new Date(parseInt($(this).find('input.date').val(), 10));
            nowTime = new Date(Date.now() + that.diff * 1000);

            if (nowTime > time) { // 当前时间大于这个时间段，已经开始和即将开始两种情况
                if ($(this).next('.time-item').length) {
                    nextTime = new Date(parseInt($(this).next().find('input.date').val(), 10));

                    if (nowTime < nextTime) { // 下一个时间段与当前时间来区别是否正在抢购
                        $(this).addClass('now');
                        that.selectTime(this);
                    } else {
                        $(this).addClass('over');
                    }
                } else { // 大于这个时间段但是后面没有秒抢时间端了，则依然显示抢购中
                    $(this).addClass('now');
                    that.selectTime(this);
                }
            } else {
                $(this).addClass('wait');
            }
        });

        // 刷新商品列表
        let focusElem = $el.$navUl.find('>li.focus');

        if (focusElem.length) {
            that.refreshProductList(
                focusElem.find('input.activityId').val(),
                focusElem.find('input.date').val()
            );
        }
    },

    /**
     * [异步加载商品列表]
     */
    refreshProductList: function(activityId, startTime) {
        let self = this;
        let url = yoho.isApp ?
            '/product/seckill/get-product-list?app_version=1' :
            '/product/seckill/get-product-list';

        loading.showLoading();
        self.el.$navList.toggleClass('fix-top', false);
        $.ajax({
            url: url,
            data: {
                uid: yoho.isLogin(), // only app use;
                activityId: activityId,
                startTime: startTime
            },
            success: function(data) {
                data = $.extend(data, {isApp: yoho.isApp});
                $('.product-list').html(self.listTemplate(data));
                lazyload('img.lazy');
                window.scrollTo(0, 0);
                window.rePosFooter();
            },
            error: function() {
                tip.show('网络断开连接了~');
            }
        })
            .always(function() {
                loading.hideLoading();
            });
    },

    /**
     * [初始化倒计时]
     */
    initTick: function(elem) {
        let that = this,
            time,
            nowTime = Date.parse(new Date()) / 1000 + that.diff,
            offsetTime;

        if ($(elem).hasClass('now')) {
            time = $(elem).next().find('input.date').val() / 1000;
        } else {
            time = $(elem).find('input.date').val() / 1000;
        }
        offsetTime = time - nowTime;
        that.startTick(elem, offsetTime, nowTime);
    },

    /**
     * [开始倒计时]
     */
    startTick: function(elem, offsetTime, nowTime) {
        let that = this,
            $el = this.el,
            hour = parseInt(offsetTime / (60 * 60), 10),
            minute = parseInt(offsetTime % (60 * 60) / 60, 10),
            second = offsetTime % 60;

        if (offsetTime <= 0) { // 结束倒计时刷新状态
            that.refreshList(elem);
        } else {
            $(elem).find('.tick.hour').text(that.formatNumber(hour));
            $(elem).find('.tick.minute').text(that.formatNumber(minute));
            $(elem).find('.tick.second').text(that.formatNumber(second));

            $el.currentTick = setTimeout(function() {
                let curSec = Math.floor(Date.now() / 1000) + that.diff;

                offsetTime = offsetTime - (curSec - nowTime);
                that.startTick(elem, offsetTime, curSec);
            }, 1000);
        }
    },

    formatNumber: (number) => {
        if (number < 0) {
            return '00';
        } else if (number < 10) {
            return '0' + number;
        } else {
            return number;
        }
    },

    bindEvents: function() {
        let self = this;
        let $nav = self.el.$navList;
        let h = $nav.height();
        let top = $nav.position().top;

        $nav.wrap('<div style="height:' + h + 'px;"></div>');

        if (yoho.isApp) {
            this.$productList.on('click', '[data-remind]', $.proxy(this.toggleRemind, this));
        }

        $(document).on('scroll touchmove', function() {
            $nav.toggleClass('fix-top', $(window).scrollTop() > top);
        });
    },

    /*
        only app
        添加/删除提醒
    */
    toggleRemind: function(event) {
        let $remindBtn,
            $product;

        let actionName,
            action,
            params,
            on_off;

        let okTip,
            failTip,
            onsuccess;

        event.stopPropagation();

        if (!yoho.isLogin()) {
            yoho.invokeMethod('go.login');
            return;
        }

        $remindBtn = $(event.currentTarget);
        $product = $remindBtn.closest('.item');

        actionName = $remindBtn.data('action');

        // default
        on_off = true;
        action = 'go.addSecKill';
        params = {
            skn: $product.data('skn'),
            startTime: $product.find('[data-start]').data('start'),
            productName: $.trim($product.find('.item-title').text())
        };
        okTip = '设置提醒成功<br>将在开抢3分钟前提醒';
        failTip = '设置提醒失败';
        onsuccess = $.noop;



        if (actionName === 'cancel') {
            on_off = false;
            action = 'go.delSecKill';
            okTip = '取消提醒成功';
            failTip = '取消提醒失败';
        }

        onsuccess = function() {
            $.post('/product/seckill/remind?app_version=1', {
                on_off: on_off,
                activity_id: $product.data('activity'),
                product_skn: $product.data('skn'),
                uid: yoho.isLogin(),
                sec_kill_id: 1,
                app_type: 0
            })
                .done(function(res) {
                    if (res.code === 200 && res.data === 'success') {
                        $remindBtn.hide().siblings().show();
                        tip.show(okTip);
                    } else {
                        tip.show(failTip);
                    }
                })
                .fail(function() {
                    tip.show(failTip);
                });
        };

        yoho.invokeMethod(action, params, onsuccess, function() {
            tip.show(failTip);
        });
    },

    pageLoad: function(callback) {
        let self = this;
        let $xhr;

        loading.show();
        $xhr = $.ajax({
            url: '/product/seckill/list' + location.search,
        })
            .done(function(result) {
                self.$container.replaceWith(
                    self.pageTemplate($.extend(result, {
                        isApp: yoho.isApp
                    }))
                );

                lazyload('img.lazy');

                if (result && result.activitys && result.activitys.length) {
                    window.diff = self.diff = Math.round((result.currentTime - Date.now()) / 1000);
                    return callback();
                }

                window.rePosFooter();

            })
            .error(function() {
                self.$container.replaceWith(
                    self.pageTemplate({
                        error: '系统繁忙.....',
                        isApp: yoho.isApp
                    })
                );
            })
            .always(function() {
                loading.hide();
            });

        return $xhr;
    }
};



window.seckillRefresh = function() {
    // location.reload();
};

$(function() {
    seckillObj.init();
});

require('./seckill/goods-list');