// 处于页面配置时，绑定方法 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') */
    }
  })
})
// 分页
function currentPage(currentPage) {
  window.dispatchEvent(
    new CustomEvent('current_page', {
      detail: currentPage,
    })
  )
}
function changePager(sizes) {
  window.dispatchEvent(
    new CustomEvent('pager_change', {
      detail: sizes,
    })
  )
}

$(function () {
  window.addEventListener('pager_change', pagerChange) // 监听分页条数变化
  window.addEventListener('current_page', currentPage) // 监听页码变化
  const params = {
    page: 1,
    pageSize: 8,
    id: ''
  }
  const result = {
    type: -1,
    total: 0,
    list: []
  }
  function pagerChange(e) {
    params.pageSize = +e.detail
    params.page = 1
    result.list = []
    request()
  }
  function currentPage(e) {
    if (e.detail == params.page) return
    params.page = +e.detail
    request()
  }

  // 初始化分页器
  function initPagination() {
    const pagination = $('.ys-product__box .c-pagination-nav').data()
    $(".c-pagination").html('')
    $(".c-pagination").zPager({
      totalData: pagination.total,
      pageStep: 5,
      current: pagination.page,
      pageData: pagination.pageSize
    })
  }
  initPagination()
  
  function request() {
    if ($('.ys-product__box').data('category_id')) params.id = $('.ys-product__box').data('category_id')
    $loading.start()
    $request
      .post("/api/goods/home-category/get-font-spu-data-by-id-page", params)
      .then((res) => {
        result.list = res.data.list
        result.total = res.data.total
        // $('.ys-product__box .ys-product__total span').html(result.total)
        let spu_html = ''
        if (result.list.length) {
          result.list.forEach(e => {
            spu_html += `
            <tr class="product-table-item">
              <td class="product-table-cell">
                <a href="/series/${e.route_code|| ''}.html" class="product-table-img img-scale p-img">
                  <img src="${e.cover_img|| ''}" alt="${e.name|| ''}"/>
                </a>
              </td>
              <td class="product-table-cell">
                <a href="/series/${e.route_code|| ''}.html" title="test" class="product-table-title line-2" target="_blank" title="${e.spu_code|| ''}">
                  <p>${e.spu_code|| ''}</p>
                </a>
              </td>
              <td class="product-table-cell">
                <a href="/series/${e.route_code|| ''}.html" title="test" class="line-2 product-table-desc" target="_blank" title="${e.name|| ''}">
                  <p>${e.name|| ''}</p>
                </a>
              </td>
              <td class="product-table-cell">
                ${!e.paper_2d ? '<i class="iconfont icon-down disable"></i>' : `<a href="${e.paper_2d}" target="_blank"><i class="iconfont icon-down"></i></a>`}
              </td>
            </tr>
            `
          })
          $('.ys-product__box .product-table-body').html(spu_html)
          productViewListItem()
        } else {
          spu_html += `
          <div class="ys-search__empty">
            <img src="/asset/img/product_nodata.png" alt="暂无内容">
            <p>抱歉，没有找到相关的内容</p>
            <p>抱歉，没有找到相关的内容</p>
          </div>
          `
          $('.c-pagination-nav').remove()
          $('.ys-product__box .product-category__list').html(spu_html)
        }
        $(".c-pagination").html('')
        $(".c-pagination").zPager({
          totalData: result.total,
          pageStep: 5,
          current: params.page,
          pageData: params.pageSize
        })
      }).finally(() => {
        $loading.end()
      })
  }

  // 分页
  $("body").on("click", ".c-page-item", function (e) {
    if ($(this).hasClass('disabled')) return
    params.page = +$(this).attr('data-page')
    request()
  });

  // 埋点
  productSelectItemClick()

  /* 分享 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=`
    )
  })
  $('.category-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',
    })
  })
  // 复制链接
  $('.category-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 */
})

/* 埋点方法 start */
const ItemListId = 'category_products_list'; // ga view_item_list 列表id
const ItemListName = 'Category products list';// ga view_item_list 列表名称
function productViewListItem() {
  const itemsInfoList = getProductListInfo()
  if(!Array.isArray(itemsInfoList) || !itemsInfoList.length) return
  const ecommerceListObj = {
    event: "view_item_list",
    ecommerce: {
      item_list_id: ItemListId,
      item_list_name: ItemListName,
      items: itemsInfoList,
    }
  }
  customEventLog('ecommerce', ecommerceListObj, {onlyTrack: ["DataLayerTracker"]})
}

function getProductListInfo() {
  const itemInfoList = []
  $('.ys-product__box .product-table-item').each(function (index, value) {
    const itemEle = $(this)
    const item = {
      item_id: itemEle.find('.product-table-title').text().trim(),
      item_name: itemEle.find('.product-table-desc').text().trim(),
      index: index + 1,
      item_list_id: ItemListId,
      item_list_name: ItemListName,
      from_category: $('.ys-product__box').data('category_id')
    }
    itemInfoList.push(item)
  })

  return itemInfoList
}

// 列表点击商品
function productSelectItemClick() {
  $('.ys-product__box').on('click', '.product-table-button', productSelectItem)
  $('.ys-product__box').on('click', '.product-table-info > a', productSelectItem)
}
function productSelectItem() {
  const tableItemEle = $(this).parents('.product-table-item')

  const ecommerceItemObj = {
    event: "select_item",
    ecommerce : [{
      item_list_id: ItemListId,
      item_list_name: ItemListName,
      items: {
        item_id: tableItemEle.find('.product-table-info > a').text().trim(),
        item_name: tableItemEle.find('.product-table-info > p').text().trim(),
        index: tableItemEle.index(),
        item_list_id: ItemListId,
        item_list_name: ItemListName,
        from_category: $('.ys-product__box').data('category_id')
      }
    }]
  }
  customEventLog('ecommerce', ecommerceItemObj, {onlyTrack: ["DataLayerTracker"]})
}
/* 埋点方法 end */

// 客服
$('.banner-button').on('click', '.service', function (e) {
  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 .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')
})