$(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
  //====================================================

  //顯示燈箱
  let wrapper = $(".echo-lightbox-wrapper")
  $(".echo-wrapper").on("click", ".echo-item-pic", function(){
    let is_show = wrapper.hasClass("show")
    let _this = $(this)
    let id = _this.data("id")

    getEchoPic(id)
    if(!is_show){
      wrapper.removeClass("hide").addClass("show")
    }else{
      wrapper.removeClass("show").addClass("hide")
    }
  })

  function getEchoPic(id){
    $(".echo-lightbox-pager").addClass("in-disabled")
    data = getEchoParam();
    data["id"]=id;
    $.ajax({
      url: '/about/ajax/ajax_get_echo_pic.php',
      type: "GET",
      dataType:"JSON",
      data: data
    }).done((res) => {
      let picHtml = ''
      if(res.pic_path){
        picHtml = `<div class="echo-lightbox-picbox"><img class="echo-lightbox-pic" src="${res.pic_path}"></div>`
        $(".echo-lightbox-container").html(picHtml)
      }
      if(res.prev){
        $(".echo-lightbox-prev").removeClass("hide").data("id", res.prev)
      }else{
        $(".echo-lightbox-prev").addClass("hide")
      }
      if(res.next){
        $(".echo-lightbox-next").removeClass("hide").data("id", res.next)
      }else{
        $(".echo-lightbox-next").addClass("hide")
      }
    }).always(()=>{
      $(".echo-lightbox-pager").removeClass("in-disabled")
    })
  }

  //上下一則
  $(document).on("click", ".echo-lightbox-pager", function(){
    let _this = $(this)
    let id = _this.data("id")
    if(id){
      getEchoPic(id)
    }
  })

  //關閉燈箱
  wrapper.on("click", function(e){
    if($(e.target).hasClass("close-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}" data-id="${jsonData.echo_data[i].id}">
                  <div class="echo-item-title">${jsonData.echo_data[i].text}</div>
                </div>`
  }
  let renderEchoTarget = $($(".tabList-item").data("target-class")).find(".echo-wrapper")

  //渲染列表
  renderEchoTarget.html(echoHtml)
  //更新頁碼
  updatePage(jsonData.page_data)
}