$(document).ready(function () {
  new WOW().init()
  let padingBottomRate = $(window).innerHeight() / $(window).innerWidth()
  $('.bannerSwiper .swiper-slide').css({
    'padding-bottom': `${padingBottomRate * 100}%`,
  })
  const bannerSwiper = new Swiper('.bannerSwiper', {
    pagination: {
      el: '.banner-swiper-pagination',
      type: 'progressbar',
    },
    effect: 'fade',
    fadeEffect: {
      crossFade: false,
    },
    autoplay:{
      delay:6000
    },
    loop:true,
    on: {
      init: function (bannerSwiper) {
        slide = this.slides.eq(0)
        slide.addClass('ani-slide')
      },
      transitionStart: function () {
        for (i = 0; i < this.slides.length; i++) {
          slide = this.slides.eq(i)
          slide.removeClass('ani-slide')
        }
      },
      transitionEnd: function () {
        slide = this.slides.eq(this.activeIndex)
        slide.addClass('ani-slide')
      },
    },
  })
  const bannerProduct = new Swiper('.bannerProduct', {
    slidesPerView:4,
    autoplay:{
      delay: 3000,
    },
    spaceBetween: 0,
    loop:true,
    noSwipingClass: 'bannerProduct .swiper-slide',
    on: {
      slideChangeTransitionStart: function(e){
        $('.bannerProduct .swiper-slide.swiper-slide-active').css({height:'100%',transition:'height 0.6s'})
        $('.bannerProduct .swiper-slide:not(.swiper-slide-active)').css({height:'55%',transition:'height 0.6s'})
      },
    }
  })



  // banner图星星闪缩
  // var bannerW = $('.banner').width()
  // var bannerH = $('.banner').height()
  // for(var i=0; i<150; i++){
  //   var slideFirst = document.getElementById("swiper-slide-first");
  //   var spanBanner = document.createElement('span');
  //   spanBanner.className = 'swiper-slide-start'
  //   slideFirst.appendChild(spanBanner);
  //   var x = parseInt(Math.random() * bannerW);
  //   var y = parseInt(Math.random() * bannerH);
  //   // 位置随机
  //   spanBanner.style.left = x + 'px';
  //   spanBanner.style.top = y + 'px';
  //   spanBanner.style.zIndex = "0";
  //   // 大小随机
  //   var scaleBanner = Math.random() * 1.5;
  //   spanBanner.style.transform = 'scale('+ scaleBanner + ', ' + scaleBanner + ')';
  //   //频率随机
  //   var Bannerrate = Math.random() * 1.5;
  //   spanBanner.style.animationDelay = Bannerrate + 's';
  // }

  $('.news-box').mouseenter(function () {
    $(this)
      .find('.news-img img')
      .css({ transform: 'scale(1.25)', transition: 'transform 0.5s' })
    $(this).css({
      'box-shadow': '6px 6px 16px 0px rgba(158,168,190,0.43)',
      transition: 'box-shadow 0.5s',
    })
    $(this).css({ background: '#DBE5F1', transition: 'box-shadow 0.5s' })
  })
  $('.news-box').mouseleave(function () {
    $(this)
      .find('.news-img img')
      .css({ transform: 'scale(1)', transition: 'transform 0.5s' })
    $(this).css({
      'box-shadow': '0px 0px 0px 0px rgba(158,168,190,0.43)',
      transition: 'box-shadow 0.5s',
    })
    $(this).css({ background: '#E5EDF8', transition: 'box-shadow 0.5s' })
  })
  $('.news-bottom-box').mouseenter(function () {
    $(this).css({
      'box-shadow': '6px 6px 16px 0px rgba(158,168,190,0.43)',
      transition: 'box-shadow 0.5s',
    })
    $(this).css({ background: '#DBE5F1', transition: 'box-shadow 0.5s' })
  })
  $('.news-bottom-box').mouseleave(function () {
    $(this).css({ 'box-shadow': 'none', transition: 'box-shadow 0.2s' })
    $(this).css({ background: '#E5EDF8', transition: 'box-shadow 0.5s' })
  })
  $('.news-contrl-btn').each(function() {
    const Len = $(this).find('li').length
    $('.news-contrl-btn-bg').css({width:`${100/Len}%`})
    $(this).find('li').css({width:`${100/Len}%`})
  })
  $('.news-contrl-btn li').click(function () {
    const Len = $('.news-contrl-btn li').length
    $('.news-contrl-btn-bg').css({
      left: `${100/Len * ($(this).index() - 1)}%`,
      transition: 'left 0.5s',
    })
  })
  const newsSwiper1 = new Swiper('.newsSwiper1', {
    pagination: {
      el: '.news-Swiper-1 .news-swiper-pagination',
      clickable: true,
      renderBullet: function (index, className) {
        return (
          '<span class="' + className + '">' + '0' + (index + 1) + '</span>'
        )
      },
    },
    navigation: {
      prevEl: '.news-Swiper-1 .news-contrl-arrow-left',
      nextEl: '.news-Swiper-1 .news-contrl-arrow-right',
    },
  })
  const newsSwiper2 = new Swiper('.newsSwiper2', {
    pagination: {
      el: '.news-Swiper-2 .news-swiper-pagination',
      clickable: true,
      renderBullet: function (index, className) {
        return (
          '<span class="' + className + '">' + '0' + (index + 1) + '</span>'
        )
      },
    },
    navigation: {
      prevEl: '.news-Swiper-2 .news-contrl-arrow-left',
      nextEl: '.news-Swiper-2 .news-contrl-arrow-right',
    },
  })
  const newsSwiper3 = new Swiper('.newsSwiper3', {
    pagination: {
      el: '.news-Swiper-3 .news-swiper-pagination',
      clickable: true,
      renderBullet: function (index, className) {
        return (
          '<span class="' + className + '">' + '0' + (index + 1) + '</span>'
        )
      },
    },
    navigation: {
      prevEl: '.news-Swiper-3 .news-contrl-arrow-left',
      nextEl: '.news-Swiper-3 .news-contrl-arrow-right',
    },
  })
  $('.news-contrl-arrow-left').mouseenter(function () {
    $(this).css({ filter: 'grayscale(0%)' })
  })
  $('.news-contrl-arrow-left').mouseleave(function () {
    $(this).css({ filter: 'grayscale(100%)' })
  })
  $('.news-contrl-arrow-right').mouseenter(function () {
    $(this).css({ filter: 'grayscale(0%)' })
  })
  $('.news-contrl-arrow-right').mouseleave(function () {
    $(this).css({ filter: 'grayscale(100%)' })
  })
  $('.news-contrl-btn li').click(function () {
    $('.news-Swiper')
      .eq($(this).index() - 1)
      .css({ display: 'block' })
    $('.news-Swiper')
      .eq($(this).index() - 1)
      .siblings('.news-Swiper')
      .css({ display: 'none' })
  })
  const partners01 = new Swiper('.partners-01', {
    autoplay: {
      delay: 0, // 轮播间隔时间
      disableOnInteraction: false, //用户操作swiper之后，是否停止自动切换效果
    },
    slidesPerView: 3.2,
    spaceBetween: 10,
    noSwiping: true, // 禁止了手滑动
    noSwipingClass: 'swiper-slide', // 禁止了手滑动的元素
    speed: 20000,
    loop: true,
    breakpoints: {
      768: {
        slidesPerView: 4.2,
        spaceBetween: 20,
      },
      1200: {
        slidesPerView: 4.4,
        spaceBetween: 20,
      },
      1400: {
        slidesPerView: 4.5,
        spaceBetween: 22,
      },
      1536: {
        slidesPerView: 4.8,
        spaceBetween: 24,
      },
      1897: {
        slidesPerView: 5,
        spaceBetween: 27,
      },
    },
  })
  const partners02 = new Swiper('.partners-02', {
    autoplay: {
      delay: 0, // 轮播间隔时间
      disableOnInteraction: false, //用户操作swiper之后，是否停止自动切换效果
    },
    slidesPerView: 3.2,
    spaceBetween: 10,
    noSwiping: true, // 禁止了手滑动
    noSwipingClass: 'swiper-slide', // 禁止了手滑动的元素
    speed: 15000,
    loop: true,
    breakpoints: {
      768: {
        slidesPerView: 4.2,
        spaceBetween: 20,
      },
      1200: {
        slidesPerView: 4.4,
        spaceBetween: 20,
      },
      1400: {
        slidesPerView: 4.5,
        spaceBetween: 22,
      },
      1536: {
        slidesPerView: 4.8,
        spaceBetween: 24,
      },
      1897: {
        slidesPerView: 5,
        spaceBetween: 27,
      },
    },
  })
  function NumAutoPlusAnimation(baseNumber, finalNum, elNode) {
    var step = (finalNum - baseNumber) / 20 //颗粒化可以控制速度
    var count = baseNumber // 计数器
    var initial = 0
    var timer = setInterval(() => {
      count = count + step
      if (count >= finalNum) {
        clearInterval(timer)
        count = finalNum
      }
      var t = count.toFixed(0)
      initial = t
      elNode.text(initial)
    }, 60)
  }
  // 关于我们数字滚动
  let countScroll = 0
  $(window).scroll(function () {
    let numberScroll = $('.about-us .about-us-list').offset().top;
    if (
      numberScroll >= $(window).scrollTop() &&
      numberScroll < $(window).scrollTop() + $(window).height() &&
      countScroll == 0
    ) {
      const aboutUsSwiper = new Swiper('.aboutUsSwiper', {
        autoplay: {
          delay: 0, // 轮播间隔时间
          disableOnInteraction: false, //用户操作swiper之后，是否停止自动切换效果
        },
        slidesPerView: 3,
        noSwiping: true, // 禁止了手滑动
        noSwipingClass: 'swiper-slide', // 禁止了手滑动的元素
        speed: 6000,
        loop: true,
      })
      $('.countUp_num').each(function (indexInArray, valueOfElement) {
        const num = Number($(this).attr('data-numto'))
        NumAutoPlusAnimation(0, num, $(this))
        if($('.countUp_num').length == indexInArray+1) {
          countScroll++
        }
      });
      aboutUsSwiper.autoplay.stop();
      setTimeout(function(){
        aboutUsSwiper.autoplay.start();
      },2000)
    }
  })

  // 按钮特效
  $('.about-us-btn').mouseenter(function () {
    $('.about-us-btn-content').css({
      transform: 'translateX(70%)',
      transition: 'all 1.5s',
    })
    $('.btn-add').css({ transform: 'rotate(360deg)', transition: 'all 1.5s' })
  })
  $('.about-us-btn').mouseleave(function () {
    $('.about-us-btn-content').css({
      transform: 'translateX(00%)',
      transition: 'all 1.5s',
    })
    $('.btn-add').css({ transform: 'rotate(-360deg)', transition: 'all 1.5s' })
  })
  // 篮球推荐分析开始
  $('.product-box')
    .eq(0)
    .find('p')
    .css({ 'font-weight': 700, color: '#fff', transition: 'all 0.3s' })
  $('.product-box')
    .eq(0)
    .css({ scale: 1.1, background: '#377ddf', transition: 'all 0.3s' })
  $('.product-img-list .product-img').eq(0).css({ display: 'block' })
  $('.product-text-list').eq(0).css({ display: 'block' })
  $('.product-logo-white').eq(0).css({ display: 'block' })
  $('.product-logo').eq(0).css({ display: 'none' })
  // hover效果
  $('.product .product-box').mouseenter(function () {
    $('.product-text-list')
      .eq($(this).index() - 4)
      .css({ display: 'block' })
    $('.product-text-list')
      .eq($(this).index() - 4)
      .siblings()
      .css({ display: 'none' })
    $('.product-img-list .product-img')
      .eq($(this).index() - 4)
      .css({ display: 'block' })
    $('.product-img-list .product-img')
      .eq($(this).index() - 4)
      .siblings('.product-img')
      .css({ display: 'none' })
    $(this)
      .find('.product-logo-list .product-logo-white')
      .css({ display: 'block' })
    $(this).find('.product-logo-list .product-logo').css({ display: 'none' })
    $(this)
      .siblings()
      .find('.product-logo-list .product-logo')
      .css({ display: 'block' })
    $(this)
      .siblings()
      .find('.product-logo-list .product-logo-white')
      .css({ display: 'none' })
    $(this).css({ scale: 1.1, background: '#377ddf', transition: 'all 0.3s' })
    $(this)
      .find('p')
      .css({ 'font-weight': 700, color: '#fff', transition: 'all 0.3s' })
    $(this)
      .siblings('.product-box')
      .css({ scale: 1, background: '#fff', transition: 'all 0.3s' })
    $(this)
      .siblings('.product-box')
      .find('p')
      .css({ 'font-weight': 400, color: '#1B54A4 ', transition: 'all 0.3s' })
  })

  // 底部微信二维码
  $('.wechat').mouseenter(function () {
    $('.gongzhonghao-img').css({ display: 'block' })
  })
  $('.wechat').mouseleave(function () {
    $('.gongzhonghao-img').css({ display: 'none' })
  })
  //   $('.dot-container .dot-group').mouseenter(function () {
  //   console.log(1111111)
  //   $(this).find('.dot-name').css({'font-size':'12px'})
  // });
})