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.init();
    }

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

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

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

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

    getList() {
        this.loading = true;
        this.ajax({
            url: '/home/family/coinMall/getList',
            data: {
                type: this.type,
                page: this.page
            }
        }).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;

                this.selector.$goBtn = $('.go-btn');
                this.selector.$goBtn.on('click', this.goConversion.bind(this));

                lazyLoad($result.find('img.lazy'));
            } else {
                this.end = true;
                tip.show('没有更多数据了～～～');
            }
        }).catch(error => {
            console.error(error);
        });
    }

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

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

            $(window).scroll(() => {
                window.requestAnimationFrame(this.scrollHandler.bind(this));
            });
        });
    }

    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));
    }

    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.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');

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

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