// 处于页面配置时，绑定方法 start
if ($isDecorateMode) {
  document.addEventListener("diy_header/1", (event) => {
    const { field, value } = event.detail;
    console.log(field, value)
    if (field === 'hots') {
      let html = ''
      value.forEach(e => {
        html += `<a class="hover--underline-primary" target="_blank" href="/search_result.html?keyword=${e.name}" title="${e.name}">${e.name}</a>`
      })
      $('.' + field).html(html)
    }
  });
}
// 处于页面配置时，绑定方法 end
$(function () {

  $("#logout").click(function () {
    $request
        .post("/api/user/logout")
        .then((res) => {
          // 跳转页面
          location.href = "/";
        });
  })

  // 防止一开始进入页面在底部不显示
  setHeaderSticky()
  $(window).scroll(setHeaderSticky)

  function setHeaderSticky(){
    let offset = $("html,body").scrollTop()
    if (offset) {
      $('.ys-header').addClass('is-sticky')
    } else {
      $('.ys-header').removeClass('is-sticky')
    }
  }

  // 导航栏悬停
  $('.ys-header__nav .nav-item').hover(function () {
    $(this).find('.ys-header__card').addClass('show')
    $('.ys-header__cover').removeClass('display-none')
  }, function () {
    $(this).find('.ys-header__card').removeClass('show')
    $('.ys-header__cover').addClass('display-none')
  })
  // 搜索框悬停事件
  $('.ys-header__search').focus(function () {
    $('.ys-header__nav').addClass('display-none')
    $('.ys-header__right').addClass('open')
  }, function() {
    if (!$('.ys-header__search-card').hasClass('show')) {
      $('.ys-header__nav').removeClass('display-none')
      $('.ys-header__right').removeClass('open')
    }
  })
  // 搜索框聚焦事件
  $('.ys-header__search input').focus(function () {
    openSearchCard()
  })
  $('.ys-header__search-card .icon-close').click(function () {
    closeSearchCard()
  })
  $(document).on('click', function (e) {
    if (!$('.ys-header__search-card')[0].contains(e.target) && !$('.ys-header__search input').is(':focus')) {
      closeSearchCard()
    }
  })
  // 搜索
  $('.ys-header__search input').keyup(function (e) {
    if (e.keyCode === 13) {
      search()
    }
  })
  $('.ys-header__search .search-btn').click(function () {
    search()
  })
  // 清空历史记录
  $('.ys-header__search-card .search-history span').click(function () {
    localStorage.removeItem('searchHistory')
    setHistory()
  })
  // 展开搜索卡片
  function openSearchCard() {
    $('.ys-header__nav').addClass('display-none')
    $('.ys-header__search-card').addClass('show')
    $('.ys-header__cover').removeClass('display-none')
    $('.ys-header__right').addClass('open')
  }
  // 收起搜索卡片
  function closeSearchCard() {
    $('.ys-header__nav').removeClass('display-none')
    $('.ys-header__search-card').removeClass('show')
    $('.ys-header__cover').addClass('display-none')
    $('.ys-header__right').removeClass('open')
  }
  // 搜索事件
  function search() {
    let val = $('.ys-header__search input').val()
    if (!val) return $message.warning('请输入搜索关键词')
    let history = JSON.parse(localStorage.getItem('searchHistory')) || []
    history.unshift(val)
    history = [...new Set(history)]
    localStorage.setItem('searchHistory', JSON.stringify(history.slice(0, 10)))
    window.open('/search_result.html?keyword=' + val)
    closeSearchCard()
    setHistory()
  }
  // 设置搜索历史
  function setHistory() {
    let history = JSON.parse(localStorage.getItem('searchHistory')) || []
    let html = ''
    history.forEach(e => {
      html += `<a class="hover--underline-primary" target="_blank" href="/search_result.html?keyword=${e}" title="${e}">${e}</a>`
    })
    $('.ys-header__search-card .search-history .search-words').html(html)
  }
  setHistory()

  // 内容与服务tabs切换
  const moreTypeList = ['information', 'catalog'] // 存在 more 的类型
  $('.service-cate li').hover(function () {
    let type = $(this).attr('data-type')
    if (type) {
      $('.service-cate li').removeClass('active')
      $(this).addClass('active')
      $('.ys-header__service .content-item').addClass('display-none')
      $('.ys-header__service .content-item[data-type='+type+']').removeClass('display-none')
      
      if(moreTypeList.includes(type)){
        $('.service-content-more').not('.' + type).addClass('display-none')
        $('.service-content-slide').removeClass('display-none')
        $('.service-content-more.' + type).removeClass('display-none')
      } else {
        $('.service-content-more').addClass('display-none')
        $('.service-content-slide').addClass('display-none')
      }
    }
  })
  // 关于我们tabs切换
  $('.about-cate-item').hover(function () {
    let type = $(this).attr('data-type')
    if (type) {
      $('.about-cate-item').removeClass('active')
      $(this).addClass('active')
      $('.about-content .about-item').addClass('display-none')
      $('.about-content .about-item[data-type='+type+']').removeClass('display-none')
      
      // 用于切换底部更多链接跳转，现在没有更多，如果需要参考上方取消注释
      /* $('.about-content-slide').addClass('display-none')
      $('.about-content-more').addClass('display-none') */
    }
  })
})
// 处于页面配置时，绑定方法 start
if ($isDecorateMode) {
  document.addEventListener("diy_index/1", (event) => {
    const { field, value } = event.detail;
    console.log(field, value)
    let html = ''
    if (field === 'strength_title') {
      $('.ys-index__strength .ys-index__title').html(value)
    } else if (field === 'strength_subtitle') {
      $('.ys-index__strength .ys-index__subtitle').html(value)
    } else if (field === 'strength_list') {
      value.forEach(e => {
        html += `
        <div class="strength-item swiper-slide">
          <a href="${e.href}" target="_blank" title="${e.title}" class="strength-img img-scale">
            <img src="${e.src}" alt="${e.title}">
          </a>
          <div class="strength-content">
          <a href="${e.href}" target="_blank" title="${e.title}" class="strength-title">
            <h3>${e.title} <i class="iconfont icon-short-arrow"></i></h3>
          </a>
          <p class="strength-desc">
            ${e.desc}
          </p>
          </div>
        </div>
        `
      })
      $('.strength-scroll').html(html)
    }
  })
}
new Swiper(".ys-banner", {
  autoplay: 3000,
  loop: true,
  paginationClickable :true,
  pagination: '.ys-banner__indicator',
  nextButton: '.ys-banner #next',
  prevButton: '.ys-banner #prev',
  onSlideChangeStart: function(swiper){
    const index = swiper.activeIndex
    const video = $('.ys-banner__slider .banner-slide').eq(index).find('video')
    if(video[0]) video[0].currentTime = 0;
  }
})
// 强大能力 hover 效果
$('.ys-index__power .power-item').hover(function() {
}, function() {
   // 鼠标移出，什么都不做，CSS 会自动恢复默认状态
});


// 解决方案
$('.ys-index__solution .solution-tab-item:not(.view-more)').hover(function() {
  const index = $(this).data('index');
  // Update Tabs
  $('.ys-index__solution .solution-tab-item').removeClass('active');
  $(this).addClass('active');

  // Update Content Panels
  $('.solution-detail-panel').removeClass('active');
  $('.solution-detail-panel[data-index="' + index + '"]').addClass('active');
});

// Click event for solution tabs (handling both click and hover is good for UX)
$('.ys-index__solution .solution-tab-item:not(.view-more)').click(function() {
    // Logic is same as hover
    const index = $(this).data('index');
    $('.ys-index__solution .solution-tab-item').removeClass('active');
    $(this).addClass('active');
    $('.solution-detail-panel').removeClass('active');
    $('.solution-detail-panel[data-index="' + index + '"]').addClass('active');
});



// 客服
$('.ys-index').on('click', '.open-service', function(){
  window.dispatchEvent(
    new CustomEvent('openService')
  )
})

// 页面埋点
// 产品中心
$('.ys-index__product a').click(function() {
  clickLog({
    page_key: 'index',
    module_key: 'index/product'
  })
})
//内容中心
$('.ys-index__information a').click(function() {
  clickLog({
    page_key: 'index',
    module_key: 'index/content'
  })
})
// 解决方案
$('.ys-index__solution a').click(function() {
  clickLog({
    page_key: 'index',
    module_key: 'index/solution'
  })
})
// 新品速递
$('.ys-index__new-product a').click(function() {
  clickLog({
    page_key: 'index',
    module_key: 'index/new_product'
  })
})
// 成熟工艺流程体系
new Swiper(".strength-wrap", {
  slidesPerView: 4,
  slidesPerGroup: 4,
  spaceBetween: 20,
  loop: true,
  nextButton: '.ys-index__strength .arrow-right',
  prevButton: '.ys-index__strength .arrow-left',
  // 防止 Swiper 在容器初始宽度为0时计算错误
  // observer: true,
  // observeParents: true,
  // 确保 loop 模式下有足够的 slide 进行填充，如果 slide 数量少于 slidesPerView * 2 可能会有问题，但通常 4 个以上开启 loop 需注意
  // 关键：Swiper 3.x loop 模式下可能需要设置loopedSlides
  loopedSlides: 4,
})
$('.ys-index__strength a').click(function() {
  clickLog({
    page_key: 'index',
    module_key: 'index/strength'
  })
})

// 规范质量交付管理切换
new Swiper(".deliverables-swiper", {
  slidesPerView: 1,
  loop: true,
  nextButton: '.ys-index__deliverables .btn-next',
  prevButton: '.ys-index__deliverables .btn-prev',
  pagination: '.ys-index__deliverables .swiper-pagination',
  paginationClickable: true,
})
// 一站式制造互联能力
$(".ys-index__reason").on("mouseenter", ".tabs-item", function () {
  $(".ys-index__reason .tabs-item").removeClass("active");
  $(this).addClass("active");

  const index = $(this).index();
  $(".ys-index__reason .reason-wrap").removeClass("show");
  $('.ys-index__reason .reason-wrap').eq(index).addClass('show')
});
// 报价按钮
$('.ys-index__reason .reason-button').click(function() {
  clickLog({
    page_key: 'index',
    module_key: 'index/quote'
  })
})
// 专利与认证
function updatePatentLevel(swiper) {
  const slides = swiper.slides;
  for (let i = 0; i < slides.length; i++) {
    const $slide = slides.eq(i);
    const progress = slides[i].progress;
    const absProgress = Math.abs(progress);

    $slide.removeClass('patent-level-active patent-level-near patent-level-far-left patent-level-far-right');

    if (absProgress < 0.5) {
      $slide.addClass('patent-level-active');
    } else if (absProgress < 1.5) {
      $slide.addClass('patent-level-near');
    } else if (absProgress < 2.5) {
      if (progress > 0) {
        $slide.addClass('patent-level-far-right');
      } else {
        $slide.addClass('patent-level-far-left');
      }
    }
  }
}

new Swiper(".patent-swiper", {
  slidesPerView: 5,
  spaceBetween: 20,
  centeredSlides: true,
  watchSlidesProgress: true,
  loop: true,
  nextButton: '.ys-index__patent .patent-next',
  prevButton: '.ys-index__patent .patent-prev',
  onInit: function(swiper) {
    updatePatentLevel(swiper);
  },
  onSetTranslate: function(swiper) {
    updatePatentLevel(swiper);
  },
  breakpoints: {
  //   1024: {
  //     slidesPerView: 3,
  //   },
  //   768: {
  //     slidesPerView: 1,
  //   }
  }
})
// 处于页面配置时，绑定方法
if ($isDecorateMode) {
  document.addEventListener('diy_footer/3', (event) => {
    const { field, value } = event.detail
    console.log(field, value)

    // Updates for Logo
    if (field === 'footer_logo') {
      $('.ev-footer__logo').attr('alt', value.alt)
      $('.ev-footer__logo').attr('src', value.src)
    }
    // Updates for Phone
    else if (field === 'contact_phone') {
      $('.ev-footer__phone-number').text(value)
    }
    // Updates for Work Time
    else if (field === 'work_time') {
      $('.js-work-time').text(value)
    }
    // Updates for Email
    else if (field === 'contact_email') {
      $('.js-email').text(value)
    }
    // Updates for QR Codes (right_part in data)
    else if (field === 'right_part') {
        const nodes = $(
          value
            .map((item) => `
                <div class="ev-footer__qr-item">
                    <img src="${item.src}" alt="${item.alt}" />
                </div>
            `)
            .join('')
        )
        $('.ev-footer__qr-group').empty()
        $('.ev-footer__qr-group').append(nodes)
    }
    // Updates for Navigation Links
    else if (field === 'footer_nav') {
      const nodes = $(
        value
          .map(
            (c) => `
           <div class="ev-footer__nav-col">
            <h3 class="ev-footer__nav-title">${c.category}</h3>
            <ul class="ev-footer__nav-list">
              ${c.children
                .map(
                  (s) => `
                      <li class="ev-footer__nav-item">
                        <a href="${s.href}" target="_blank" title="${s.title}">${s.title}</a>
                      </li>
                  `
                )
                .join('')}
            </ul>
          </div>
      `
          )
          .join('')
      )
      $('.ev-footer__nav-section').empty()
      $('.ev-footer__nav-section').append(nodes)
    }
    // Updates for Friendly Links
    else if (field === 'friendly_links') {
      const nodes = $(
        value
          .map(
            (e) => `
            <a href="${e.href}" target="_blank" title="${e.title}" ref="${e.nofollow ? 'nofollow' : ''}">${e.title}</a>
          `
          )
          .join('')
      )
      $('.ev-footer__friendly-links').find('a').remove(); // Clear only links, keep label
      $('.ev-footer__friendly-links').append(nodes)
    }
    // Updates for Copyright
    else if (field === 'website_copyright') {
       $('.ev-footer__copyright').text(value)
    }
    // Updates for ICP
    else if (field === 'website_beian') {
       $('.ev-footer__icp a').text(value)
    }
  })
}
window.addEventListener('openService', openService) // 监听全局客服点击事件

$('#backTop').click(function () {
  $('html, body').animate({ scrollTop: 0 }, 300)
})
$('.ys-rightNav .service').click(function() {
  openService()
})
// 打开客服弹窗
function openService() {
  if ($('#aff-im-root .embed-icon-pcIcon5').length > 0) {
    $('#aff-im-root .embed-icon-pcIcon5').click()
  } else {
    $('#newBridge .nb-icon-wrap').click()
  }

  customEventLog("open_server"); // 打点
  customEventLog("set", { key:'purchase', value:'service'}, {onlyTrack: ["ClarityTracker"]}); // clarity标签
}
// 监听页面滚动
$(window).scroll(function () {
  $('.ys-rightNav #backTop').css('display', $(document).scrollTop() ? 'block' : 'none')
})