$(function(){
  //選取換頁
  $('#orderbox').change(function(){
    var url = '?order='+$(this).val();
    window.location.href = url;
  })
  $(document).on("click", ".order-item", function(){
    let url = '?order='+$(this).data("val");
    window.location.href = url;
  })
  const owlObj = {
    dots: false,
    nav: true,
    navText: ['', ''],
    responsive: {
      0: {
        margin: 20,
        items: 2,
      },
      576: {
        margin: 20,
        items: 3,
      },
      768: {
        margin: 20,
        items: 4,
      },
      1200: {
        margin: 30,
        items: 4,
      },
    },
  }

  $('.article-slide').owlCarousel(owlObj)

  let asideStep = ''
  $(window).on('resize', function(e) {
    e.preventDefault()

    if($(this).width() >= 992 && asideStep !== 'desktop') {
      asideStep = 'desktop'

      $('.article-list').each(function(i, ele) {
        if($(ele).data('owl.carousel')) {
          $(ele).data('owl.carousel').destroy()
        }
      })
    } else if($(this).width() < 992 && asideStep !== 'mobile') {
      asideStep = 'mobile'

      $('.article-list').owlCarousel(owlObj)
    }
  }).trigger('resize')
})



// ==========================================================
//  手機版篩選器/排序 
// ==========================================================
;(function($) {
  $('.filter-button,.filterbox .close').on('click',function(){
    $('.filterbox').toggleClass('in-active')
  });
  let filterWrapper = $(".filter-popup-wrapper"),
      filterBtn = $(".filter-btn-m"),
      targetOrder = $(".order-wrapper-m"),
      targetFilter = $("#topTitle .filterbox"),
      body = $("body")
  
  function filterPopupClose(){
    body.removeClass("overflow-hidden")
    filterWrapper.removeClass("open")
    filterBtn.removeClass("open")
    targetOrder.removeClass("open")
    targetFilter.removeClass("open")
  }
  
  //開關
  filterWrapper.on("click", filterPopupClose)
  filterBtn.on("click", function(){
    let index = $(this).data("index")
    
    if($(this).hasClass("open")){
      filterPopupClose()
    }else{
      body.addClass("overflow-hidden")
      filterWrapper.addClass("open")
      filterBtn.removeClass("open")
      $(this).addClass("open")
      if(index == "order"){
        targetFilter.removeClass("open")
        targetOrder.addClass("open")
      }else if(index == "filter"){
        targetOrder.removeClass("open")
        targetFilter.addClass("open")
      }
    }
  })
  
  //排序toggle樣式
  targetOrder.on("click", ".order-item", function(){
    if(!$(this).hasClass("selected")){
      $(".order-item").removeClass("selected")
      $(this).addClass("selected")
    }
  })
})($)