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


if ($(".ys-product__list .grid-item").length) {
  $(".c-pagination").html("");
  $(".c-pagination").zPager({
    totalData: +$(".ys-product__spu .ys-product__total span").text(),
    pageStep: 5,
    current: 1,
    pageData: 32,
  });
}
// 分页
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("product_filter", filter); // 监听筛选结果
  window.addEventListener("pager_change", pagerChange); // 监听分页条数变化
  window.addEventListener("current_page", currentPage); // 监听页码变化
  const params = {
    page: 1,
    pageSize: 32,
    attributes: {},
    keyword: "",
    category_id: "",
  };
  const result = {
    type: -1,
    total: 0,
    list: [],
  };
  let filters = [];
  function filter(e) {
    filters = e.detail.filters;
    if (e.detail.category_id) params.category_id = e.detail.category_id;
    params.attributes = {};
    filters.forEach((e) => {
      params.attributes[e.pid] = +e.id;
    });
    params.page = 1;
    result.list = [];
    request();
  }
  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 request() {
    if ($(".ys-product__spu").data("category_id"))
      params.category_id = $(".ys-product__spu").data("category_id");
    result.type = 0;
    $loading.start();
    $request
      .get("/api/goods/spu/list", { params })
      .then((res) => {
        if (res.data && res.data.redirect_url) {
          window.location.href = res.data.redirect_url;
          return;
        }
        window.dispatchEvent(
          new CustomEvent("product_options", {
            detail: {
              options: res.data.options,
            },
          })
        );
        $(".ys-product__cate").remove();

        if (result.type === 0 && res.data.total > 1) {
          $(".ys-product__sku").css("display", "none");
          $(".ys-product__spu .ys-product__search").removeClass("display-none");
          $(
            ".ys-product__spu .ys-product__search .ys-product__total span"
          ).html(res.data.total);
          $(".ys-product__spu .ys-product__search input").val(params.keyword);
          $(".ys-product__list").removeClass("display-none");
          result.list = res.data.list;
          result.total = res.data.total;
          let spu_html = "";
          if (result.list.length) {
            result.list.forEach((e) => {
              spu_html += `
              <div class="grid-item">
                <div class="product-img img-scale p-img" href="/series/${e.route_code}.html" title="{$list.name}">
                  <img src="${e.cover_img||''}" alt="${e.name}" />
                  <div class="product-links">
                    ${
                      e.is_details == 1
                        ? `<a href="/series/${e.route_code}.html" class="product-links__learn">了解更多</a>`
                        : ''
                    }
                    <a href="/category/${e.category_one}.html?apid=${e.attribute_id}&aid=${e.attribute_value_id}" class="product-links__view">查看产品</a>
                  </div>
                </div>
                <a href="${e.is_details == 1 ? `/series/${e.route_code}.html` : `/category/${e.category_one}.html?apid=${e.attribute_id}&aid=${e.attribute_value_id}`}" class="product-info">
                  <div class="product-title" title="${e.name}">
                    <h3 class="hover--underline-primary">
                      <span class="line-1">${e.name}</span>
                      <span class="count">(${e.sku_count})</span>
                    </h3>
                  </div>
                  <p class="product-desc line-1" title="${e.description}">${e.description}</p>
                </a>
              </div>
              `;
            });

            $(".c-pagination").html("");
            $(".c-pagination").zPager({
              totalData: result.total,
              pageStep: 5,
              current: params.page,
              pageData: params.pageSize,
            });
          } else {
            $(".c-pagination").html("");
            spu_html += `
            <div class="ys-search__empty">
              <img src="/asset/img/product_nodata.png" alt="暂无内容">
              <p>抱歉，没有找到相关的内容</p>
              <p>抱歉，没有找到相关的内容</p>
            </div>
            `;
          }
          $(".ys-product__list").html(spu_html);
        } else {}
      })
      .finally(() => {
        $loading.end();
      });
  }

  // 滚动到底部
  /* $(window).scroll(function () {
    if (result.type === 0) {
      if (
        $(document).scrollTop() + 400 >=
        $(document).height() - $(window).height()
      ) {
        if (result.total > params.page * params.pageSize && !$loading.status) {
          params.page++;
          request();
        }
      }
    }
  }); */
  // spu 分页

  // spu搜索框事件
  $("body").on("click", ".ys-product__spu .ys-product__input i", function (e) {
    let val = $(this).parent().find("input").val();
    search(val);
  });
  $("body").on(
    "keyup",
    ".ys-product__spu .ys-product__input input",
    function (e) {
      let val = $(this).val();
      if (e.keyCode === 13) {
        search(val);
      }
    }
  );

  function search(val) {
    params.keyword = val;
    params.page = 1;
    result.list = [];
    request();
  }

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

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