$(function () {
  $(window).scroll(function () {
    var scrollPos = $(window).scrollTop()

    $('.anchorpoint').each(function (i) {
      var thisPos = $(this).offset().top - 300
      if (scrollPos >= thisPos) {
        setTimeout(function () {
          $('.anchorpoint').eq(i).removeClass('video-lazyload')
          // if (i == 0) {
          //     $(".video_player").trigger("click");
          // }
          // if (i == 1) {
          $('.video_player2').trigger('click')
          // }
        }, 1200)
      }
    })
  })

  // var images = $('.lazyload')
  // function callback(entries) {
  //   for (let i of entries) {
  //     if (i.isIntersecting) {
  //       let img = i.target
  //       let trueSrc = img.getAttribute('data-src')
  //       img.setAttribute('src', trueSrc)
  //       img.addEventListener('load', function () {
  //         setTimeout(function () {
  //           img.classList.remove('lazyload')
  //         }, 1200)
  //       })
  //       observer.unobserve(img)
  //     }
  //   }
  // }
  // const observer = new IntersectionObserver(callback)
  // for (let i of images) {
  //   observer.observe(i)
  // }

  // 安全轮播 banner(1)
  var mySwiper = new Swiper('.as-tpl-hm-banner01', {
    // direction: "vertical",
    loop: false,
    pagination: {
      el: '.swiper-pagination01',
      clickable: true,
      renderBullet: function (index, className) {
        switch (index) {
          case 0:
            text = '爆胎稳定控制'
            break
          case 1:
            text = '防滑稳定控制'
            break
          case 2:
            text = ''
            break
          case 3:
            text = ''
            break
          case 4:
            text = ''
            break
        }
        return (
          '<span class="' +
          className +
          ' ' +
          '"' +
          'onclick="' +
          "reportUem('乾崑车控-" +
          text +
          "')" +
          '"' +
          '>' +
          text +
          '</span>'
        )
      },
    },
    navigation: {
      nextEl: '.swiper-button-next01',
      prevEl: '.swiper-button-prev01',
    },
    slidesPerView: 1,
    speed: 500,
    loop: false,
    autoplay: false,
    spaceBetween: 4,
    keyboard: true,
    observer: true,
    observeParents: true,

    on: {
      transitionStart: function (mySwiper) {
        var sliderwidth = $('.ias-tpl-hm-section03-01 .swiper-pagination-bullet').width()
        var allwidth = sliderwidth * this.activeIndex
        var wd = allwidth + 'px'
        $('.ias-tpl-hm-section03-01 .ias-tpl-hm-tool .ias-tpl-pagination-bg').css('left', wd)
        $('.as-tpl-hm-banner01').find('img').trigger('appear')
      },
      slideChangeTransitionEnd: function () {
          gatabswiper(this);
      },
    },
  })

  // 舒适  banner(2)
  var mySwiper2 = new Swiper('.as-tpl-hm-banner02', {
    loop: false,
    pagination: {
      el: '.swiper-pagination02',
      clickable: true,
      renderBullet: function (index, className) {
        switch (index) {
          case 0:
            text = '时空推理悬架网络'
            break
          case 1:
            text = '晕车舒缓'
            break
          case 2:
            text = ''
            break
          case 3:
            text = ''
            break
        }
        return (
          // '<span class="' + className + '">' + text + "</span>";
          '<span class="' +
          className +
          ' ' +
          '"' +
          'onclick="' +
          "reportUem('乾崑车控-" +
          text +
          "')" +
          '"' +
          '>' +
          text +
          '</span>'
        )
      },
    },
    navigation: {
      nextEl: '.swiper-button-next02',
      prevEl: '.swiper-button-prev02',
    },
    slidesPerView: 1,
    loop: false,
    autoplay: false,
    spaceBetween: 4,
    keyboard: true,
    observer: true,
    observeParents: true,
    on: {
      transitionStart: function (mySwiper2) {
        var sliderwidth = $('.ias-tpl-hm-section03-02 .swiper-pagination-bullet').width()
        var allwidth = sliderwidth * this.activeIndex
        var wd = allwidth + 'px'
        $('.ias-tpl-hm-section03-02 .ias-tpl-hm-tool .ias-tpl-pagination-bg').css('left', wd)
        $('.as-tpl-hm-banner02').find('img').trigger('appear')
      },
        slideChangeTransitionEnd: function () {
          gatabswiper(this);
      },
    },
  })

  // 灵活  banner(3)
  var mySwiper2 = new Swiper('.as-tpl-hm-banner03', {
    loop: false,
    pagination: {
      el: '.swiper-pagination03',
      clickable: true,
      renderBullet: function (index, className) {
        switch (index) {
          case 0:
            text = '5D 蟹行'
            break
          case 1:
            text = '华尔兹双车掉头'
            break
          case 2:
            text = ''
            break
          case 3:
            text = ''
            break
        }
        return (
          // '<span class="' + className + '">' + text + "</span>";
          '<span class="' +
          className +
          ' ' +
          '"' +
          'onclick="' +
          "reportUem('乾崑车控-" +
          text +
          "')" +
          '"' +
          '>' +
          text +
          '</span>'
        )
      },
    },
    navigation: {
      nextEl: '.swiper-button-next03',
      prevEl: '.swiper-button-prev03',
    },
    slidesPerView: 1,
    loop: false,
    autoplay: false,
    spaceBetween: 4,
    keyboard: true,
    observer: true,
    observeParents: true,
    on: {
      transitionStart: function (mySwiper2) {
        var sliderwidth = $('.ias-tpl-hm-section03-03 .swiper-pagination-bullet').width()
        var allwidth = sliderwidth * this.activeIndex
        var wd = allwidth + 'px'
        $('.ias-tpl-hm-section03-03 .ias-tpl-hm-tool .ias-tpl-pagination-bg').css('left', wd)
        $('.as-tpl-hm-banner03').find('img').trigger('appear')
      },
      slideChangeTransitionEnd: function () {
          gatabswiper(this);
      },
    },
  })

  const scrollButton1 = document.getElementById('wen1')
  const section1 = document.getElementById('da1')
  scrollButton1.addEventListener('click', () => {
    section1.scrollIntoView({ block: 'center', behavior: 'smooth' })
    section1.classList.add('nhov')
    section2.classList.remove('nhov')
    section3.classList.remove('nhov')
    section4.classList.remove('nhov')
  })
  // const scrollButton2 = document.getElementById('wen2')
  // const section2 = document.getElementById('da2')
  // scrollButton2.addEventListener('click', () => {
  //   section2.scrollIntoView({ block: 'center', behavior: 'smooth' })
  //   section2.classList.add('nhov')
  //   section1.classList.remove('nhov')
  //   section3.classList.remove('nhov')
  //   section4.classList.remove('nhov')
  // })
  // const scrollButton3 = document.getElementById('wen3')
  // const section3 = document.getElementById('da3')
  // scrollButton3.addEventListener('click', () => {
  //   section3.scrollIntoView({ block: 'center', behavior: 'smooth' })
  //   section3.classList.add('nhov')
  //   section1.classList.remove('nhov')
  //   section2.classList.remove('nhov')
  //   section4.classList.remove('nhov')
  // })
  // const scrollButton4 = document.getElementById('wen4')
  // const section4 = document.getElementById('da4')
  // scrollButton4.addEventListener('click', () => {
  //   section4.scrollIntoView({ block: 'center', behavior: 'smooth' })
  //   section4.classList.add('nhov')
  //   section1.classList.remove('nhov')
  //   section2.classList.remove('nhov')
  //   section3.classList.remove('nhov')
  // })

  // WebP支持检测（首次运行时缓存结果）
  function checkWebPSupport(callback) {
    if (typeof localStorage !== 'undefined' && localStorage.getItem('webpSupport') !== null) {
      return callback(localStorage.getItem('webpSupport') === 'true')
    }

    const img = new Image()
    img.onload = function () {
      const result = img.width > 0 && img.height > 0
      localStorage.setItem('webpSupport', result)
      callback(result)
    }
    img.onerror = function () {
      localStorage.setItem('webpSupport', false)
      callback(false)
    }

    img.src =
      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
  }
  checkWebPSupport(function (isSupported) {
    $('img').each(function () {
      const $img = $(this)
     let webpSrc = $img.closest('picture').find('source[type="image/webp"]').data('srcset')
      const webpSrcMob = $img.closest('picture').find('source[type="image/webp"][media*="max-width: 768px"]').data('srcset')
      if($(window).width() < 800){
         if(webpSrcMob != undefined){
          webpSrc = webpSrcMob
         }
      }
      const fallbackSrc = $img.data('src')

      // 动态设置真实图片路径
      $img.data('original', isSupported ? webpSrc : fallbackSrc)
    })

    $('img').lazyload({
      threshold: 200,
      effect: 'fadeIn',
      appear: function () {
        const realSrc = $(this).data('original')
        $(this).attr('src', realSrc)
        $(this).addClass('lazy-loaded')
      },
      load: function () {
        $(this).addClass('lazy-loaded')
      },
      error: function () {
        $(this).attr('src', 'img/error.jpg')
      },
    })
  })

  // 初始化懒加载
  $('img').lazyload({
    effect: 'fadeIn', // 淡入效果
    threshold: 100, // 提前300px加载
    failure_limit: 15, // 最大容错数量
    skip_invisible: true, // 加载隐藏图片
    appear: function () {
      // 加载前回调
           let _this = $(this);
      if (_this.data("original") != undefined) {
        _this.on("load", function () {
              $(this).css('background', 'transparent')
      $(this).removeClass('lazyload')
          $(".ias-conctrol-kvtxt").removeClass("lazy-text");
          $(".ias-tpl-play-icon").removeClass("lazy-text");
        });
      }
    },
    load: function () {
      // 加载完成回调
      $(this).addClass('lazy-loaded')
    },
  })
})