$(function () {
  // 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)
  //       setTimeout(function () {
  //         img.classList.remove('lazyload')
  //       }, 1200)
  //       observer.unobserve(img)
  //     }
  //   }
  // }
  // const observer = new IntersectionObserver(callback)
  // for (let i of images) {
  //   observer.observe(i)
  // }

  // setTimeout(function () {
  //   $('.ias-tpl-hmkv-con .kv-title').removeClass('lazyload-txt')
  // }, 1230)

  // 20250319
  var des =
    '<div class="video-tips"><p>视频创意，仅供参考，产品外观、功能界面、效果等请以实物为准。</p></div>';

  $(document).on('click', '.js_video_player_tips', function () {
    $('.vjs-big-play-centered').append(des);
  });
  $(document).on('click', '.close-video-popup', function () {
    $('.video-tips').remove();
  });

  // 第一屏
  var screenwidth = $(window).width();

  window.addEventListener('scroll', function () {
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    var scrollHeight = $('.ias-tpl-hmkv-con').height();
    var scrHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    var src = (scrollTop / scrHeight) * 100;
    document.querySelector('.ias-tpl-hmkv-con').style.transform = `translateY(${src}%)`;

    // 20250611
    // var banner03Top = $('#banner03').offset().top - 100
    // if (scrollTop >= banner03Top) {
    //   $('.video_player4').trigger('click')
    // }
  });



  // 轮播一
  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;
        }
        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);
      },
      slideChangeTransitionEnd: function () {
        $('.player-outer-box').find('video').trigger('pause');
        if (screenwidth > 900) {
          $('.js_video_player').removeClass('invisible');
          $('.ias-tpl-hm-section03 .swiper .ias-tpl-hmpc-show img').removeClass('invisible');
        }

        $('.as-tpl-hm-banner01').find('img').trigger('appear');
          gatabswiper(this);
      },
    },
  });
  // $(document).on('click', '.swiper-pagination02 span:nth-child(2)', function () {
  //   $('.video_player3').trigger('click')
  // })
  // 轮播二
  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');
        // if ($('.as-tpl-hm-banner02 .swiper-slide2').hasClass('swiper-slide-active')) {
        //   $('.video_player3').trigger('click')
        // }
      },
      slideChangeTransitionEnd: function () {
          gatabswiper(this);
      },
    },
  });

  $(document).on('click', '.swiper-pagination03 span:nth-child(2)', function () {
    $('.as-tpl-hm-banner03 .video_player3').trigger('click');
  });
  // 轮三
  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');
        if ($('.as-tpl-hm-banner03 .swiper-slide2').hasClass('swiper-slide-active')) {
          $('.as-tpl-hm-banner03 .video_player3').trigger('click');
        }
      },
       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;
        }
        return (
          // '<span class="' + className + '">' + text + "</span>";
          '<span class="' +
          className +
          ' ' +
          '"' +
          'onclick="' +
          "reportUem('乾崑座舱-控人机交互-" +
          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);
      },
    },
  });

  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');
  });

  // if (screenwidth > 900) {
  //   $('.js_video_player').on('click', function () {
  //     $(this).addClass('invisible')
  //     $('.ias-tpl-hm-section03 .swiper .ias-tpl-hmpc-show img').addClass('invisible')
  //   })
  //   $(document).on('click', '.js-close-video', function () {
  //     $('.js_video_player').removeClass('invisible')
  //     $('.ias-tpl-hm-section03 .swiper .ias-tpl-hmpc-show img').removeClass('invisible')
  //   })
  // } else {
  //   $('.js_video_player').attr({ 'data-play-nopop': '', 'data-player-id': '' })
  // }

  // 250317
  const scrollButton1 = document.getElementById('wen1');
  const section1 = document.getElementById('da1');
  scrollButton1.addEventListener('click', () => {
    // var aaa = $('#da1').offset().top;
    // console.log(aaa + 'dianji');
    // section1.scrollIntoView({ block: 'center', behavior: 'smooth' });
      // section1.scrollIntoView({ block: 'center', behavior: 'smooth' });
      $("html,body").animate(
          {
            scrollTop: ($('#da1').offset().top) - ($(window).height() * (2/3)),
          },
          1000
        );
    section1.classList.add('active');
    section2.classList.remove('active');
    section3.classList.remove('active');
    section4.classList.remove('active');
  });

  const scrollButton2 = document.getElementById('wen2');
  const section2 = document.getElementById('da2');
  scrollButton2.addEventListener('click', () => {
    // section2.scrollIntoView({ block: 'center', behavior: 'smooth' });
          $("html,body").animate(
          {
            scrollTop: ($('#da2').offset().top) - ($(window).height() * (2/3)),
          },
          1000
        );
    section2.classList.add('active');
    section1.classList.remove('active');
    section3.classList.remove('active');
    section4.classList.remove('active');
  });
  const scrollButton3 = document.getElementById('wen3');
  const section3 = document.getElementById('da3');
  scrollButton3.addEventListener('click', () => {
    // section3.scrollIntoView({ block: 'center', behavior: 'smooth' });
          $("html,body").animate(
          {
            scrollTop: ($('#da3').offset().top) - ($(window).height() * (2/3)),
          },
          1000
        );
    section3.classList.add('active');
    section1.classList.remove('active');
    section2.classList.remove('active');
    section4.classList.remove('active');
  });
  const scrollButton4 = document.getElementById('wen4');
  const section4 = document.getElementById('da4');
  scrollButton4.addEventListener('click', () => {
    // section4.scrollIntoView({ block: 'center', behavior: 'smooth' });
          $("html,body").animate(
          {
            scrollTop: ($('#da4').offset().top) - ($(window).height() * (2/3)),
          },
          1000
        );
    section4.classList.add('active');
    section1.classList.remove('active');
    section2.classList.remove('active');
    section3.classList.remove('active');
  });

  // $('#wen1').click(function () {
  //   var aaa = $('#da1').offset().top - 300
  //   $('body,html').animate(
  //     {
  //       scrollTop: aaa,
  //     },
  //     1000
  //   )

  //   $('#da1').addClass('active').siblings().removeClass('active')
  // })

  // $('#wen2').click(function () {
  //   var aaa = $('#da2').offset().top - 300
  //   $('body,html').animate(
  //     {
  //       scrollTop: aaa,
  //     },
  //     1000
  //   )

  //   $('#da2').addClass('active').siblings().removeClass('active')
  // })

  // $('#wen3').click(function () {
  //   var aaa = $('#da3').offset().top - 300
  //   $('body,html').animate(
  //     {
  //       scrollTop: aaa,
  //     },
  //     1000
  //   )

  //   $('#da3').addClass('active').siblings().removeClass('active')
  // })

  // $('#wen4').click(function () {
  //   var aaa = $('#da4').offset().top - 300
  //   $('body,html').animate(
  //     {
  //       scrollTop: aaa,
  //     },
  //     1000
  //   )

  //   $('#da4').addClass('active').siblings().removeClass('active')
  // })

  // 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);
      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() < 900) {
        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");
          $('.ias-tpl-hmkv-con .kv-title').removeClass('lazyload-txt');
        });
      }
    },
    load: function () {
      // 加载完成回调
      $(this).addClass('lazy-loaded');
    },
  });
});