$(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)
        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)
  }

  // kv
  var mySwiper = new Swiper('.ias-car-kvbanner', {
    // direction: "vertical",
    loop: true,
    pagination: {
      el: '.swiper-pagination-kv',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next-kv',
      prevEl: '.swiper-button-prev-kv',
    },
    slidesPerView: 1,
    speed: 500,
    loop: true,
    autoplay: false,
    spaceBetween: 4,
    keyboard: true,
    observer: true,
    observeParents: true,
  })

  // 乾崑车控 轮播一
  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 + '">' + text + "</span>";
          '<span onclick="' +
          "reportUem('首页-乾崑车控-" +
          text +
          "')" +
          '"' +
          'class="' +
          className +
          '">' +
          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').outerWidth()
        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)
      },
    },
  })

  //乾崑车载云 轮播二
  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 onclick="' +
          "reportUem('首页-乾崑车云服务-" +
          text +
          "')" +
          '"' +
          'class="' +
          className +
          '">' +
          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').outerWidth()
        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)
      },
    },
  })

  //乾崑智驾 轮播三
  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 = 'HUAWEI ADS 4'
            break
          case 1:
            text = '架构升级'
            break
          case 2:
            text = '安全升级'
            break
          case 3:
            text = '体验升级'
            break
          case 4:
            text = '产业升级'
            break
        }
        return (
          '<span onclick="' +
          "reportUem('首页-乾崑智驾-" +
          text +
          "')" +
          '"' +
          'class="' +
          className +
          '">' +
          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)
      },
    },
  })

  //乾崑座舱 轮播四
  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 = 'HarmonySpace 5 鸿蒙座舱车机操作系统'
            break
          case 1:
            text = 'HUAWEI SOUND 非凡系列'
            break
          case 2:
            text = '16.1英寸华为车载智慧屏'
            break
          case 3:
            text = '移动的第三生活空间'
            break
          case 4:
            text = ''
            break
        }
        return (
          '<span onclick="' +
          "reportUem('首页-乾崑座舱-" +
          text +
          "')" +
          '"' +
          'class="' +
          className +
          '">' +
          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-section04-04 .swiper-pagination-bullet').width()
        var allwidth = sliderwidth * this.activeIndex
        var wd = allwidth + 'px'
        $('.ias-tpl-hm-section04-04 .ias-tpl-hm-tool .ias-tpl-pagination-bg').css('left', wd)
      },
    },
  })

  //乾崑车载光 轮播五
  var mySwiper2 = new Swiper('.as-tpl-hm-banner05', {
    loop: false,
    pagination: {
      el: '.swiper-pagination05',
      clickable: true,
      renderBullet: function (index, className) {
        switch (index) {
          case 0:
            text = 'ADB精准遮蔽'
            break
          case 1:
            text = '雨雾安全增强'
            break
          case 2:
            text = '盲区预警'
            break
          case 3:
            text = ''
            break
          case 4:
            text = ''
            break
        }
        return (
          '<span onclick="' +
          "reportUem('首页-乾崑车载光-" +
          text +
          "')" +
          '"' +
          'class="' +
          className +
          '">' +
          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-section05-05 .swiper-pagination-bullet').width()
        var allwidth = sliderwidth * this.activeIndex
        var wd = allwidth + 'px'
        $('.ias-tpl-hm-section05-05 .ias-tpl-hm-tool .ias-tpl-pagination-bg').css('left', wd)
      },
    },
  })

  function resizetab() {
    setTimeout(function () {
      var tabwidth = $('.ias-car-partner-tab-list li.active').outerWidth() + 'px'
      $('.ias-car-partner-tab-con .bg').css('width', tabwidth)
      var allwidth = 0
      $('.ias-car-partner-tab-list li').each(function (i) {
        allwidth += $('.ias-car-partner-tab-list li').eq(i).outerWidth()
        var wd = $(this).outerWidth()
        var activewd = allwidth - wd + 'px'
        $(this).on('click', function () {
          $(this).addClass('active').siblings().removeClass('active')
          $('.ias-car-partner-tab-con .bg').css({ width: wd, left: activewd })
          $('.ias-car-partner-item').eq(i).show().addClass('on').siblings().hide().removeClass('on')
        })
      })
    }, 500)
  }
  resizetab()
  // $(window).resize(function () {
  //     resizetab();
  // });

  $('.ias-car-partner-tab-con h4').on('click', function (e) {
    e.stopPropagation()
    if ($('.ias-car-partner-tab-list').hasClass('active')) {
      $(this).next().removeClass('active')
    } else {
      $(this).next().addClass('active')
    }
  })

  $(document).on('click', function (e) {
    e.stopPropagation()
    $('.ias-car-partner-tab-list').removeClass('active')
  })

  // 合作车型 图片（2）块2
  var mySwiper = new Swiper('.ias-partner-banner-mob02', {
    // direction: "vertical",
    loop: false,
    pagination: {
      el: '.swiper-paginationmob02',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-nextmob02',
      prevEl: '.swiper-button-prevmob02',
    },
    slidesPerView: 1,
    speed: 500,
    loop: false,
    autoplay: false,
    spaceBetween: 4,
    keyboard: true,
    observer: true,
    observeParents: true,
  })

  var mySwiper = new Swiper('.ias-partner-banner-mob02_250312', {
    // direction: "vertical",
    loop: false,
    pagination: {
      el: '.swiper-paginationmob02_250312',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-nextmob02_250312',
      prevEl: '.swiper-button-prevmob02_250312',
    },
    slidesPerView: 1,
    speed: 500,
    loop: false,
    autoplay: false,
    spaceBetween: 4,
    keyboard: true,
    observer: true,
    observeParents: true,
  })
  // 合作车型 图片（3）块3
  var mySwiper = new Swiper('.ias-partner-banner-mob03', {
    // direction: "vertical",
    loop: false,
    pagination: {
      el: '.swiper-paginationmob03',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-nextmob03',
      prevEl: '.swiper-button-prevmob03',
    },
    slidesPerView: 1,
    speed: 500,
    loop: false,
    autoplay: false,
    spaceBetween: 4,
    keyboard: true,
    observer: true,
    observeParents: true,
    breakpoints: {
      900: {
        slidesPerView: 4,
        spaceBetween: 20,
      },
    },
  })
  // 合作车型 图片（4）块4
  var mySwiper = new Swiper('.ias-partner-banner4', {
    // direction: "vertical",
    loop: false,
    pagination: {
      el: '.swiper-pagination4',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next4',
      prevEl: '.swiper-button-prev4',
    },
    slidesPerView: 1,
    speed: 500,
    loop: false,
    autoplay: false,
    spaceBetween: 4,
    keyboard: true,
    observer: true,
    observeParents: true,
    breakpoints: {
      900: {
        slidesPerView: 4,
        spaceBetween: 20,
      },
    },
  })
  // 合作车型 图片（4）块4
  var mySwiper = new Swiper('.ias-partner-banner5', {
    // direction: "vertical",
    loop: false,
    pagination: {
      el: '.swiper-pagination5',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next5',
      prevEl: '.swiper-button-prev5',
    },
    slidesPerView: 1,
    speed: 500,
    loop: false,
    autoplay: false,
    spaceBetween: 4,
    keyboard: true,
    observer: true,
    observeParents: true,
    breakpoints: {
      900: {
        slidesPerView: 4,
        spaceBetween: 20,
      },
    },
  })

  // 合作车型 图片（4）块9
  var mySwiper = new Swiper('.ias-partner-banner9', {
    // direction: "vertical",
    loop: false,
    pagination: {
      el: '.swiper-pagination9',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next9',
      prevEl: '.swiper-button-prev9',
    },
    slidesPerView: 4,
    speed: 500,
    loop: false,
    autoplay: false,
    spaceBetween: 20,
    keyboard: true,
    observer: true,
    observeParents: true,
  })

  // 新闻活动
  var mySwiper = new Swiper('.ias-news-banner-banner01', {
    // direction: "vertical",
    loop: false,
    pagination: {
      el: '.swiper-pagination-news01',
      type: 'fraction',
    },
    navigation: {
      nextEl: '.swiper-button-next-news01',
      prevEl: '.swiper-button-prev-news01',
    },
    slidesPerView: 1,
    speed: 500,
    loop: false,
    autoplay: false,
    spaceBetween: 4,
    keyboard: true,
    observer: true,
    observeParents: true,
    breakpoints: {
      900: {
        slidesPerView: 2,
        spaceBetween: 20,
      },
    },
    on: {
      transitionStart: function (mySwiper) {},
    },
  })

  $('.play_video').click(function () {
    let videoSrc = $(this).attr('data-video')
    $('.popup_box2').addClass('active')
    var width = $('.live-show').width()
    var height = (width * 9) / 16
    $('.live-show').height(height)
    setTimeout(function () {
      $('.live-show iframe').attr('src', videoSrc)
    }, 200)
  })
  $('.popup_box2 .video_close').click(function () {
    $('.popup_box2').removeClass('active')
    $('.live-show iframe').attr('src', '')
  })
  $('.popup_box2 .popup_bg').click(function () {
    $('.popup_box2').removeClass('active')
    $('.live-show iframe').attr('src', '')
  })

  // 250317
  const scrollButton1 = document.getElementById('wen1')
  const section1 = document.getElementById('da1')
  scrollButton1.addEventListener('click', () => {
    section1.scrollIntoView({ block: 'center', behavior: 'smooth' })
    section1.classList.add('active')
    section2.classList.remove('active')
    section3.classList.remove('active')
    section4.classList.remove('active')
    section5.classList.remove('active')
  })

  const scrollButton2 = document.getElementById('wen2')
  const section2 = document.getElementById('da2')
  scrollButton2.addEventListener('click', () => {
    section2.scrollIntoView({ block: 'center', behavior: 'smooth' })
    section2.classList.add('active')
    section1.classList.remove('active')
    section3.classList.remove('active')
    section4.classList.remove('active')
    section5.classList.remove('active')
  })

  const scrollButton2_1 = document.getElementById('wen2_01')
  const section2_1 = document.getElementById('da2')
  scrollButton2_1.addEventListener('click', () => {
    section2_1.scrollIntoView({ block: 'center', behavior: 'smooth' })
    section2_1.classList.add('active')
    section1.classList.remove('active')
    section3.classList.remove('active')
    section4.classList.remove('active')
    section5.classList.remove('active')
  })

  const scrollButton3 = document.getElementById('wen3')
  const section3 = document.getElementById('da3')
  scrollButton3.addEventListener('click', () => {
    section3.scrollIntoView({ block: 'center', behavior: 'smooth' })
    section3.classList.add('active')
    section1.classList.remove('active')
    section2.classList.remove('active')
    section4.classList.remove('active')
    section5.classList.remove('active')
  })

  const scrollButton4 = document.getElementById('wen4')
  const section4 = document.getElementById('da4')
  scrollButton4.addEventListener('click', () => {
    section4.scrollIntoView({ block: 'center', behavior: 'smooth' })
    section4.classList.add('active')
    section1.classList.remove('active')
    section2.classList.remove('active')
    section3.classList.remove('active')
    section5.classList.remove('active')
  })
  const scrollButton5 = document.getElementById('wen5')
  const section5 = document.getElementById('da5')
  scrollButton5.addEventListener('click', () => {
    section5.scrollIntoView({ block: 'center', behavior: 'smooth' })
    section5.classList.add('active')
    section1.classList.remove('active')
    section2.classList.remove('active')
    section3.classList.remove('active')
    section4.classList.remove('active')
  })
})