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

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

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

        this.fixedTop = 0;
        this.init();
    }

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

    // 返回顶部，最新资讯
    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();
});