// 处于页面配置时，绑定方法 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')
    if(!$(this).hasClass('ignore'))
    $('.ys-header__cover').removeClass('display-none')
  }, function () {
    $(this).find('.ys-header__card').removeClass('show')
    $('.ys-header__cover').addClass('display-none')
  })
  // 产品中心悬停
  $('.ys-header__nav .product-item').hover(function () {
    $('.ys-header__nav .product-child').addClass('display-none')
    $('.ys-header__nav .product-item').removeClass('active')
    $(this).addClass('active')
    $(this).next().removeClass('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()
})

// 客服
$('.ys-header-shortcut__server span').click(function(){
  window.dispatchEvent(
    new CustomEvent('openService')
  )
})
$(".ys-spu__tabs").on("click", "li", function (event) {
  const index = $(this).index()
  $(".ys-spu__tabs li").removeClass('active')
  $(this).addClass('active')
  $('.ys-spu__tab-item > div').addClass('display-none')
  $('.ys-spu__tab-item > div').eq(index).removeClass('display-none')
});
$('.ys-product__sku .ys-product__search button span').html('0/' + $('.product-table-item').length)
// 搜索
$("body").on("click", ".ys-product__sku .ys-product__input i", function (e) {
  let val = $(this).parent().find('input').val()
  search(val)
});
$("body").on("keyup", ".ys-product__sku .ys-product__input input", function (e) {
  let val = $(this).val()
  if (e.keyCode === 13) {
    search(val)
  }
});
function search(val) {
  val = val.toLowerCase().replace(/\s+/g,'')
  console.log("注 ~ search ~ val:", val)
  let showNum = 0
  $('.product-table-item').each(function(e) {
    $(this).find('input').prop('checked', false)
    let sku_code = $(this).find('.product-table-cell a').html().toLowerCase().replace(/\s+/g,'')
    let name = $(this).find('img').attr('alt').toLowerCase().replace(/\s+/g,'')
    let alias_code = $(this).data('alias_code').toLowerCase().replace(/\s+/g,'')
    let match = name.includes(val) || sku_code.includes(val) || alias_code.includes(val)
    if (match) {
      showNum++
      $(this).removeClass('display-none')
    } else {
      $(this).addClass('display-none')
    }
  })
  $('.ys-product__total span').html(showNum)
  $('.ys-product__search button').addClass('disabled')
  $('.ys-product__search button span').html('0/' + showNum)
  $('.ys-product__action .batch-action-num i').text(0)
  $('.ys-product__action').removeClass('active')
  if (!showNum) {
    $('.ys-product__table').addClass('display-none')
    $('.ys-product__table').after(`<div class="ys-search__empty">
        <img src="/asset/img/product_nodata.png" alt="暂无内容">
        <p>抱歉，没有找到相关的内容</p>
        <p>抱歉，没有找到相关的内容</p>
      </div>`)
  } else {
    $('.ys-product__table').removeClass('display-none')
    $('.ys-search__empty').remove()
  }
  window.dispatchEvent(
    new CustomEvent('clearSku')
  )

  customSearchLog(val) // 埋点，搜索词记录
}
// 联系客服
$('.spu-action button').click(function() {
  window.dispatchEvent(
    new CustomEvent('openService')
  )
})

// 每次进入页面，在本地存储一次浏览记录
$().ready(function(){
  const code = $('.spu-subtitle').text()
  let storage = localStorage.getItem('browsingHistory') || '[]'
  storage = JSON.parse(storage)
  // 存储数据结构： [{type: 'spu', code: '', time: 时间戳 }]
  // 查询是否存在，如果存在，则更新时间戳
  const target = storage.find(e=>e.type ==='spu' && e.code===code)
  const timeStamp = new Date().getTime() 
  if (target) {
    target.time = timeStamp
  } else {
    // 如果不存在，那么就新增一个
    storage.push({ type: 'spu', code: code, time: timeStamp})
  }
  localStorage.setItem('browsingHistory', JSON.stringify(storage))
})

/* 埋点 start */
// 搜索词记录
function customSearchLog(searchVal) {
  if(!searchVal) return
  const searchEventObj = {
    'event' : 'search',
    'searchTerm' : searchVal
  }
  customEventLog('search', searchEventObj, {onlyTrack: ["DataLayerTracker"]})
}
/* 埋点 end */

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

// 点击分享相关
$('.spu-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=`
  )
})
$('.spu-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',
  })
})
// 复制链接
$('.spu-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('复制成功')
})
/* 分享 end */

/********* tabs start **********/
const fixedHeight = 107 + 40; // 导航栏高度 + 容错
let floorTopList = []
function getFloorItemTop() {
  floorTopList = [];
  $(".spu-tabs a").each(function () {
    floorTopList.push(
      Math.ceil($($(this).attr('href')).offset().top - fixedHeight)
    );
  });
}
const handleScroll = throttle(
  function () {
    if (
      !Array.isArray(floorTopList) ||
      !floorTopList.length
    )
      return;

    const scrollTop = $(window).scrollTop();
    if (scrollTop <= floorTopList[0]) {
      changeTabActive(0);
      return;
    }

    for (let i = 0; i < floorTopList.length; i++) {
      const itemTop = floorTopList[i];
      if (scrollTop >= itemTop - 20) {
        changeTabActive(i);
      }
    }
  },
  100,
  { leading: false }
);

function initScrollTab() {
  getFloorItemTop();
  handleScroll();
  $(window).on("resize", function () {
    getFloorItemTop();
  });
  $(window).on("scroll", handleScroll);
}
$(window).on('load', function() {
  initScrollTab();
})

// tab 切换
let tabTimer;
$(".spu-tabs").on("click", "a", function () {
  const top = $($(this).attr("href")).offset().top - fixedHeight;
  $("html, body")
    .stop()
    .animate(
      {
        scrollTop: top,
      },
      300
    );
  return false;
});

function changeTabActive(index) {
  $(".spu-tabs li.active").removeClass("active");
  $(".spu-tabs li").eq(index).addClass("active");
}
/********* tabs end **********/
// 点击表格行（选中/取消选中）
let compare_skus = []
$('.ys-product__table').on('click', '.product-table-item input', function (e) {
  let checked = $(this).is(':checked')
  if (checked) {
    compare_skus.push($(this).attr('id'))
  } else {
    compare_skus.splice(
      compare_skus.findIndex((e) => e === $(this).attr('id')),
      1
    )
  }
  $('.ys-product__search button span').html(
    compare_skus.length + '/' + ($('.product-table-item').length - $('.product-table-item.display-none').length)
  )
  $('.ys-product__action .batch-action-num i').text(compare_skus.length)
  if (compare_skus.length) {
    $('.ys-product__search button').removeClass('disabled')
    $('.ys-product__action').addClass('active')
  } else {
    $('.ys-product__search button').addClass('disabled')
    $('.ys-product__action').removeClass('active')
  }
})
// 开始对比按钮
$('.ys-product__sku').on('click', '.ys-product__search button', function (e) {
  if (!compare_skus.length) return
  if (compare_skus.length < 2) return $message.info("请至少选择两种物料")
  window.open('/compare.html?sku_code=' + compare_skus.join(','))
})
$(".ys-product__sku").on("click", ".ys-product__search button div", function (e) {
  compare_skus = []
  $('.product-table-item').each(function() {
    $(this).find('input').prop('checked', false)
  })
  $('.ys-product__search button span').html(compare_skus.length + '/' + ($('.product-table-item').length - $('.product-table-item.display-none').length))
  $('.ys-product__search button').addClass('disabled')
  $('.ys-product__action .batch-action-num i').text(compare_skus.length)
  $('.ys-product__action').removeClass('active')
  e.preventDefault();
});
// 保存至清单
$('.ys-product__sku').on('click', '.save-sku', function (e) {
  if (!$isLogin) {
    $message.info('请先登录')
    return
  }
  let sku_id = $(this).attr('data-id')
  $request.post('/api/user/collect', { sku_id }).then((res) => {
    $message.success('保存成功')
  })
})
// 批量保存至清单
$('.ys-product__action .batch-action-save').on('click', function (e) {
  if (!$isLogin) {
    $message.info('请先登录')
    return
  }
  $request
    .post('/api/user/collect', {
      sku_id: $('.product-table-item:has(input:checked) .save-sku')
        .map(function () {
          return $(this).data('id')
        })
        .toArray(),
    })
    .then((res) => {
      $message.success('保存成功')
      // 取消选择
      $('.ys-product__search button div').click()
    })
})
// 分页
function currentPage(currentPage) {
  window.dispatchEvent(
    new CustomEvent('current_page', {
      detail: currentPage,
    })
  )
}
function changePager(sizes) {
  window.dispatchEvent(
    new CustomEvent('pager_change', {
      detail: sizes,
    })
  )
}
// 清除选中
window.addEventListener('clearSku', clearSku)
function clearSku() {
  compare_skus = []
}

// 客服
$('.ys-product__table').on('click', '.product-table-enquiry', function() {
  window.dispatchEvent(
    new CustomEvent('openService')
  )
})
// 客服
$(".service-button").click(function () {
  window.dispatchEvent(new CustomEvent("openService"));
});
// 处于页面配置时，绑定方法
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="${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="${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="${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="${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="${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)
    }
  })
}

window.addEventListener('openService', openService) // 监听全局客服点击事件

$('#backTop').click(function () {
  $('html, body').animate({ scrollTop: 0 }, 300)
})
$('.ys-rightNav .online-serve').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')
})