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

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.list();
        lazyLoad($('img.lazy'));
        this.setTimeout();
    }

    setTimeout() {
        setTimeout(() => {
            this.swiperCollocation();
            this.doMore();
            this.fixed();
            this.fixedRetop();
        }, 50);
    }

    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) {
                let $lazy = $(this.view.moreRender(result));

                this.selector.$guangList.append($lazy);
                this.loading = false;
                lazyLoad($lazy.find('.lazy'));
            } else {
                this.end = true;
            }
        }).catch(error => {
            console.error(error);
        });
    }

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

    fixedRetop() {
        if (this.selector.$parentObj.offset()) {
            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,
                lazyLoading: true,
                lazyLoadingInPrevNext: true,
                lazyLoadingInPrevNextAmount: 1
            });
        }
    }

    // 频道swiper
    swiperTab() {
        if ($('.swiper-tab').length > 0) {
            let startX = 0;
            let moveEndX = 0;
            let X = 0;
            let $active = '';
            let $swiperTab = $('.swiper-tab');
            let $first = '';
            let $last = '';
            let perWidth = $(window).width() / 750 * 104;

            $swiperTab.find('.swiper-slide:eq(2)').addClass('swiper-slide-active');
            $swiperTab.on('touchstart', (e) => {
                startX = e.originalEvent.changedTouches[0].pageX;
            });
            $swiperTab.on('touchend', (e) => {
                moveEndX = e.originalEvent.changedTouches[0].pageX;
                X = moveEndX - startX;
                $active = $swiperTab.find('.swiper-slide-active');
                $first = $swiperTab.find('.swiper-slide:first').clone();
                $last = $swiperTab.find('.swiper-slide:last').clone();
                if (X < 0) { // 向左滑动
                    $swiperTab.css('margin-left', `-${perWidth}px`);
                    $active.next('div').addClass('swiper-slide-active').siblings('div')
                        .removeClass('swiper-slide-active');
                    $swiperTab.find('.swiper-wrapper').append($first);
                    $swiperTab.find('.swiper-slide:first').remove();
                    $swiperTab.css('margin-left', 0);
                }
                if (X > 0) { // 向右滑动
                    $swiperTab.css('margin-right', `-${perWidth}px`);
                    $active.prev('div').addClass('swiper-slide-active').siblings('div')
                        .removeClass('swiper-slide-active');
                    $swiperTab.find('.swiper-wrapper').prepend($last);
                    $swiperTab.find('.swiper-slide:last').remove();
                    $swiperTab.css('margin-right', 0);
                }
            });
        }
    }

    // 人气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
                },
                lazyLoading: true,
                lazyLoadingInPrevNext: true,
                lazyLoadingInPrevNextAmount: 1
            });
        }
    }

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

    // // 限定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();
});