$(document).ready(function() {
	var page = 1;
  
  get_tag_prod_list(page, $("#tag-products"))
  get_tag_prod_list(page, $("#brand-products"))
  
  function get_tag_prod_list(page,prodbox){
    let target = prodbox.data("target"),
        url = prodbox.data("url")
		$.ajax({
      url: url,
      dataType: "jsonp",
      jsonp: "callback",
      type: "GET",
      data: {
        "target": target,
        "page": page
      }
    }).done(function(res){
      //顯示HTML
      let append_Str = ``
      
      //商品部分每頁20個
      for(var i = 2; i < res.length; i++){
        let prod_url = res[i].Url
        append_Str += `
          <div class="productBox">
            <div class="wrapper">
              <a class="productImg" href="${res[i].Url}" target="_blank">
                <img class="lazyimg" src="${res[i].Pic_Path}">
              </a>
              <div class="productTitle">
                <h3><a alt="" class="title" href="${res[i].Url}" target="_blank">${res[i].Name}</a></h3>
                <div class="pricebox"><span class="price-red"> NT$${res[i].Price1}</span></div>
              </div>
            </div>
          </div>`
      }
      
      //超過20個換頁
      if (res[0] > 20) {
        append_Str += '<div class="pager-group">'
        
        //頁數顯示
        append_Str += '<ul class="pager-button">'
        let active_page = parseInt(res[1]),
            total_pages = Math.ceil(res[0]/20),
            max = 0,
            min = 0,
            start = 1,
            end = total_pages
        if(active_page >= 4){
          append_Str += `
            <li class="pager-button-item" data-page="1">
              <span class="pager-button-link Page_Button">1</span>
            </li>
            <li> ... </li>`
        }
        if(active_page < 3){
          //在最前2頁
          max = (total_pages - 1 >= 4) ? 4 : total_pages-1;
          start = 1
          end   = 1 + max
        }else if(active_page >= (total_pages - 1)){
          //在最後2頁
          min = (total_pages - 4 >= 0) ? 4 : total_pages-1;
          start = total_pages - min
          end   = total_pages
        }else{
          start = active_page - 2
          end   = active_page + 2
        }
        
        for(let i = start; i < end + 1; i++){
          append_Str += `
            <li class="pager-button-item ${(i == active_page)?'in-active':''}" data-page="${i}">
              <span class="pager-button-link Page_Button">${i}</span>
            </li>`
        }
        //最後一頁
        if(page <= total_pages - 3){
          append_Str += `
            <li> ... </li>
            <li class="pager-button-item" data-page="${total_pages}">
              <span class="pager-button-link Page_Button">${total_pages}</span>
            </li>`
        }
        append_Str += '</ul>'
        
        //上一頁下一頁
        append_Str += '<ul class="pager">'
        if (active_page > 1) {
          append_Str += `
            <li class="pager-item pager-prev" data-page="${active_page - 1}">
              <span class="Page_Button">上一頁</span>
            </li>`
        }
        if (total_pages > active_page) {
          append_Str += `
            <li class="pager-item pager-next" data-page="${active_page + 1}">
              <span class="Page_Button">下一頁</span>
            </li>`
        }
        append_Str += '</ul>'
        append_Str += '</div'
      }
      
      prodbox.html(append_Str)
    })
  }
  
  //監聽換頁
  $(document).on("click", ".pager-button-item, .pager-item", function(){
    let page = $(this).data("page"),
        prodbox = $(this).parents(".tag-plugin-block")
    get_tag_prod_list(page, prodbox)
  })
  
});