/*
URL參數
utm_source      = 網址
utm_medium      = ownedmedia
utm_term        = tag
utm_content     = 分類_細分類
utm_campaign    = MMDD_文章名稱
*/
let $ = jQuery

$(document).ready(function() {
	
	Date.prototype.Format = function (fmt) { 
	    var o = {
	        "M+": this.getMonth() + 1, //月份 
	        "d+": this.getDate(), //日 
	        "h+": this.getHours(), //小时 
	        "m+": this.getMinutes(), //分 
	        "s+": this.getSeconds(), //秒 
	        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
	        "S": this.getMilliseconds() //毫秒 
	    };
	    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
	    for (var k in o)
	    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
	    return fmt;
	}
		
	var tags = $(".tag-links:eq(0)").text().replace(/\s+/g, "");

	var day = new Date().Format("MMdd");

	if(!tags){
		var tags = $("#mamaway-tag-products").attr('tags');
	}

	var utm = "utm_source="+window.location.host+"&utm_medium=ownedmedia"+"&utm_term="+tags+"&utm_content="+"&utm_campaign="+day+"_"+document.title.substr(0, 5);
	
	$.ajax({
    url: $("#mamaway-tag-products").attr('url'),
    dataType: 'jsonp',
    jsonp: 'callback',
    type: "GET",
    data: {
      tags: tags
    },
    success: function (data){
      
      let wrapper = $("#mamaway-tag-products"),
          productHtml = ``,
          recommendStep = ''
       
      productHtml += `<h2 class="section-title">推薦商品</h2>`
      productHtml += `<ul class="recommend-list">`
      
      for(var i = 0; i < data.length; i++){
        
        var url = data[i].Url+"?"+utm;
        
        productHtml += `
          <li class="item productBox">
            <div class="preview">
              <a class="pic" href="${url}" target="_blank">
                <img class="lazyimg" src="${data[i].Pic_Path}" style="display: inline;">
              </a>
              <div class="word">
                <h3 class="title-h3"><a alt="" href="${url}" target="_blank">${data[i].Name}</a></h3>
                <div class="price-wrapper">
                  <div class="price-group">
                    <span class="font-insert"> NT$${data[i].Price1}</span>
                  </div>
                </div>
              </div>
            </div>
          </li>
        `;
      };
      
      productHtml += `</ul>`//recommend-list end
      
      wrapper.html(productHtml)
  
      $(window).on('resize', function(e) {
          $(window).width()
          let carousel = $(".recommend-list")
          console.log()
          if($(this).width() > 661 && recommendStep !== 'desktop') {
              recommendStep = 'desktop'
              
              carousel.each(function(i, ele) {
                  if($(ele).children().length > 3) {
                      $(ele).owlCarousel(commonOwlObj(4)).addClass("owl-carousel")
                  }
              })
          } else if($(this).width() <= 661 && recommendStep !== 'mobile') {
              recommendStep = 'mobile'
              
              carousel.each(function(i, ele) {
                  $(ele).trigger("destroy.owl.carousel").removeClass("owl-carousel owl-loaded")
                  $(ele).find(".owl-stage-outer").children().unwrap()
              })
          }
      })
      $(window).trigger('resize')
      
    }
	});
  
  // 共用owl slide obj
  function commonOwlObj(num) {
      let responsiveObj = {}
      const dotsCheck = (location.pathname === '/')? true: false
      const navCheck = (location.pathname === '/')? false: true

      switch (num) {
          case 3:
              responsiveObj = {
                  661: {
                      items: 3,
                      margin: 15,
                      slideBy: 3,
                  },
                  1025:  {
                      items: 3,
                      margin: 20,
                      slideBy: 3,
                  },
              }
              break;

          case 4:
              responsiveObj = {
                  661: {
                      items: 3,
                      margin: 15,
                      slideBy: 3,
                  },
                  1025:  {
                      items: 4,
                      margin: 20,
                      slideBy: 4,
                  },
              }
              break;

          case 5:
              responsiveObj = {
                  661: {
                      items: 3,
                      margin: 15,
                      slideBy: 3,
                  },
                  1025:  {
                      items: 4,
                      margin: 20,
                      slideBy: 4,
                  },
                  1201:  {
                      items: 5,
                      margin: 20,
                      slideBy: 5,
                  },
              }
              break;
      }

      const obj = {
          responsive: responsiveObj,
          autoplay: true,
          autoplayTimeout: 7500,
          autoplayHoverPause: true,
          dots: dotsCheck,
          nav: navCheck,
          navText: ['',''],
      }

      return obj
  }
  
});