$(function(){
  //===================================================
  // 先取得預設值 start 若後端要直接渲染好可以去掉 
  //===================================================
  getYearData(getYearParam())
  //===================================================
  // 先取得預設值 end 若後端要直接渲染好可以去掉 
  //===================================================
  
  //================================
  // 年度簡介跳窗 start
  //================================
  //跳窗
  $(".year-wrapper").on("click", ".year-pic", function(){
    getYearPopupData($(this).parent(".year-item").data("id"))
    $(".year-popup-title").text($(this).parent(".year-item").find(".year-title").text())
    $(".year-popup-wrapper").addClass("open")
  })
  
  //關閉跳窗
  $(".year-popup-wrapper").on("click", ".year-popup-close", function(e){
    $(".year-popup-wrapper").removeClass("open")
  })
  //================================
  // 年度簡介跳窗 end
  //================================
  
  
  //====================================================
  // 分頁按鈕 start
  //====================================================
  $(".pagebox").on("click", ".pagebox-btn", function(){
    getYearData(getYearParam($(this).data("page")))
  })
  //====================================================
  // 分頁按鈕 end
  //====================================================
})


//包裝要post的參數 目前只有頁碼
function getYearParam(page = 1){
  let data = {}
  data["page"] = page
  return data
}

//ajax取得資料
function getYearData(param){
  $.ajax({
    url: "/about/ajax/ajax_get_year.php",
    type: "GET",
    data: param
  }).done((responseData) => {
    setYearData(responseData)
  })
}

//ajax後渲染資料
function setYearData(data){
  let yearHtml = ``
  let jsonData = JSON.parse(data)
  for(let i = 0; i < jsonData.year_data.length; i++){
    yearHtml += `<div class="year-item" data-year="${jsonData.year_data[i].year}" data-id="${jsonData.year_data[i].id}">
                   <img class="year-pic" src="${jsonData.year_data[i].small_pic}">
                   <h4 class="year-title">${jsonData.year_data[i].title}</h4>
                 </div>`
  }
  let renderYearTarget = $(".year-wrapper")
  //渲染列表
  renderYearTarget.html(yearHtml)
  //更新頁碼
  updatePage(jsonData.page_data)
}

//ajax取得彈窗資料
function getYearPopupData(id){
  $.ajax({
    url: "/about/ajax/ajax_get_year_popup.php",
    type: "GET",
    data: {year_id:id}
  }).done((responseData) => {
    setYearPopupData(responseData)
  })
}

//ajax後渲染彈窗資料
function setYearPopupData(data){
  let popupHtml = ``
  let jsonData = JSON.parse(data)
  for(let i = 0; i < jsonData.year_popup_data.length; i++){
    popupHtml += `<div class="year-popup-item flex-center">
                    <div class="year-popup-picbox">
                      <img class="year-popup-pic" src="${jsonData.year_popup_data[i]}">
                    </div>
                  </div>`
  }
  let renderYearPopupTarget = $(".year-popup-carousel")
  //渲染
  renderYearPopupTarget.html(popupHtml)
  yearPopupCarousel()
}

//年度簡介彈窗輪播
function yearPopupCarousel(){
  let carousel = $(".year-popup-carousel")
  carousel
  .removeClass("owl-hidden")
  .trigger("destroy.owl.carousel")
  .owlCarousel({
    items: 1,
    nav: true,
    dots: false,
    navText : ['','']
  })
}