$(function(){
  //===================================================
  // 先取得預設值 start 若後端要直接渲染好可以去掉 
  //===================================================
  getEchoData(getEchoParam())
  //===================================================
  // 先取得預設值 end 若後端要直接渲染好可以去掉 
  //===================================================
  
  //====================================================
  // 頁簽(非分頁) start
  //====================================================
  $(".tabList-item").on("click", function(){
    $("#class_id").val('');
    $("#year_id").val('');
    let is_now = $(this).hasClass("now")
    if(!is_now){
      $(".tabList-item.now").removeClass("now")
      $(".echo-group.now").removeClass("now")
      $(this).addClass("now")
      $($(this).data("target-class")).addClass("now")
      getEchoData(getEchoParam())
    }
  })
  //====================================================
  // 頁簽(非分頁) end
  //====================================================
  
  //====================================================
  // 搜尋按鈕 start
  //====================================================
  $(".dataFilter-search-btn").on("click", function(){
    getEchoData(getEchoParam())
  })
  //====================================================
  // 搜尋按鈕 end
  //====================================================
  
  //====================================================
  // 燈箱功能 start
  //====================================================
  
  //顯示燈箱
  $(".echo-wrapper").on("click", ".echo-item-pic", function(){
    let is_show = $(".echo-lightbox-wrapper").hasClass("show")
    if(!is_show){
      let position = $(".echo-item-pic").index(this)
      $(".echo-lightbox-carousel").trigger('to.owl.carousel',[position,0,true])
      $(".echo-lightbox-wrapper").removeClass("hide").addClass("show")
      //第一次開啟時啟動輪播
      if($(".echo-lightbox-wrapper .owl-item").length === 0){
        console.log("aa")
        lightboxCarousel()
      }
    }else{
      $(".echo-lightbox-wrapper").removeClass("show").addClass("hide")
    }
  })
  
  //上一則
  $(".echo-lightbox-prev").on("click", function(){
    $(".echo-lightbox-carousel").trigger("prev.owl.carousel")
  })
  //下一則
  $(".echo-lightbox-next").on("click", function(){
    $(".echo-lightbox-carousel").trigger("next.owl.carousel")
    
  })
  
  //關閉燈箱
  $(".echo-lightbox-wrapper").on("click", function(e){
    if($(e.target).hasClass("close-lightbox")){
      $(".echo-lightbox-wrapper").removeClass("show").addClass("hide")
    }
  })
  //====================================================
  // 燈箱功能 end
  //====================================================
  
  
  //====================================================
  // 分頁按鈕 start
  //====================================================
  $(".pagebox").on("click", ".pagebox-btn", function(){
    getEchoData(getEchoParam($(this).data("page")))
  })
  //====================================================
  // 分頁按鈕 end
  //====================================================
})



//包裝要post的參數
function getEchoParam(page = 1){
  let data = {}
  data["echo_type"] = $(".tabList-item.now").data("echo-type"),
  data["cid"] = $("#class_id").val(),
  data["yid"] = $("#year_id").val(),
  data["page"] = page
  for (let i = 0; i<$(".dataFilter-ajax-data").length; i++){
    let target = $(".dataFilter-ajax-data").eq(i)
    data[target.data("name")] = target.val()
  }
  return data
}

//ajax取得資料
function getEchoData(param){
  $.ajax({
    url: $(".template-dataFilter").data("action"),
    type: "GET",
    data: param
  }).done((responseData) => {
    setEchoData(responseData)
  })
}

//ajax後渲染資料
function setEchoData(data){
  let echoHtml = ``
  let lightboxHtml = ``
  let jsonData = JSON.parse(data)
  for(let i = 0; i < jsonData.echo_data.length; i++){
    echoHtml += `<div class="echo-item">
                  <span class="echo-item-year">${jsonData.echo_data[i].year}</span>
                  <img class="echo-item-pic" src="${jsonData.echo_data[i].small_pic}">
                  <div class="echo-item-title">${jsonData.echo_data[i].text}</div>
                </div>`
    lightboxHtml += `<img class="echo-lightbox-pic" src="${jsonData.echo_data[i].large_pic}">`
  }
  let renderEchoTarget = $($(".tabList-item").data("target-class")).find(".echo-wrapper")
  let renderLightboxTarget = $(".echo-lightbox-carousel")
  //渲染列表
  renderEchoTarget.html(echoHtml)
  //渲染燈箱
  renderLightboxTarget.html(lightboxHtml)
  //更新頁碼
  updatePage(jsonData.page_data)
}

//燈箱輪播
function lightboxCarousel(){
  $(".echo-lightbox-carousel")
  .removeClass("owl-hidden")
  .trigger("destroy.owl.carousel")
  .owlCarousel({
    items : 1,
    //loop: true,
    nav : false,
    dots : false
  })
}