$(function () {
  function fixedNav() {
    // 滚动页面，导航栏跟着变化事件

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

      $('.anchorpoint').each(function (i) {
        var thisPos = $(this).offset().top - 400;
        if (scrollPos >= thisPos) {
          setTimeout(function () {
            if (i == 2) {
              $('.video_player').trigger('click');
              $('.anchorpoint').eq(i).find('.video-lazyload').removeClass('video-lazyload');
            } else {
              $('.anchorpoint').eq(i).removeClass('video-lazyload');
            }
          }, 800);
        }
      });
    });
  }
  fixedNav();

  var kvtop = $('.anchorpoint').eq(0).offset().top;

  if (kvtop == 0) {
    setTimeout(function () {
      $('.anchorpoint').eq(0).removeClass('video-lazyload');
    }, 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)
  // }

  // 轮播一
  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;
        }
        return (
          // '<span class="' + className + '">' + text + "</span>";
           '<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);
      },
    },
  });

  // 轮四
  var mySwiper2 = new Swiper('.as-tpl-hm-banner04', {
    loop: false,
    pagination: {
      el: '.swiper-pagination04',
      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 + '">' + text + "</span>";
          '<span class="' +
          className +
          ' ' +
          '"' +
          'onclick="' +
          "reportUem('乾崑车载光-HUAWEI XHUD-" +
          text +
          "')" +
          '"' +
          '>' +
          text +
          '</span>'
        );
      },
    },
    navigation: {
      nextEl: '.swiper-button-next04',
      prevEl: '.swiper-button-prev04',
    },
    slidesPerView: 1,
    loop: false,
    autoplay: false,
    spaceBetween: 4,
    keyboard: true,
    observer: true,
    observeParents: true,
    on: {
      transitionStart: function (mySwiper2) {
        var sliderwidth = $('.ias-tpl-hm-section03-04 .swiper-pagination-bullet').width();
        var allwidth = sliderwidth * this.activeIndex;
        var wd = allwidth + 'px';
        $('.ias-tpl-hm-section03-04 .ias-tpl-hm-tool .ias-tpl-pagination-bg').css('left', wd);
        $('.as-tpl-hm-banner04').find('img').trigger('appear');
      },
      slideChangeTransitionEnd: function () {
          gatabswiper(this);
      },
    },
  });

  // 轮播二
  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;
          case 4:
            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);
      },
    },
  });

  // 自研AR构图引算法
  var mySwiper5 = new Swiper('.as-tpl-hm-banner05', {
    loop: false,
    pagination: {
      el: '.swiper-pagination05',
      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-next05',
      prevEl: '.swiper-button-prev05',
    },
    slidesPerView: 1,
    loop: false,
    autoplay: false,
    spaceBetween: 4,
    keyboard: true,
    observer: true,
    observeParents: true,
    on: {
      transitionStart: function (mySwiper2) {
        var sliderwidth = $('.ias-tpl-hm-section03-05 .swiper-pagination-bullet').width();
        var allwidth = sliderwidth * this.activeIndex;
        var wd = allwidth + 'px';
        $('.ias-tpl-hm-section03-05 .ias-tpl-hm-tool .ias-tpl-pagination-bg').css('left', wd);
        $('.as-tpl-hm-banner05').find('img').trigger('appear');
      },
      slideChangeTransitionEnd: function () {
          gatabswiper(this);
      },
    },
  });

  // 轮三
  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 = '巨幕观影';
            break;
          case 1:
            text = '护眼缓晕';
            break;
          case 2:
            text = '存量车主可加装';
            break;
          case 3:
            text = '';
            break;
          case 4:
            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);
      },
    },
  });

  // if (screenwidth < 900) {
  //     $(".ias-tpl-hm-section03 .swiper-pagination .swiper-pagination-bullet").text("");
  // }

  $('.ias-tpl-tip1').on('click', function () {
    var currentPosition = $(window).scrollTop();
    var top = $('.ias-tpl-hm-bm').offset().top - 60;
    $('html, body').animate(
      {
        scrollTop: top,
      },
      1000
    );
    $('.ias-tpl-hm-bm p').removeClass('active');
    $('.ias-tpl-tip01').addClass('active');
    currentPositionTop = currentPosition;
    return currentPositionTop;
  });

  $('.ias-tpl-hm-bm').on('click', '.ias-tpl-tip01.active', function () {
    $('html, body').animate(
      {
        scrollTop: currentPositionTop,
      },
      1000
    );
    $('.ias-tpl-hm-bm p').removeClass('active');
  });

  $(document).ready(function () {
    var video = $('#myVideo')[0]; // 获取video DOM元素
    var interval = null; // 用于控制视频播放速度的变量
    var speed = 0.3; // 调整速度的变量，可根据需要调整

    // $("#myVideo").mousewheel(function (event, delta) {
    //     // event.preventDefault(); // 阻止默认的滚动行为
    //     var currentTime = video.currentTime; // 获取当前播放时间
    //     var duration = video.duration; // 获取视频总时长
    //     var newTime; // 新的播放时间
    //     if (delta > 0) {
    //         console.log("向上");
    //         // 鼠标滚轮向上滚动，视频进度条往后移动
    //         newTime = currentTime - speed; // 减少当前时间，减慢播放速度
    //         if (newTime < 0) newTime = 0; // 防止小于0
    //     } else {
    //         // 鼠标滚轮向下滚动，视频进度条往前移动
    //         newTime = currentTime + speed; // 增加当前时间，加快播放速度
    //         if (newTime > duration) newTime = duration; // 防止超过视频总时长
    //     }
    //     video.currentTime = newTime; // 设置新的播放时间
    // });

    // 20250224
    $('#myVideo').on('wheel', function (event) {
      var deltaY = event.originalEvent.deltaY;
      var currentTime = video.currentTime; // 获取当前播放时间
      var duration = video.duration; // 获取视频总时长
      var newTime; // 新的播放时间
      if (deltaY > 0) {
        // 鼠标向下滚动
        newTime = currentTime + speed; // 增加当前时间，加快播放速度
        if (newTime > duration) newTime = duration; // 防止超过视频总时长
      } else {
        // 鼠标向上滚动
        newTime = currentTime - speed; // 减少当前时间，减慢播放速度
        if (newTime < 0) newTime = 0; // 防止小于0
      }
      video.currentTime = newTime; // 设置新的播放时间
    });

    var des =
      '<div class="video-tips"><p>广告创意，请勿模仿。</p><p>灯光效果、车机界面、功能等仅供示意，请以实际交付车辆为准。</p></div>';

    $(document).on('click', '.js_video_player_add', function () {
      $('.vjs-big-play-centered').append(des);
    });
    $(document).on('click', '.close-video-popup', function () {
      $('.video-tips').remove();
    });
    // $("#myVideo").mouseover(function () {
    //     console.log(123);
    //     change();
    // });
  });

  // 20250329
  // function isMobileWeChatBrowser() {
  //   const ua = navigator.userAgent.toLowerCase()
  //   const isWeChat = ua.indexOf('micromessenger') !== -1 // 微信浏览器检测‌:ml-citation{ref="2,7" data="citationList"}
  //   const isMobile = /android|iphone|ipad/i.test(ua) // 移动端检测‌:ml-citation{ref="7,8" data="citationList"}
  //   return isWeChat && isMobile
  // }
  // // 使用示例
  // if (isMobileWeChatBrowser()) {
  //   $('.wechat-hide').hide()
  //   $('.wechat-show').show()
  // } else {
  //   $('.wechat-hide').show()
  //   $('.wechat-show').hide()
  // }

  // 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);
      const webpSrc = $img.closest('picture').find('source[type="image/webp"]').data('srcset');
      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 () {
      // 加载前回调
      $(this).css('background', 'transparent');
      $(this).removeClass('lazyload');
    },
    load: function () {
      // 加载完成回调
      $(this).addClass('lazy-loaded');
    },
  });
});