// 处于页面配置时，绑定方法 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="//www.logistics-lawyer.com/m/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") ||
      $(".ys-header .ys-header__menu")[0].contains(e.target) ||
      $(".ys-header .ys-header-menu")[0].contains(e.target) ||
      $(".ys-header .ys-header-search--mobile")[0].contains(e.target)
    ) return
    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')
    $('.ys-header').removeClass('is-show-mobile-search')
  }
  // 搜索事件
  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="//www.logistics-lawyer.com/m/search_result.html?keyword=${e}" title="${e}">${e}</a>`
    })
    $('.ys-header__search-card .search-history .search-words').html(html)
  }
  setHistory()
  // 移动端搜索
  $('.ys-header .ys-header-search--mobile .icon-search').click(function(){
    $('.ys-header').addClass('is-show-mobile-search')
    openSearchCard()
  })

  // 熊猫体育官网首页入口
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') */
    }
  })

  // 点击遮罩
  $('.ys-header__cover').click(function(){
    closeMenuFold()
  })

  // 抽屉
  function openMenuFold() {
    $('.ys-header .ys-header-menu').addClass('show')
    $('.ys-header__cover').removeClass('display-none')
  }

  function closeMenuFold() {
    $('.ys-header__cover').addClass('display-none')
    $('.ys-header .ys-header-menu').removeClass('show')
  }
  
  $('.ys-header .ys-header__menu .icon-menu').click(openMenuFold)
  $('.ys-header .ys-header-menu .icon-close').click(closeMenuFold)
})

// 处于页面配置时，绑定方法 start
if ($isDecorateMode) {
  document.addEventListener("diy_banner/1", (event) => {
    const { field, value } = event.detail;
    console.log(field, value)
    let html = ''
    value.forEach(e => {
      html += `
      <div class="banner-slide swiper-slide">
        <img src="//www.logistics-lawyer.com/m/load/${e.src}" alt="${e.title}">
        <div class="banner-desc">
          <h2>${e.title}</h2>
          <p>${e.desc}</p>
          <button><a href="//www.logistics-lawyer.com/m/load/${e.href}" target="_blank" title="${e.title}">查看产品</a></button>
        </div>
      </div>
      `
    })
    $('.' + field).html(html)
  })
}
// 页面埋点
$('.ys-banner .banner-slide').click(function() {
  clickLog({
    page_key: 'index',
    module_key: 'banner/1'
  })
})
// 处于页面配置时，绑定方法 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="//www.logistics-lawyer.com/m/load/${e.href}" target="_blank" title="${e.title}" class="strength-img img-scale">
            <img src="//www.logistics-lawyer.com/m/load/${e.src}" alt="${e.title}">
          </a>
          <a href="//www.logistics-lawyer.com/m/load/${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>
        `
      })
      $('.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;
  }
})
// 工厂实力
/* new Swiper(".strength-wrap", {
  spaceBetween: 14,
  slidesPerView: 2,
  slidesPerGroup: 1,
  centeredSlides : false,
  loop: true,
  pagination: false,
  nextButton: '.strength-arrow .arrow-right',
  prevButton: '.strength-arrow .arrow-left',
  roundLengths : true,
  lazyLoadingInPrevNext: true,
  lazyLoading : true,
  lazyLoadingInPrevNextAmount: 2,
  loopAdditionalSlides: 2,
  watchSlidesProgress: false,
  onSetTranslate: function (swiper) {
    let slides = swiper.slides;
    for (i = 0; i < slides.length; i++) {
      var slide = slides.eq(i);
      slide.transform(""); //清除样式
    }
  },
  breakpoints: {
    576: {
      spaceBetween: -6,
      slidesPerView: 1.5,
      centeredSlides : true,
      watchSlidesProgress: true,
      onSetTranslate: function (swiper) {
        let slides = swiper.slides;
        for (i = 0; i < slides.length; i++) {
          var slide = slides.eq(i);
          progress = slides[i].progress;
          slide.css({ opacity: "", background: "" });
          slide.transform(""); //清除样式
          slide.transform("scale(" + (1 - Math.abs(progress) / 8) + ")");
        }
      },
      onSetTransition: function (swiper, transition) {
        let slides = swiper.slides;
        for (var i = 0; i < slides.length; i++) {
          var slide = slides.eq(i);
          slide.transition(transition);
        }
      },
    },
    375: {
      spaceBetween: -6,
      slidesPerView: 1.3,
      centeredSlides : true,
      watchSlidesProgress: true,
      onSetTranslate: function (swiper) {
        let slides = swiper.slides;
        for (i = 0; i < slides.length; i++) {
          var slide = slides.eq(i);
          progress = slides[i].progress;
          slide.css({ opacity: "", background: "" });
          slide.transform(""); //清除样式
          slide.transform("scale(" + (1 - Math.abs(progress) / 8) + ")");
        }
      },
      onSetTransition: function (swiper, transition) {
        let slides = swiper.slides;
        for (var i = 0; i < slides.length; i++) {
          var slide = slides.eq(i);
          slide.transition(transition);
        }
      },
    },
    340: {
      slidesPerView: 1,
    },
  },
}) */

/* 新品速递 start */
let newProductSwiper;

handleProductSwiper();
const _handleProductSwiper = throttle(handleProductSwiper, 500, {
  trailing: true,
});
$(window).on("resize", _handleProductSwiper);

function handleProductSwiper() {
  const width = $(window).width()
  if(width <= 440) {
    initNewProductSwiper()
  } else {
    destroyNewProductSwiper();
  }
}
function initNewProductSwiper(){
  if(newProductSwiper) return;
  newProductSwiper = new Swiper(".swiper-product", {
    autoplay: false,
    loop: true,
    spaceBetween: 14,
    slidesPerView: 1,
    slidesPerGroup: 1,
    pagination: false,
    roundLengths : true,
    nextButton: '.swiper-product .arrow-right',
    prevButton: '.swiper-product .arrow-left',
  })
}
function destroyNewProductSwiper() {
  if(!newProductSwiper) return
  newProductSwiper.destroy(true, true)
  // $('.content-product-item.swiper-slide').removeAttr("style")
  // $('.product-list.swiper-wrapper').removeAttr("style")
  newProductSwiper = null
}
/* 新品速递 end */

// 数字滚动
/* function animateNumber(element, targetNumber, duration) {
  var counterElement = typeof element === "string" ? $(element) : element;
  var currentValue = parseFloat(counterElement.text());
  if(currentValue >= targetNumber ) return
  
  var step = (targetNumber - currentValue) / (duration / 50);

  var interval = setInterval(function () {
    currentValue += step;
    counterElement.text(Math.round(currentValue));

    if (currentValue >= targetNumber) {
      clearInterval(interval);
      counterElement.text(targetNumber);
    }
  }, 50);
}
function initCounter() {
  $('.ys-index__power .power-item').each(function () {
    let val = +$(this).find('.power-num div:first').data('number')
    animateNumber($(this).find('.power-num div:first'), val, 800)
  })
}

function scrollToPower(){
  if ($(window).scrollTop() >= $('#power').offset().top - 450) {
    initCounter()
    // 初始化之后清除绑定事件
    $(window).off('scroll', scrollToPower)
  }
}
$(window).scroll(scrollToPower) */

$('.ys-index__content .content-box .content-tabs div').hover(function() {
  $('.ys-index__content .content-box .content-tabs div').removeClass('tab-active')
  $(this).addClass('tab-active')
  let type = $(this).attr('data-type')
  $('.ys-index__content .tab-item-warp').addClass('display-none')
  $('.ys-index__content .tab-item-warp[data-type='+type+']').removeClass('display-none')
})

// 页面埋点
// 熊猫体育app官方入口
$('.ys-index__product a').click(function() {
  clickLog({
    page_key: 'mobile.index',
    module_key: 'mobile/index/product'
  })
})
//内容中心
$('.ys-index__information a').click(function() {
  clickLog({
    page_key: 'mobile.index',
    module_key: 'mobile/index/content'
  })
})
//解决方案
$('.ys-index__content--solution a').click(function() {
  clickLog({
    page_key: 'mobile.index',
    module_key: 'mobile/index/solution'
  })
})
// 新品速递
$('.ys-index__content--product a').click(function() {
  clickLog({
    page_key: 'mobile.index',
    module_key: 'mobile/index/new_product'
  })
})
//工厂实力
$('.ys-index__strength a').click(function() {
  clickLog({
    page_key: 'mobile.index',
    module_key: 'mobile/index/strength'
  })
})
// 报价按钮
$('.ys-index__reason .reason-button').click(function() {
  clickLog({
    page_key: 'mobile.index',
    module_key: 'mobile/index/quote'
  })
})
// 选择电子谷切换
$(".ys-index__reason").on("mouseenter", ".tabs-item", function () {
  $(".ys-index__reason .tabs-item").removeClass("active");
  $(this).addClass("active");

  const index = $(this).index();
  changeReasonTab(index);

  const activeTab = $(".ys-index__reason .tabs-item.active").get(0);
  scrollToActiveTab(activeTab);
});

function changeReasonTab(index) {
  $(".ys-index__reason .reason-wrap").removeClass("show");
  $(".ys-index__reason .reason-wrap").eq(index).addClass("show");
}

var scrollToActiveTab;
let tabsScrollObj;
function initReasonTabScroll() {
  const navScroll = $(".ys-index__reason .reason-tabs__box").get(0);
  const nav = $(".ys-index__reason .reason-tabs__wrap").get(0);
  tabsScrollObj = initTabScroll(navScroll, nav);
  scrollToActiveTab = tabsScrollObj.scrollToActiveTab;
}

initReasonTabScroll();

// 控制左右切换显示
// 加载完成执行一次
handleTabScrollBar();
const _handleTabScrollBar = throttle(handleTabScrollBar, 500, {
  trailing: true,
});
$(window).on("resize", _handleTabScrollBar);

function handleTabScrollBar() {
  const nav = $(".ys-index__reason .reason-tabs__box").get(0);
  const navSize = nav.scrollWidth;
  const navScroll = $(".ys-index__reason .reason-wrap").get(0);
  const containerSize = navScroll.offsetWidth;

  if (navSize > containerSize) {
    $(".ys-index__reason .reason-tabs").addClass("is-scroll");
  } else {
    $(".ys-index__reason .reason-tabs").removeClass("is-scroll");
  }
}

$(".reason-tabs__arrow.left").click(function () {
  scrollPrev();
});

function scrollPrev() {
  const containerSize = $(".ys-index__reason .reason-tabs__box").get(
    0
  ).offsetWidth;
  const currentOffset = tabsScrollObj.currentOffset;
  if (!currentOffset) return;
  let newOffset =
    currentOffset > containerSize ? currentOffset - containerSize : 0;
  tabsScrollObj.setTabTransform(newOffset);
}

$(".reason-tabs__arrow.right").click(function () {
  scrollNext();
});
function scrollNext() {
  const nav = $(".ys-index__reason .reason-tabs__wrap").get(0);
  const navSize = nav.scrollWidth;
  const navScroll = $(".ys-index__reason .reason-tabs__box").get(0);
  const containerSize = navScroll.offsetWidth;

  const currentOffset = this.navOffset;

  if (navSize - currentOffset <= containerSize) return;

  let newOffset =
    navSize - currentOffset > containerSize * 2
      ? currentOffset + containerSize
      : navSize - containerSize;

  tabsScrollObj.setTabTransform(newOffset);
}

// 处于页面配置时，绑定方法 start
if ($isDecorateMode) {
  document.addEventListener("diy_customer/say", (event) => {
    const { field, value } = event.detail;
    let html = ''
    if (field === 'say_title') {
      $('.ys-index__say .ys-index__title').html(value)
    } else if (field === 'say_list') {
      value.forEach(e => {
        html += `
        <div class="say-item swiper-slide">
          <div class="say-logo">
            <img src="//www.logistics-lawyer.com/m/load/${e.logo}" alt="${e.name}">
          </div>
          <div class="say-desc">
            ${e.title}
          </div>
          <div class="say-name">${e.desc} </div>
        </div>
        `
      })
      $('.say-banner .swiper-wrapper').html(html)
    } else if (field === 'say_logo') {
      value.forEach(e => {
        html += `
        <img src="//www.logistics-lawyer.com/m/load/${e.src}" alt="${e.alt}">
        `
      })
      $('.say-company').html(html)
    }
  })
}

new Swiper(".say-banner", {
  autoplay: 3000,
  loop: true,
  nextButton: '.say-wrap .arrow-right',
  prevButton: '.say-wrap .arrow-left',
})

// 处于页面配置时，绑定方法
if ($isDecorateMode) {
  document.addEventListener('diy_footer/1', (event) => {
    const { field, value } = event.detail
    console.log(field, value)
    if (field === 'footer_ad') {
      const nodes = $(
        value
          .map((item) => `<img src="//www.logistics-lawyer.com/m/load/${item.src}" alt="${item.alt}" />`)
          .join('')
      )
      $('.ys-footer__ad').empty()
      $('.ys-footer__ad').append(nodes)
    } else if (field === 'contact_phone') {
      $('.footer_phone').text(value)
    } else if (field === 'work_time') {
      $('.footer_work_time').text(value)
    } else if (field === 'contact_email') {
      $('.footer_email').text(value)
    } else if (field === 'footer_nav') {
      const nodes = $(
        value
          .map(
            (c) => `
           <nav class="content-link">
            <span>${c.category}</span>
            <ul class="children-link-wrap">
              ${c.children
                .map(
                  (s) => `
                      <li>
                        <a href="//www.logistics-lawyer.com/m/load/${s.href}" target="_blank" title="${s.title}">${s.title}</a>
                      </li>
                  `
                )
                .join('')}
            </ul>
          </nav>
      `
          )
          .join('')
      )
      $('.ys-footer__content .center-part').empty()
      $('.ys-footer__content .center-part').append(nodes)
    } else if (field === 'right_part') {
      const nodes = $(
        value
          .map((item) => `<img src="//www.logistics-lawyer.com/m/load/${item.src}" alt="${item.alt}" />`)
          .join('')
      )
      $('.ys-footer__content .right-part').empty()
      $('.ys-footer__content .right-part').append(nodes)
    } else if (field === 'friendly_links') {
      const nodes = $(
        value
          .map(
            (e) => `
            <li>
              <a href="//www.logistics-lawyer.com/m/load/${e.href}" target="_blank" title="${e.title}" ref="${e.nofollow ? 'nofollow' : ''}">${e.title}</a>
            </li>
          `
          )
          .join('')
      )
      $('.ys-footer__friendly ul').empty()
      $('.ys-footer__friendly ul').append(nodes)
    } else if (field === 'copyright') {
      $('.copyright-wrap span').text(value)
    } else if (field === 'beian') {
      $('.copyright-wrap a').text(value)
    } else if (field === 'footer_logo') {
      $('.footer-logo').attr('alt', value.alt)
      $('.footer-logo').attr('src', value.src)

    } else if (field === 'map_links') {
      const nodes = $(
        value
          .map(
            (e) => `
            <a href="//www.logistics-lawyer.com/m/load/${e.href}" target="_blank" title="${e.title}" ref="${e.nofollow ? 'nofollow' : ''}">${e.title}</a>
          `
          )
          .join('')
      )
      $('.ys-footer__end .end-link').empty()
      $('.ys-footer__end .end-link').append(nodes)
    }
  })
}

// 底部导航折叠面板
$('.ys-footer__content .center-part').on('click','.content-link__title',function(){
  const item = $(this)
  item.parent().toggleClass('show')
  item.next().stop().slideToggle()
})
window.addEventListener('openService', openService) // 监听全局客服点击事件

// 打开客服弹窗
function openService() {
  if ($('#aff-im-root .embed-toolbar-btn').length > 0) {
    $('#aff-im-root .embed-toolbar-btn').eq(0).click()
  } else {
    window.open('https://affimvip.baidu.com/cps5/chat?siteToken=a7ba6ebbc2c4e8d66bd2f203b94d6c07&siteId=16910226', '_blank')
  }
}

$('.ys-tabbar__service').click(function(){
  openService()
})