$(function () {



  // 头部kv轮播 260423
  var isUserInteracting = false
  var handS = 'null'
  var mySwiperKv = new Swiper('.ias-car-kvbanner', {
    loop: true,
    pagination: {
      el: '.swiper-pagination-kv',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next-kv',
      prevEl: '.swiper-button-prev-kv',
    },
    slidesPerView: 1,
    speed: 500,
    autoplay: {
      delay: 8000,
      disableOnInteraction: false,
    },

    spaceBetween: 4,
    keyboard: true,
    observer: true,
    observeParents: true,
    on: {
      transitionStart: function (mySwiperKv) {
        $('.ias-car-kvbanner').find('img').trigger('appear')
      },

      // 开始拖拽
      // 监听触摸开始
      touchStart: function () {
        isUserInteracting = true
      },
      // 监听滑动结束
      touchEnd: function () {
        // 短暂延迟后重置状态，确保能捕获到切换事件
        clearTimeout(handS)
        handS = setTimeout(() => {
          isUserInteracting = false
        }, 1000)
      },
    },
  })
  // 首页kv 轮播点
  $(document).on('click', '.swiper-pagination-kv span', function () {
    const $_slide = $('.ias-car-kvbanner .swiper-slide-active')
    let pageName = window.gaInfo && window.gaInfo.pageName
    let pageCategory = window.gaInfo && window.gaInfo.pageCategory
    let kvHash = $_slide.data('kvhash')
    let kvActionType = $_slide.data('kvactiontype')
    let kvModule = $_slide.data('kvmodule')
    let kvButtonName = $_slide.data('kvbuttonname')
    let kvTitle = $_slide.data('kvtitle')
    let kvUrl = $_slide.data('kvurl')

    window.dataLayer.push({
      event: 'pic_switch',
      page_category: pageCategory,
      page_name: pageName,
      page_hash: kvHash,
      action_type: kvActionType,
      module: kvModule,
      button_name: kvButtonName,
      pic_title: kvTitle,
      pic_url: kvUrl,
    })
  })



  // 第一屏
  const SCREEN_WIDTH = $(window).width()

  window.addEventListener('scroll', function () {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop
    let scrollHeight = $('.ias-tpl-hmkv-con').height()
    let scrHeight = document.documentElement.scrollHeight || document.body.scrollHeight
    let src = (scrollTop / scrHeight) * 100

    let fixEdh = $('.ias-tpl-hmkv-con-bg').offset().top + 300
    if (
      (scrollTop >= fixEdh && SCREEN_WIDTH >= 850) ||
      (scrollTop >= fixEdh && SCREEN_WIDTH <= 500)
    ) {
      $('.ias-tpl-hmkv-con').addClass('active')
      document.querySelector('.ias-tpl-hmkv-con').style.top = '-300px'
    } else {
      $('.ias-tpl-hmkv-con').removeClass('active')
      document.querySelector('.ias-tpl-hmkv-con').style.top = '0'
    }
  })
  let firstMaxScale = 2.5
  if (SCREEN_WIDTH <= 500) {
    firstMaxScale = 1.3
  }

  if (SCREEN_WIDTH <= 370) {
    firstMaxScale = 1.2
  }
  // 第二屏
  window.onscroll = function () {
    function rotate(a) {
      let rotatable = document.getElementById('ias-tplrotatable')
      let maxRotation = 60
      let maxScale = firstMaxScale
      let maxOpacity = 2
      let docScrollTop = document.documentElement.scrollTop
      let maxScrollTop = a
      let scrollRatio = docScrollTop / maxScrollTop
      let rotation = maxRotation * scrollRatio - (maxRotation * scrollRatio ** 2) / 2
      let scale = maxScale - maxScale * scrollRatio
      let opacity = maxOpacity - maxOpacity * scrollRatio

      if (scale <= 1) {
        rotatable.style.transform = 'scale(' + 1 + ', ' + 1 + ')'
      } else {
        rotatable.style.transform = 'scale(' + scale + ', ' + scale + ')'
      }
    }
    function rotate1(a, b) {
      let rotatable1 = document.getElementById('ias-tplrotatable2')
      let maxRotation1 = 60
      let maxScale1 = firstMaxScale
      let maxOpacity1 = 2
      let docScrollTop1 = document.documentElement.scrollTop
      let maxScrollTop1 = a
      let scrollRatio1 = docScrollTop1 / maxScrollTop1
      let rotation1 = maxRotation1 * scrollRatio1 - (maxRotation1 * scrollRatio1 ** 2) / 2
      let scale1 = maxScale1 - maxScale1 * scrollRatio1
      let opacity1 = scrollRatio1
      rotatable1.style.transform = 'scale(' + scale1 + ', ' + scale1 + ')'
      if (docScrollTop1 > b) {
      
      } else {
        rotatable1.style.opacity = 0
      }
      if (scale1 <= 1) {
        rotatable1.style.transform = 'scale(' + 1 + ', ' + 1 + ')'
        rotatable1.style.opacity = 1
      } else {
        rotatable1.style.transform = 'scale(' + scale1 + ', ' + scale1 + ')'
        rotatable1.style.opacity = 1
      }
    }

    if (SCREEN_WIDTH <= 2700 && SCREEN_WIDTH >= 2160) {
      rotate(1400)
      rotate1(1400, 600)
    }
    if (SCREEN_WIDTH <= 2170 && SCREEN_WIDTH >= 1930) {
      rotate(1200)
      rotate1(1200, 200)
    }
    if (SCREEN_WIDTH <= 1930 && SCREEN_WIDTH >= 1600) {
      rotate(1400)
      rotate1(1400, 600)
    }
    if (SCREEN_WIDTH <= 1600 && SCREEN_WIDTH >= 1500) {
      rotate(1200)
      rotate1(1200, 400)
    }

    if (SCREEN_WIDTH <= 1500 && SCREEN_WIDTH >= 1380) {
      rotate(1200)
      rotate1(1200, 400)
    }
    if (SCREEN_WIDTH <= 1380 && SCREEN_WIDTH >= 1200) {
      rotate(600)
      rotate1(600, 50)
    }
    if (SCREEN_WIDTH <= 1200 && SCREEN_WIDTH >= 900) {
      rotate(300)
      rotate1(300, 50)
    }
    if (SCREEN_WIDTH <= 900 && SCREEN_WIDTH >= 500) {
      rotate(1200)
      rotate1(1200, 200)
    }
    if (SCREEN_WIDTH <= 500) {
      rotate(1600)
      rotate1(1600, 1200)
    }
  }

  // 轮播一
  var mySwiper = new Swiper('.as-tpl-hm-banner01', {
    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 = '迎宾灯语远程 DIY'
            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) {
        let sliderWidth = $('.ias-tpl-hm-section03-01 .swiper-pagination-bullet').width()
        let allWidth = sliderWidth * this.activeIndex
        let transitionWidth = allWidth + 'px'
        $('.ias-tpl-hm-section03-01 .ias-tpl-hm-tool .ias-tpl-pagination-bg').css('left', transitionWidth)
      },
      slideChangeTransitionEnd: function () {
        $('.player-outer-box').find('video').trigger('pause')
        if (SCREEN_WIDTH > 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)
      },
    },
  })

  // 轮播二
  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
        }
        return (
          '<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) {
        let sliderWidth = $('.ias-tpl-hm-section03-02 .swiper-pagination-bullet').width()
        let allWidth = sliderWidth * this.activeIndex
        let transitionWidth = allWidth + 'px'
        $('.ias-tpl-hm-section03-02 .ias-tpl-hm-tool .ias-tpl-pagination-bg').css('left', transitionWidth)
        $('.as-tpl-hm-banner02').find('img').trigger('appear')
      },
      slideChangeTransitionEnd: function () {
        gatabswiper(this)
      },
    },
  })

  // 轮播四
  var mySwiper3 = 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 = 'TSP'
            break
          case 3:
            text = 'eSIM 服务'
            break
        }
        return (
          '<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 (mySwiper3) {
        let sliderWidth = $('.ias-tpl-hm-section03-04 .swiper-pagination-bullet').width()
        let allWidth = sliderWidth * this.activeIndex
        let transitionWidth = allWidth + 'px'
        $('.ias-tpl-hm-section03-04 .ias-tpl-hm-tool .ias-tpl-pagination-bg').css('left', transitionWidth)
        $('.as-tpl-hm-banner04').find('img').trigger('appear')
      },
      slideChangeTransitionEnd: function () {
        gatabswiper(this)
      },
    },
  })

  if (SCREEN_WIDTH < 900) {
    $('.ias-tpl-hm-section03 .swiper-pagination .swiper-pagination-bullet').text('')
  }

  $('.ias-tpl-tip1').on('click', function () {
    let currentPosition = $(window).scrollTop()
    let HmTop = $('.ias-tpl-hm-bm').offset().top - 60
    $('html, body').animate(
      {
        scrollTop: HmTop,
      },
      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')
  })


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

  const SCROLL_BUTTON_01 = document.getElementById('ask1')
  const SECTION_1 = document.getElementById('answer1')
  SCROLL_BUTTON_01.addEventListener('click', () => {
    SECTION_1.scrollIntoView({ block: 'center', behavior: 'smooth' })
    SECTION_1.classList.add('active')
    SECTION_2.classList.remove('active')
  })

  const SCROLL_BUTTON_02 = document.getElementById('ask2')
  const SECTION_2 = document.getElementById('answer2')
  SCROLL_BUTTON_02.addEventListener('click', () => {
    SECTION_2.scrollIntoView({ block: 'center', behavior: 'smooth' })
    SECTION_2.classList.add('active')
    SECTION_1.classList.remove('active')
  })


  // 20260610
  if(SCREEN_WIDTH > 900){
  $('.ias-kv-app-down-a').on('click', function(e) {
    // 添加 active 类
    $(this).parent().toggleClass('active');
});

$(document).on('click', function(e) {
    // 检查点击的目标是否不是 .ias-kv-app-down 元素或其内部元素
    if (!$(e.target).closest('.ias-kv-app-down').length) {
        // 移除 active 类
        $('.ias-kv-app-down').removeClass('active');
    }
});
}
})