import 'guang/guang-new.page.css';
import $ from 'yoho-jquery';
import Page from 'yoho-page';
import Swiper from 'yoho-swiper';

import moreRender from 'guang/list.hbs';

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

        this.selector = {
            $parentObj: $('.swiper-tab'),
            $fixed: $('.fixed'),
            $guangList: $('.guang-list')
        };

        this.view = {
            moreRender
        };

        this.fixedTop = 0;
        this.page = 0;
        this.end = false;
        this.loading = false;
        this.init();
    }

    init() {
        this.swiperTop();
        this.swiperTab();
        this.swiperPage();
        this.swiperCollocation();
        this.swiperLimit();
        this.swiperShow();
        this.fixed();
        this.fixedRetop();
        this.list();
    }

    list() {
        $(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.moreList(this.page);
        }
    }

    moreList() {
        this.loading = true;
        this.ajax({
            url: '/guang/guang-new/more',
            data: {
                page: this.page
            },
        }).then(result => {
            if (result && result.list.length > 0) {
                this.selector.$guangList.append(this.view.moreRender(result));
                this.loading = false;
            } else {
                this.end = true;
            }
        }).catch(error => {
            console.error(error);
        });
    }

    // 返回顶部，最新资讯
    fixed() {
        $(window).scroll(() => {
            this.fixedRetop();
        });
    }

    fixedRetop() {
        this.fixedTop = this.selector.$parentObj.offset().top - $(document).scrollTop();
        if (this.fixedTop <= 0) {
            this.selector.$fixed.show();
        } else {
            this.selector.$fixed.hide();
        }
    }

    // 顶部swiper
    swiperTop() {
        if ($('.swiper-top').length > 0) {
            new Swiper('.swiper-top .swiper-container', {
                pagination: '.swiper-pagination .wiper-pagination-bullets',
                paginationClickable: true
            });
        }
    }

    // 频道swiper
    swiperTab() {
        if ($('.swiper-tab').length > 0) {
            let preWidth = $(window).width() / 750 * -115; // 向左位移一个swiper-slide宽度，相对于750宽度下

            new Swiper('.swiper-tab .swiper-container', {
                effect: 'coverflow',
                loop: true,
                grabCursor: true,
                slidesPerView: 'auto',
                followFinger: false,
                slidesOffsetBefore: preWidth,
                centeredSlides: true,
                speed: 800,
                coverflow: {
                    rotate: 0,
                    stretch: 0,
                    depth: 0,
                    modifier: 1,
                    slideShadows: false
                },
                touchRatio: 0.01,
            });
        }
    }

    // 人气swiper
    swiperPage() {
        if ($('.swiper-page').length > 0) {
            new Swiper('.swiper-page .swiper-container', {
                direction: 'vertical',
                effect: 'coverflow',
                grabCursor: true,
                centeredSlides: true,
                slidesPerView: 'auto',
                followFinger: false,
                loop: true,
                coverflow: {
                    rotate: 0,
                    stretch: 0,
                    depth: 0,
                    modifier: 1,
                    slideShadows: false
                }
            });
        }
    }

    // 搭配swiper
    swiperCollocation() {
        if ($('.swiper-collocation').length > 0) {
            new Swiper('.swiper-collocation .swiper-container', {
                centeredSlides: true,
                slidesPerView: 'auto',
                loop: true
            });
        }
    }

    // 限定swiper
    swiperLimit() {
        if ($('.swiper-limit').length > 0) {
            new Swiper('.swiper-limit .swiper-container', {
                pagination: '.swiper-pagination',
                paginationClickable: true
            });
        }
    }

    // showswiper
    swiperShow() {
        if ($('.swiper-show').length > 0) {
            new Swiper('.swiper-show .swiper-container', {
                slidesPerView: 'auto'
            });
        }
    }
}

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