// 处于页面配置时，绑定方法 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_skuDetail/1', (event) => {
    const { field, value } = event.detail
    if (field == 'tabs') {
      $('.ys-sku__tabs').empty()
      $('.ys-sku__tabs').append(
        $(
          value
            .filter((e) => e.enable)
            .map((e) => {
              return `<li>${e.name}</li>`
            })
            .join('')
        )
      )
      $('.ys-sku__tabs li:first-child').click()
    }
  })
}
// 处于页面配置时，绑定方法 end

// 预览图纸
$('.sku-drawing').on('click', 'a', function (event) {
  const url = $(this).attr('url')
  window.open(
    `/fileview/onlinePreview?url=${encodeURIComponent(btoa(encodeURI(url)))}`,
    '__blank'
  )
})
// 查看图纸
$('.sku-drawing').on('click', '.icon-eye', function (event) {
  const url = $(this).parents('.sku-drawing').find('a').attr('url')
  window.open(
    `/fileview/onlinePreview?url=${encodeURIComponent(btoa(encodeURI(url)))}`,
    '__blank'
  )
})
// 下载图纸
$('.sku-drawing').on('click', '.icon-down', function (event) {
  const url = $(this).parents('.sku-drawing').find('a').attr('url')
  const title = $(this).parents('.sku-drawing').find('a').text()
  let link = document.createElement('a')
  link.setAttribute('href', url)
  link.setAttribute('download', title)
  link.setAttribute('target', '__blank')
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
})
// 询价
$('.sku-action').on('click', 'button:first', function (event) {})
// 申请试样
$('.sku-action').on('click', 'button:last', function (event) {
  const code = $(this).attr('data-code')
  window.open('/free_sample.html?sku_code=' + code)
})
// tabs点击
$('.ys-sku__tabs').on('click', 'li', function (event) {
  const text = $(this).text()
  $('.ys-sku__tabs li').removeClass('active')
  $(this).addClass('active')
  $('.ys-sku__tab-item > div').addClass('display-none')
  $(`.ys-sku__tab-item > div[role=${text}]`).removeClass('display-none')
})
// 联系客服
$('.sku-action button:first').click(function () {
  window.dispatchEvent(new CustomEvent('openService'))
})

/********* 轮播方法 start **********/
let pos = 0
let totalSlides = $('.sku-banner .sku-banner__slider .banner-slide').length
let sliderWidth = $('.sku-banner .sku-banner__slider').width()
let oldSliderLeft = 0; // 用于 resize 时，减少赋值

$(function () {
  $('.sku-banner .sku-banner__slider').width(sliderWidth * totalSlides)
  // $('.sku-banner .sku-banner__slider').css('display', 'flex')

  pagination()

  $('.sku-banner__indicator li').click(function () {
    pos = $(this).index()
    setSliderScrollLeft()
    pagination()
  })
})

function setSliderScrollWidth() {
  sliderWidth = $('.sku-banner').width()
  $('.sku-banner .sku-banner__slider').width(sliderWidth * totalSlides)
}

function setSliderScrollLeft() {
  const left = -(sliderWidth * pos);
  if(oldSliderLeft === left) return
  oldSliderLeft = left
  $('.sku-banner .sku-banner__slider').css('transform', `translateX(${-(sliderWidth * pos)}px)`)
}

const _handleSkuBannerScrollSize = throttle(function() {
  setSliderScrollWidth()
  setSliderScrollLeft()
}, 500, {
  trailing: true,
});

$(window).on("resize", _handleSkuBannerScrollSize);


function slideLeft() {
  pos--
  if (pos == -1) {
    pos = totalSlides - 1
  }
  $('.sku-banner .sku-banner__slider').css('left', -(sliderWidth * pos))

  pagination()
}

function slideRight() {
  pos++
  if (pos == totalSlides) {
    pos = 0
  }
  $('.sku-banner .sku-banner__slider').css('left', -(sliderWidth * pos))

  pagination()
}

function pagination() {
  $('.sku-banner__indicator li').removeClass('active')
  $('.sku-banner__indicator li:eq(' + pos + ')').addClass('active')
}
/********* 轮播方法 end **********/

/********* 放大镜 start **********/
$('.sku-banner .banner-slide').on('mouseenter', function () {
  if (!$(this).find('img').attr('src').includes('http')) return
  $(this).find('.mask').show()
  $('.sku-mirror').show()
})
$('.sku-banner .banner-slide').on('mouseleave', function () {
  $(this).find('.mask').hide()
  $('.sku-mirror').hide()
})
$('.sku-banner .banner-slide').on('mousemove', function (e) {
  let x = e.pageX - $(this).find('img').offset().left
  let y = e.pageY - $(this).find('img').offset().top

  let maskX = x - $(this).find('.mask').width() / 2
  let maskY = y - $(this).find('.mask').height() / 2
  if (maskX <= 0) {
    maskX = 0
  } else if (
    maskX >=
    $(this).find('img').width() - $(this).find('.mask').width()
  ) {
    maskX = $(this).find('img').width() - $(this).find('.mask').width()
  }
  if (maskY <= 0) {
    maskY = 0
  } else if (
    maskY >=
    $(this).find('img').height() - $(this).find('.mask').height()
  ) {
    maskY = $(this).find('img').height() - $(this).find('.mask').height()
  }
  $(this)
    .find('.mask')
    .css('left', maskX + 'px')
    .css('top', maskY + 'px')
  let maxLittleMove =
    $(this).find('img').width() - $(this).find('.mask').width()
  $('.sku-mirror img').attr('src', $(this).find('img').attr('src'))
  let maxBigMove = $('.sku-mirror img').width() - $('.sku-mirror').width()
  $('.sku-mirror img')
    .css('left', (-maskX * maxBigMove) / maxLittleMove + 'px')
    .css('top', (-maskY * maxBigMove) / maxLittleMove + 'px')
})
/********* 放大镜 end **********/

// 下载页面
$('#download-page').on('click', function () {
  window.print()
})

// 点击分享相关
$('.sku-share .tencent').on('click', () => {
  let url = encodeURIComponent(location.href)
  let title = encodeURIComponent($('.article__title').text())
  window.open(
    `https://connect.qq.com/widget/shareqq/index.html?url=${url}&title=${title}&source=${url}&desc=${title}&pics=`
  )
})
$('.sku-share .weibo').on('click', () => {
  let url = encodeURIComponent(location.href)
  let title = encodeURIComponent($('.article__title').text())
  window.open(
    `https://service.weibo.com/share/share.php?url=${url}&title=${title}&pic=&appkey=&sudaref=`
  )
})
// 创建分享二维码
$().ready(() => {
  new QRCode(document.querySelector('.share-options .cover-code div'), {
    text: location.href,
    width: 90,
    height: 90,
    colorDark: '#000000',
    colorLight: '#ffffff',
  })
})
// 复制链接
$('.sku-share .link').on('click', () => {
  let oInput = document.createElement('input')
  oInput.value = location.href
  document.body.appendChild(oInput)
  oInput.select()
  document.execCommand('Copy')
  oInput.remove()
  $message.success('复制成功')
})

// 处于页面配置时，绑定方法
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()
})