import 'home/family-coin.page.css';
import $ from 'yoho-jquery';
import Page from 'yoho-page';
import tip from 'plugin/tip';
import resultRender from 'home/coin-list.hbs';
import yoho from 'yoho-app';

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

        this.selector = {
            $coverBg: $('.cover-bg'),
            $tabItem: $('.tab-item'),
            $scoreDetailC: $('.score-detail-c'),
            $chosen: $('.tab-item .list').find('li'),
            $defaultChosen: $('.tab-item .list').find('li:first'),
            $defaultChosenTime: $('#time .list').find('li:last'),
            $result: $('.result'),
            $source: $('#source').find('.name'),
            $queryType: $('#queryType').find('.name'),
            $time: $('#time').find('.name')
        };

        this.view = {
            resultRender
        };

        this.source = window.queryString.plateType || -1;
        this.queryType = 0;
        this.endTime = Date.parse(new Date());
        this.beginTime = parseInt(this.endTime, 10) - parseInt(31104000000, 10); // 默认显示一年内
        this.page = 1;
        this.loading = false;
        this.end = false;

        this.init();
    }

    init() {
        this.setHeight();
        this.bindEvents();
        this.chosenData();
        this.scroll();
        this.defaultTab();

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

    defaultTab() {
        this.selector.$defaultChosen.addClass('chosen');
        this.selector.$defaultChosenTime.addClass('chosen').siblings('li').removeClass('chosen');
        if (window.queryString.plateType) {
            let $defaultSource = $('#source').find(`li[data-source=${window.queryString.plateType}]`);

            $defaultSource.addClass('chosen').siblings('li').removeClass('chosen');
            this.selector.$source.text($defaultSource.find('.title').text());
        }
    }

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

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

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

    bindEvents() {
        this.selector.$tabItem.on('click', this.tab.bind(this));
        this.selector.$coverBg.on('click', this.coverBg.bind(this));
        this.selector.$chosen.on('click', this.chosen.bind(this));
    }

    chosen(e) {
        let $this = $(e.currentTarget);
        let $parensId = $this.parents('.tab-item').attr('id');

        this.selector.$result.empty();
        switch ($parensId) {
            case 'source':
                this.source = $this.data('source');
                this.selector.$source.text($this.find('.title').text());
                break;
            case 'queryType':
                this.queryType = $this.data('type');
                this.selector.$queryType.text($this.find('.title').text());
                break;
            case 'time':
                if ($this.data('begin')) {
                    this.beginTime = $this.data('begin');
                    this.endTime = Date.parse(new Date());
                    this.beginTime = parseInt(this.endTime, 10) - parseInt(this.beginTime, 10);
                } else {
                    this.beginTime = '';
                    this.endTime = '';
                }
                this.selector.$time.text($this.find('.title').text());
                break;
            default:
                tip.show('请稍后再试～～');
        }
        this.end = false;
        this.page = 1;
        this.chosenData();
        $this.addClass('chosen').siblings('li').removeClass('chosen');
        return false;
    }

    setHeight() {
        let wHeight = $(window).height();

        this.selector.$coverBg.css('min-height', `${wHeight}px`);
    }

    tab(e) {
        let $this = $(e.currentTarget);

        // $this.find('li:first').addClass('chosen');
        // $this.find('li:first').siblings('li').removeClass('chosen');
        if ($this.hasClass('active')) {
            $this.removeClass('active');
            this.selector.$scoreDetailC.removeClass('active');
        } else {
            $this.addClass('active');
            $this.siblings('.tab-item').removeClass('active');
            this.selector.$scoreDetailC.addClass('active');
        }
    }

    coverBg() {
        this.selector.$scoreDetailC.removeClass('active');
        this.selector.$tabItem.removeClass('active');
    }

    chosenData() {
        this.loading = true;
        this.ajax({
            url: '/home/family/coinDetail/getCoinData',
            data: {
                source: this.source,
                queryType: this.queryType,
                beginTime: this.beginTime,
                endTime: this.endTime,
                page: this.page
            }
        }).then(result => {
            if (result && result.coinList.length > 0) {
                this.selector.$result.append(this.view.resultRender(result));
                this.loading = false;
            } else {
                this.end = true;
                tip.show('没有更多数据了～～～');
            }
            this.selector.$tabItem.removeClass('active');
            this.selector.$scoreDetailC.removeClass('active');
        }).catch(error => {
            console.error(error);
        });
    }
}

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