import 'home/family-coinMall.page.css';
import $ from 'yoho-jquery';
import Page from 'yoho-page';
import tip from 'plugin/tip';
import tabRender from 'home/coin-get-list.hbs';
import lazyLoad from 'yoho-jquery-lazyload';
import yoho from 'yoho-app';

class IconMall extends Page {
    constructor() {
        super();

        this.selector = {
            $tabItem: $('.tab .tab-item'),
            $defaultTabItem: $('.tab .tab-item:first'),
            $coinMallC: $('.coin-mall-c'),
            $tabFixed: $('.tab-fixed'),
            $yohonowTab: $('#yohonow-tab'),
            $marsTab: $('#mars-tab'),
            $acquiringHelp: $('.acquiring-help'),
            $detail: $('.detail')
        };

        this.view = {
            tabRender
        };

        this.page = 1;
        this.limit = 10;
        this.type = 'now';
        this.loading = false;
        this.end = false;
        this.fixTop = this.selector.$tabFixed.offset().top;
        this.beforeScroll = $(window).scrollTop();

        this.init();
    }

    init() {
        this.bindEvents();
        this.defaultChosen();
        this.scroll();
        this.getList();
        this.refreshUserInfo();

        if (yoho && yoho.isMarsApp) {
            yoho.ready(() => {
                yoho.invokeMethod('set.removeTopRightButton');
            });
        }
    }

    refreshUserInfo() {

        //  提供给app更改完个人信息之后刷新
        yoho.ready(function() {
            yoho.addNativeMethod('refreshUserInfomation', function() {
                location.href = location.href;
            });
        });
    }

    scrollHandler() {
        if (($(window).scrollTop() + $(window).height() >= $(document).height() * 0.3)) {
            this.doMore();
        }
    }

    doMore() {
        if (!this.end && !this.loading) {
            this.page++;
            this.getList();
        }
    }

    getList() {
        this.loading = true;
        if (this.type === 'now') {
            this.selector.$yohonowTab.append('<p class="show-more">加载中...</p>');
        }
        if (this.type === 'mars') {
            this.selector.$marsTab.append('<p class="show-more">加载中...</p>');
        }
        this.ajax({
            url: '/home/family/coinMall/getList',
            data: {
                type: this.type,
                page: this.page
            },
            complete: function() {
                $('.show-more').remove();
            }
        }).then(result => {
            if (result && result.list.length > 0) {
                let $result = $(this.view.tabRender(result));

                if (this.type === 'now') {
                    this.selector.$yohonowTab.append($result);
                }
                if (this.type === 'mars') {
                    this.selector.$marsTab.append($result);
                }

                this.loading = false;

                lazyLoad($result.find('img.lazy'));
            } else {
                if (this.type === 'now') {
                    this.selector.$yohonowTab.append('<p class="no-more">没有更多了...</p>');
                }
                if (this.type === 'mars') {
                    this.selector.$marsTab.append('<p class="no-more">没有更多了...</p>');
                }
                this.end = true;
            }
        }).catch(error => {
            console.error(error);
        });
    }

    scroll() {
        $(window).scroll(() => {
            setTimeout(() => {
                let afterScroll = $(window).scrollTop();

                if (afterScroll - this.beforeScroll > 0) {
                    window.requestAnimationFrame(this.scrollHandler.bind(this));
                    this.beforeScroll = afterScroll;
                } else {
                    return false;
                }
            }, 5);
        });
    }

    bindEvents() {
        this.selector.$tabItem.on('click', this.tabItem.bind(this));
        this.selector.$acquiringHelp.on('click', this.openHelp.bind(this));
        this.selector.$detail.on('click', this.openDetail.bind(this));
        $(window).on('scroll touchmove touchstart touchend', this.move.bind(this));
        $(document).on('click', '.go-btn', this.goConversion.bind(this));
    }

    move() {
        let $scrollTop = $(window).scrollTop();

        if ($scrollTop >= this.fixTop) {
            this.selector.$tabFixed.find('.tab').addClass('fixed');
        } else {
            this.selector.$tabFixed.find('.tab').removeClass('fixed');
        }
    }

    defaultChosen() {
        let defaultId = this.selector.$defaultTabItem.attr('id');

        this.selector.$defaultTabItem.addClass('active');
        this.selector.$coinMallC.attr('id', defaultId);
    }

    tabItem(e) {
        let $this = $(e.currentTarget);
        let $thisId = $this.attr('id');

        this.selector.$yohonowTab.empty();
        this.selector.$marsTab.empty();
        $(`#${$thisId}-tab`).show().siblings('.tab-item-c').hide();
        this.selector.$coinMallC.removeAttr('id');
        this.selector.$coinMallC.attr('id', $thisId);
        $this.addClass('active').siblings('div').removeClass('active');
        if ($this.attr('id') === 'yohonow') {
            this.type = 'now';
        }
        if ($this.attr('id') === 'mars') {
            this.type = 'mars';
        }
        this.page = 1;
        this.beforeScroll = 0;
        this.getList();
    }

    openHelp() {
        if (yoho && yoho.isNowApp) {
            yoho.invokeMethod('go.coins_help');
        } else if (yoho && yoho.isMarsApp) {
            yoho.invokeMethod('go.point_help');
        }
    }

    openDetail() {
        yoho.ready(() => {
            if (yoho && yoho.isNowApp) {
                yoho.invokeMethod('go.coins_detail');
            } else if (yoho && yoho.isMarsApp) {
                yoho.invokeMethod('go.point_detail');
            }
        });
    }

    goConversion(e) {
        let $this = $(e.currentTarget);
        let type = $this.closest('.tab-item-c').attr('id');
        let goodId = $this.data('id');
        let goodsLevel = $this.data('level');
        let point = $this.data('point');
        let goodtype = $this.data('type');

        if ($this.hasClass('usable')) {
            if (!$this.hasClass('no-store')) {
                yoho.ready(() => {
                    if (yoho && yoho.isMarsApp) {
                        yoho.invokeMethod('go.mars_point',
                            {goodId: goodId, goodsLevel: goodsLevel, point: point, goodType: goodtype});
                    } else if (yoho && yoho.isNowApp) {
                        yoho.invokeMethod('go.yohoCoins', {goodId: goodId, point: point, goodType: goodtype});
                    }
                });
            }
        } else {
            if (type === 'yohonow-tab') {
                tip.show('请到yohonowapp打开');
            } else if (type === 'mars-tab') {
                tip.show('请到mars打开');
            }
        }
    }
}

$(() => {
    new IconMall();
});