// 姝ｅ紡鐗
const dataBaseUrl='https://cms.jingdiao.com'
// 寮€鍙戠増
// const dataBaseUrl='http://172.24.20.252:9991'
const token="1234f95023ab9af2112324d1940f005187b02fefbd4b9b2841904f28128450639ceb81c474a65dc14e754b83458d5604e0575a1b875c6519c64fbecd2b915ab9ad5b0420d37ad86980f2e8c54ab5daff8e211d59daf841786dd4a5a6a45f1bcf8002064802610cb8e8afbd39f5a03be2f251a521bdabc911f2affc73bb57b24e"

var machineVideo
var vueApp
initApp()
getData()
function initApp(){
	const { createApp, ref, onUpdated,computed } = Vue
	vueApp = createApp({
		setup(){
			const carousels=ref([])
			const recentActivities=ref([])
			const newsrooms=ref([])
			const customerStories=ref([])
			const samples=ref([])
			const recommends=ref([])
			const videoLibraryBigArea=ref([])
			const videoLibraryNormalArea=ref([])
			onUpdated(()=>{
				initSwiper()
				initVideoLibrary()
				initSampleSwiper()
			})
			return {
                carousels,
				recentActivities,
				newsrooms,
				customerStories,
				samples,
				lastNewsroom:computed(()=>{
					return newsrooms.value[0]
				}),
				lastRecentActivity:computed(()=>{
					return recentActivities.value[0]
				}),
				recommends,
				videoLibraryBigArea,
				videoLibraryNormalArea,
				dataBaseUrl
			}
		}
	}).mount('#home-app')
}

function getData(){
	jQuery.ajax({
		type: "GET",
		url: `${dataBaseUrl}/api/zh-carousels?populate[bgVideoOrImg]=*&populate[m_bgImg]=*&sort[0]=orderDate:desc&sort[1]=id:desc&pagination[pageSize]=500`,
		beforeSend: function(request) {
		   request.setRequestHeader("Authorization",`Bearer ${token}`)
		},
		success: function(result) {
			vueApp.carousels=result.data||[]
		}
	})
	jQuery.ajax({
		type: "GET",
		url: `${dataBaseUrl}/api/zh-newsrooms?sort[0]=date:desc&sort[1]=id:desc&populate[coverImg]=*&populate[content][populate]=*&pagination[pageSize]=3`,
		beforeSend: function(request) {
		   request.setRequestHeader("Authorization",`Bearer ${token}`)
		},
		success: function(result) {
			vueApp.newsrooms=result.data
		}
	})
	jQuery.ajax({
		type: "GET",
		url: `${dataBaseUrl}/api/zh-recent-activities?sort[0]=id:desc&filters[status][$in][0]=doing&filters[status][$in][1]=todo&populate[coverImg]=*&populate[logoImg]=*&populate[contentItems][populate]=*&pagination[pageSize]=4`,
		beforeSend: function(request) {
		   request.setRequestHeader("Authorization",`Bearer ${token}`)
		},
		success: function(result) {
			let orderArr=['doing','todo']
			vueApp.recentActivities=(result.data||[]).sort((a,b)=>{
				let indexA = orderArr.indexOf(a.attributes.status)
				let  indexB = orderArr.indexOf(b.attributes.status)
				return indexA - indexB;
			})
		}
	})
	jQuery.ajax({
		type: "GET",
		url: `${dataBaseUrl}/api/customer-story?sort[0]=id:desc&populate[paragraph]=*&populate[medias][populate]=*&pagination[pageSize]=3`,
		beforeSend: function(request) {
		   request.setRequestHeader("Authorization",`Bearer ${token}`)
		},
		success: function(result) {
			vueApp.customerStories=result.data||[]
		}
	})
	jQuery.ajax({
		type: "GET",
		url: `${dataBaseUrl}/api/home-recommends?sort[0]=id:desc&populate[items][populate]=*&pagination[pageSize]=1`,
		beforeSend: function(request) {
		   request.setRequestHeader("Authorization",`Bearer ${token}`)
		},
		success: function(result) {
			vueApp.recommends=(result.data&&result.data[0].attributes.items)||[]
		}
	})
	jQuery.ajax({
		type: "GET",
		url: `${dataBaseUrl}/api/zh-videos?sort[0]=description:desc&sort[1]=id&filters[showInHomePage][$in][0]=bigArea&filters[showInHomePage][$in][1]=normalArea&populate[video]=*&populate[videoPoster]=*&pagination[pageSize]=500`,
		beforeSend: function(request) {
		   request.setRequestHeader("Authorization",`Bearer ${token}`)
		},
		success: function(result) {
			vueApp.videoLibraryBigArea=(result.data||[]).filter(ele=>{
				return ele.attributes.showInHomePage==='bigArea'
			})
			vueApp.videoLibraryNormalArea=(result.data||[]).filter(ele=>{
				return ele.attributes.showInHomePage==='normalArea'
			})
		}
	})
	// getSampleData((sampleData)=>{
		// vueApp.samples=sampleData||[]
	// }, ['jdhgt600t','jdhgt600th']);
	getSampleData((sampleData)=>{
		vueApp.samples=sampleData||[]
	},'home');
}

function initSwiper(){
	var homeMainSwiper_pc = new Swiper('.home-main-swiper', {
		loop: true,
		slidesPerView: 1,
		effect : 'fade',
		fadeEffect: {
		    crossFade: true,
		},
		on: {
		    slideChangeTransitionEnd: function(){
			   	var myvideo = jQuery('video').eq(this.activeIndex); //jQuery瀵硅薄 
			   	var video = myvideo[0]; //DOM瀵硅薄
			   	var totalTime = 0; 
			   	var currentTime = 0; 
			   	video.addEventListener('loadedmetadata', function() { 
			   		totalTime = video.duration; 
			   	})
			   	video.addEventListener('timeupdate', function() { 
			   		currentTime = video.currentTime; 
			   	})
			   	function restart() { 
			   		if(video.readyState != 0){
			   			video.currentTime = totalTime; 
			   			video.play();	
			   		}			 			   		
			   	}
			   	restart();
		    }
		}
	});
	var homeMainDescSwiper_pc = new Swiper('.home-main-desc-swiper', {
		slidesPerView: 1,
	  	loop: true,
	  	autoplay: {
	  		disableOnInteraction: false,
	  	},
	  	pagination: {
	    	el: '.home-main-swiper-pagination',
	    	clickable: true,
	  	},
	  	navigation: {
	    	nextEl: '.home-main-swiper-next',
	    	prevEl: '.home-main-swiper-prev',
	  	},
	  	controller: {
		    control: homeMainSwiper_pc //鎺у埗Swiper1
	  	}
	});
	homeMainSwiper_pc.controller.control = homeMainDescSwiper_pc;
	homeMainDescSwiper_pc.controller.control = homeMainSwiper_pc;
	jQuery('.home-main-desc-swiper .swiper-pagination-bullet').html('<div class="line-filled"></div>');
	
	var homeMainSwiper_m = new Swiper('.home-main-swiper_m', {
		loop: true,
		slidesPerView: 1,
		on: {
		    slideChangeTransitionEnd: function(){
			   	var myvideo = jQuery('video').eq(this.activeIndex); //jQuery瀵硅薄 
			   	var video = myvideo[0]; //DOM瀵硅薄
			   	var totalTime = 0; 
			   	var currentTime = 0; 
			   	video.addEventListener('loadedmetadata', function() { 
			   		totalTime = video.duration; 
			   	})
			   	video.addEventListener('timeupdate', function() { 
			   		currentTime = video.currentTime; 
			   	})
			   	function restart() { 
			   		if(video.readyState != 0){
			   			video.currentTime = totalTime; 
			   			video.play();	
			   		}			 			   		
			   	}
			   	restart();
		    }
		}
	});
	var homeMainDescSwiper_m = new Swiper('.home-main-desc-swiper_m', {
		slidesPerView: 1,
	  	loop: true,
	  	autoplay: {
	    	delay: 10000,
	    	disableOnInteraction: false,
	    	reverseDirection: false,
	    	stopOnLastSlide: false,
	    	speed: 10000
	  	},
	  	pagination: {
	    	el: '.m-home-main-swiper-pagination',
	    	clickable: true,
	  	},
	  	navigation: {
	    	nextEl: '.m-home-main-swiper-next',
	    	prevEl: '.m-home-main-swiper-prev',
	  	},
	  	controller: {
		    control: homeMainSwiper_m //鎺у埗Swiper1
	  	}
	});
	homeMainSwiper_m.controller.control = homeMainDescSwiper_m;
	homeMainDescSwiper_m.controller.control = homeMainSwiper_m;
}

function initVideoLibrary(){
	jQuery('.recommend-item').off('click');
	jQuery('.recommend-item').click(function(){
		let videoId='video-recommend-item-' +jQuery(this).attr('data-id');
		let videoEle = jQuery('#'+videoId)
		if(videoEle&&videoEle.length){
			if(videoEle.hasClass('vjs-v5')){
				return
			}
			let vvideo=videojs(videoId, {
				controls: true,
				preload: 'none',
				loop: false,
				poster: videoEle.attr('data-poster'),
				sources: [{
					src: videoEle.attr('data-src'),
					type: 'video/mp4'
				}]
			  });
			jQuery(this).find('.under-img').css('opacity', '0');
			jQuery(this).find('.recommend-item-content').css('display', 'none');
			vvideo.play();
		}else{
			let link=jQuery(this).attr('data-link')
			link && window.open(link,'_blank')
		}
	})
}

function initSampleSwiper(){
	var samplesSwiper_pc = new Swiper('.samples-swiper', {
	    slidesPerView: 4,
	    slidesPerColumn: 3,
		slidesPerGroup: 4,
	    spaceBetween: 15,
		initialSlide: 0,
	    pagination: {
	        el: '.samples-pagination',
	        clickable: true,
	    },
	  	navigation: {
	    	nextEl: '.sample-next',
	    	prevEl: '.sample-prev',
	  	},
	});	
	var samplesSwiper_m = new Swiper('.samples-swiper_m', {
	    slidesPerView: 1,
	    slidesPerColumn: 3,
		slidesPerGroup: 1,
	    spaceBetween: 15,
		initialSlide: 0,
	    pagination: {
	        el: '.m-samples-pagination',
	        clickable: true,
	    }
	});	

	//	var machines = $(".sample-detail-btn");
	var machines = jQuery(".sample-area");
	var str = '';
	
	machines.click(function(event){
		event.stopPropagation();
		event.preventDefault();	
		var num = jQuery(this).attr('data-index');
        function showImg() {
        	var str = '';
			var partObj =vueApp.samples[num];
			if(!partObj) return
			var name = partObj.name;
			var material = partObj.material;
			var size = partObj.size;
			var theme = partObj.theme;
			var machine = partObj.machine;
			var feature= partObj.feature;
			var highlights = partObj.highlights;
			var story = partObj.story;
			var detail = partObj.machine && getSampleMachineUrl(partObj.machine.split(/[,|銆亅[ ]+|锛寍]/)[0]);
			var sampleVideo = partObj.docs.find(x=>x.toLowerCase().endsWith('mp4'))
			str += '<div class="mask-layer">';
			str += '<div class="mask-layer-black"></div>';
			str += '<div class="mask-prev btn-default-styles"><span class="icon---"></span></div>';
			str += '<div class="mask-next btn-default-styles"><span class="icon--8"></span></div>';
			str += '<div class="mask-close btn-default-styles icon-2"></div>';
			str += '<div class="m-t-140-pc mask-layer-container">';
//				str += '<div class="mask-left">';
//				str += '<img class="item-img" src='+img+'></div>';
			str += '<div class="mask-left">';
			str += '<div class="swiper-container sample-top-swiper sample' + num + '-top-swiper">';
			str += '<div class="swiper-wrapper">';
			str += '</div>';
			str += '</div>';
			str += '<div class="swiper-container sample-bottom-swiper sample' + num + '-bottom-swiper">';
			str += '<div class="swiper-wrapper"></div>';
			str += '</div>';
			str += '</div>';
			str += '<div class="mask-right">';
			str += '<p class="sample-name">'+name+'</p>';	
			if(material){
				str+= '<div class="sample-info">';
				str += '<div class="sample-title">';
				str += '<p class="sample-item">鏉忺span style="display:inline-block;width:2em;"></span>鏂橔</p></div>';
				str += '<div class="sample-content">';
				str += '<p class="sample-item">'+material+'</p></div></div>';
			}			
			if(size){			
				str+= '<div class="sample-info">';
				str += '<div class="sample-title">';
				str += '<p class="sample-item">灏裹span style="display:inline-block;width:2em;"></span>瀵氟</p></div>';
				str += '<div class="sample-content">';
				str += '<p class="sample-item">'+size+'</p></div></div>';	
			}
			if(theme){			
				str+= '<div class="sample-info">';
				str += '<div class="sample-title">';
				str += '<p class="sample-item">绫狐span style="display:inline-block;width:2em;"></span>鍒?</p></div>';
				str += '<div class="sample-content">';
				str += '<p class="sample-item">'+theme+'</p></div></div>';	
			}			
			if(machine){			
				str+= '<div class="sample-info">';
				str += '<div class="sample-title">';
				str += '<p class="sample-item">鍔犲伐鏈哄簥:</p></div>';
				str += '<div class="sample-content">';
				str += '<p class="sample-item">'+machine+'</p></div></div>';	
			}
			if(feature){			
				str+= '<div class="sample-info">';
				str += '<div class="sample-title">';
				str += '<p class="sample-item">鍔犲伐鐗瑰緛:</p></div>';
				str += '<div class="sample-content">';
				str += '<p class="sample-item">'+feature.join('銆?)+'</p></div></div>';
			}
			if(highlights){			
				str+= '<div class="sample-info">';
				str += '<div class="sample-title">';
				str += '<p class="sample-item">鍔犲伐浜偣:</p></div>';
				str += '<div class="sample-content">';
				str += '<p class="sample-item">'+highlights+'</p></div></div>';
			}
			if(story){			
				str+= '<div class="sample-info">';
				str += '<div class="sample-title">';
				str += '<p class="sample-item">鏍峰搧鏁呬簨:</p></div>';
				str += '<div class="sample-content">';
				str += '<p class="sample-item">'+story+'</p></div></div>';
			}
			if(detail || sampleVideo){
				str += '<div class="sample-mores">';
				if(detail){
					str += '<a href='+detail+' class="sample-more" target="_blank">鍔犲伐鏈哄簥</a>';
				}
				if(sampleVideo){
					str += '<div class="sample-more sample-video" data-video=https://file.jingdiao.com/teamwork/public/'+encodeURIComponent(sampleVideo)+'  video-id="sampleVideoAreaDialog1" area-id="sample-video-dialog-area">鏍峰搧瑙嗛</div>';
				}
				str += '</div>';
			}
			str += '</div></div></div>';
			jQuery(".t3-wrapper").append(str);		
            //鍏抽棴
            jQuery(".mask-close").click(function () {
                jQuery(".mask-layer").remove();
            });
            jQuery(".mask-layer-black").click(function () {
                jQuery(".mask-layer").remove();
            });
            //涓嬩竴寮
            jQuery(".mask-next").click(function() {
            	if(num == (vueApp.samples.length-1)){
            		num = 0; 
            	}
            	else{
            		num++;
            	}
				jQuery(".mask-layer").remove();
	            showImg();
	            initSampleSwiper();
	        });
	        //涓婁竴寮
			jQuery(".mask-prev").click(function() {
	        	if(num == 0){
            		num = vueApp.samples.length-1; 
            	}
            	else{
            		num--;
            	}
	            jQuery(".mask-layer").remove();
	            showImg();
	            initSampleSwiper();
	        });
			// 鎾斁瑙嗛
			jQuery('.sample-video').click(function() {
				const videoSrc = jQuery(this).attr('data-video')
				const videoId = jQuery(this).attr('video-id')
				const areaId = jQuery(this).attr('area-id')
				jQuery('.'+areaId).css('display', 'block')
				if(!machineVideo){
					machineVideo = videojs(videoId,{
						controls: true,
						preload: "none",
						loop: true,
						sources: [{
							type: 'video/mp4'
						}]
					});
				}
				machineVideo.src(videoSrc)
				machineVideo.load(videoSrc)
				machineVideo.play()
				jQuery('.video-mask-close').click(function() {
					jQuery('.'+areaId).css('display', 'none')
					machineVideo&&machineVideo.pause()
				})
			})
        }
        function initSampleSwiper() {
//      	console.log(num)
        	var partObj =vueApp.samples[num];
			if(!partObj) return
			var imgs = partObj.imgs;
        	var el_top = '.sample' + num + '-top-swiper'
        	var el_bottom = '.sample' + num + '-bottom-swiper'
		    var galleryThumbs = new Swiper(el_top, {
//		      spaceBetween: 10,
		      virtual: {
			    slides: (function () {
			      var slides = [];
			      for (var i = 0; i < imgs.length; i += 1) {
			        slides.push('<img src="https://file.jingdiao.com/teamwork/' + encodeURIComponent(imgs[i]) + '" />');
			      }
			      return slides;
			    }()),
			  },
			  thumbs: {
			    swiper: {
			    	el: el_bottom,
			    	spaceBetween: 10,
	//		      	slidesPerView: 4,
			      	slidesPerView: 5,
			      	freeMode: true,
			      	watchSlidesVisibility: true,
			      	watchSlidesProgress: true,
	//			  	watchSlidesVisibility: true,/*閬垮厤鍑虹幇bug*/
			      	virtual: {
				    slides: (function () {
				      var slides = [];
				      for (var i = 0; i < imgs.length; i += 1) {
				        slides.push('<img src="https://file.jingdiao.com/teamwork/' +encodeURIComponent(imgs[i]) + '" />');
				      }
				      return slides;
				    }()),
				  },
			    },
			  }
		   });
        }
		jQuery(".mask-layer").remove();
        showImg();
        initSampleSwiper();
	});
}