/**
 * @file
 */


(function ($) {


    $(window).on("load", function () {
        var $this = $(".banner-slider-wrapper");
        var $this_settings = $.parseJSON($this.attr('data-settings'));
        setTimeout(function () {
            bannerOwlCarousel($this, $this_settings)
        }, 1000)
    });


    function bannerOwlCarousel(ele, $this_settings) {

        ele.owlCarousel({
            navText: ["<span class='iconfont icon-arrowleft'></span>", "<span class='iconfont icon-arrowright'></span>"],
            loop: $this_settings.loop,
            dots: $this_settings.dots,
            autoplay: $this_settings.autoPlay,
            nav: $this_settings.nav,
            autoplayTimeout: $this_settings.autoplayTimeout,
            smartSpeed: 700,
            lazyLoad: true,
            autoplayHoverPause: $this_settings.autoplayHoverPause,
            items: 1,
        });

        $('.banner-wrapper .owl-item').addClass("normal-owl-item")
        // $(".banner-wrapper .owl-stage .owl-item").each(function (){
        //
        //     if ($(this).hasClass("active")){
        //         $(".banner-wrapper .owl-stage .owl-item").find('video')[0].pause()
        //         $(this).find('video').attr('autoplay')
        //     }
        // })
        // ele.on('translated.owl.carousel', function (event) {
        //     $(".banner-wrapper .owl-stage .owl-item").each(function (){
        //         console.info('banner translated.owl.carousel')
        //
        //         let video = $(this).find('video')
        //         if(!video.attr('src')){
        //             video.attr('src',video.data('src'))
        //         }
        //
        //         if ($(this).hasClass("active")){
        //             $(".banner-wrapper .owl-stage .owl-item").find('video')[0].pause()
        //             $(this).find('video')[0].play()
        //         }
        //     })
        // })

        $(window).resize(function () {
            $(".banner-wrapper").removeAttr('style');
        });

        var liwidth = $('.banner-wrapper .owl-theme .owl-dots .owl-dot').width();
        $(".banner-wrapper .changXian-wai .changXian").css("width", liwidth + "px");

        ele.on('translated.owl.carousel', function (event) {
            var index = $('.banner-wrapper .owl-stage .owl-item.active').find('.page-banner').data('id');
            $(".banner-wrapper .owl-carousel .owl-nav .nav-count .cur-num").html(index + 1);



            const allDots = document.querySelectorAll('.banner-wrapper .owl-theme .owl-dots .owl-dot');
            const activeDot = document.querySelector('.owl-dot.active');
            const activeDotIndex = Array.from(allDots).indexOf(activeDot) + 1;
            var liwidth = $('.banner-wrapper .owl-theme .owl-dots .owl-dot').width();

            var xianwidth = liwidth * activeDotIndex;
            $(".banner-wrapper .changXian-wai .changXian").css("width", xianwidth + "px");


            $(".banner-wrapper .owl-stage .owl-item").each(function (){
                // console.info('banner translated.owl.carousel')

                let video = $(this).find('video')
                if(!video.attr('src')){
                    video.attr('src',video.data('src'))
                }

                if ($(this).hasClass("active")){
                    $(".banner-wrapper .owl-stage .owl-item").find('video')[0].pause()
                    $(this).find('video')[0].play()
                }
            })




        })


    }

})(jQuery);