// 累加計數器
function countUp(targetItem, animationTime, animationStep) {
	const targetNum = $(targetItem).text().split(',').join('') * 1

	const addNumber = targetNum / (animationTime / animationStep)
	let returnNum = 0

	function counter() {
		if(returnNum < targetNum) {
			returnNum = Math.ceil(returnNum + addNumber)
			setTimeout(counter, animationStep)
		} else {
			returnNum = targetNum
		}
		$(targetItem).text(addSeparator(returnNum))
	}
	counter()
}

// 數字加上千分位
function addSeparator(string) {
	const numString = string * 1 + ''
	const floatAry = numString.split('.')
	const numAry = floatAry[0].split('')
	const remainderNum = numAry.length % 3

	let kiloNum = ''

	for(let i = numAry.length - 1; i >= 0; i--) {
		kiloNum = numAry[i] + kiloNum
		if((i - remainderNum) % 3 === 0 && i !== 0) {
			kiloNum = ',' + kiloNum
		}
	}

	if(floatAry[1]) {
		kiloNum = kiloNum + '.' + floatAry[1]
	}

	return kiloNum
}

// 執行累加計數器
(function(window, document, $, jQuery) {
	$('.counterBox').each(function(i, item) {

		countUp(item, 1000, 25)
	})
})(window, document, $, jQuery);

// 列表：查看更多公益活動
;(function($, jQuery) {
	$('.timeline-wrapper').on('click', '.getMoreWelfare', function(e) {
		e.preventDefault()
		const itemsGroup = $(this).parents('.timeline-wrapper').find('.timeline-list > .item')
		const oldestYear = itemsGroup.eq(itemsGroup.length - 1).attr('data-year')
		const clickEle = $(this)

	    jQuery.ajax({
	    	url: '/welfare/ajax/ajax_get_welfare.php',
	    	type: 'POST',
	    	dataType: 'json',
	    	async: true,
	    	data: {
	    		'year': oldestYear,
	    	},
	    }).done(function(res) {
	    	// console.log(res);

	    	// 沒有更多活動資訊時，隱藏「載入更多」按鈕
	    	const findPrevId = (ele) => ele.prevID !== 0
	    	if(!res.every(findPrevId)) {
	    		clickEle.addClass('hide')
	    	} else {
	    		clickEle.removeClass('hide')
	    	}

	    	const appendStr = res.reduce((prev, ele) => {
	    		return prev += `
				<li class="item" data-year="${ele.year}">
					<div class="date-box">
						<p class="date font-primary">${ele.date}</p>
						<div class="brand">
							<img src="${ele.brandPic}" alt="${ele.brandName}">
						</div>
					</div>
					<div class="content-box">
						<p class="catalog font-primary">${ele.intro}</p>
						<h2 class="title">
							<a href="${ele.url}" title="${ele.name}">${ele.name}</a>
						</h2>
						<div class="preview">
							<a href="${ele.url}" title="${ele.name}">
								<img src="${ele.picPath}" alt="${ele.name}">
							</a>
						</div>
						<p class="unit">
							<span>${ele.brandName}</span>
						</p>
					</div>
				</li>
				`
	    	}, '')

	    	$('.timeline-list').append(appendStr)
	    }).fail(function(x, y, z) {
	    	console.log(x, y, z);
	    })
	})

})($, jQuery)

// 細節頁 banner 輪播
;(function($) {
    if($('.carousel-swiper').length) {
    	const swiper = new Swiper(".carousel-swiper", {
    		slidesPerView: 3,
    		loop: true,
    		navigation: {
    			nextEl: ".carousel-next",
    			prevEl: ".carousel-prev",
    		},
    		breakpoints: {
    			0: {
    				direction: 'horizontal',
		    		spaceBetween: 1,
    			},
    			768: {
    				direction: 'vertical',
    				spaceBetween: 10,
    			},
    			992: {
    				direction: 'vertical',
    				spaceBetween: 15,
    			},
    			1200: {
    				direction: 'vertical',
    				spaceBetween: 21,
    			},
    			1360: {
    				direction: 'vertical',
    				spaceBetween: 22,
    			},
    		},
    	})

    	$('.carousel-swiper').on('click', '.link', function(e) {
    		e.preventDefault()

    		const itemTarget = $(this).attr('href')
    		$(this).parents('.carousel-wrapper').find('.carousel-preview > .image').attr('src', itemTarget)
    	})
    }
})($)

// 細節頁：下方時間軸
;(function($) {
	const timelineTarget = '.articles-group'
    if($(timelineTarget).length) {
    	$(timelineTarget).on('scroll', function(e) {
    		const viewportWidth = $(this).width()
    		$(this).find('.with-detail').each(function(i, ele) {
    			const offsetLeft = $(ele).offset().left
    			if(offsetLeft > viewportWidth / 2 - 15 && offsetLeft < viewportWidth / 2 + 15 && !$('body').hasClass('DeviceWithHover')) {
    				$(ele).addClass('in-hover')
    			} else {
    				$(ele).removeClass('in-hover')
    			}
    		})
    	}).trigger('scroll')

    	$(timelineTarget).on('click', '.with-detail', function(e) {
    		if(!$('body').hasClass('DeviceWithHover')) {
    			e.preventDefault()
    			$(this).addClass('in-hover').siblings('.with-detail').removeClass('in-hover')
    		}
    	})
    }
})($)