$(function(){
	// 轮播图
var mySwiper = new Swiper ('.swiper-container', {
	direction: 'horizontal',
	loop: true,
	// 如果需要分页器
	pagination: '.swiper-pagination',
	// 如果需要前进后退按钮
	nextButton: '.swiper-button-next',
	prevButton: '.swiper-button-prev'
});
$(".banner-wrap").height(window.innerWidth * 430 / 2732);
	var pages = [1],
			col = parseInt((+$('body').width() * 0.8 < 750 ? 750 : +$('body').width() * 0.8) / 227),
			_template = '<li data-id="${app_id}" data-desc="${description}" data-logo="${logo}" class="js-tpl"><img class="cover" src="${cover}" onerror="errorWeiyeCover(this)"><p class="name">${app_name}'
              + '</p><div class="code-mask"><img class="code" src="${qrcode}" alt="">'
              + '<span class="select-btn js-preview-btn">预览</span>${copy}</div></li> ',
      _cataData = {},
      _appData = {},
      cdnUrl="http://1251027630.cdn.myqcloud.com/1251027630/zhichi_frontend";
	getCategory();
	$('body').on('click', '#first-navs span', function(event) {
		if($(this).hasClass('active')){
			return;
		}
		var cate = $(this).attr("data-cate"),
		    index = $(this).index();

		$(this).addClass('active').siblings('.active').removeClass('active');
		$(".tpl-content").eq(index).addClass('active').siblings('.active').removeClass('active');
		if($(this).hasClass('js-uninitial')){
			$(this).removeClass('js-uninitial');
			if ($('.tpl-content.active .tpl-container').hasClass('js-requesting')) {
				return;
			};
			$('.tpl-content.active .tpl-container').addClass('js-requesting');
			getTpls(cate, index);
		}
	}).on('click','.tpl-sec-navs span' ,function(event) {
		if($(this).hasClass('active')){
			return;
		}
		var cate = $(this).attr("data-cate"),
				index = $("#first-navs .active").index();

		$(this).addClass('active').siblings('.active').removeClass('active');
		pages[index] = 1;
		$(".tpl-container").removeClass('js-no-more').eq(index).find('.js-tpl').remove();
		getTpls(cate, index);
	}).on('click', '.choose-btn', function(event) {
		// var appId = $(this).parent().parent().attr('data-id');
		// if($(this).hasClass('js-preview-btn')){
			// initialPreview(appId);
			// $('#preview-tpl-dialog').show('slow');
			// $('#add-app-dialog').attr('data-id', appId).attr('data-color', '');
		// }else{
			// $('#add-app-dialog').attr('data-id', appId).attr('data-color', '').show('slow');
		// }

		var $li = $(this).closest('li'),
			param = {
				app_name : $li.children('.name').text(),
				description: '' ,
				logo : cdnUrl + '/static/invitation/images/logo.png',
				cover: cdnUrl + '/static/webapp/images/share_feng.jpg' ,
				f_app_id : $li.attr("data-id")
			};
		addApp($(this) , param);
		event.stopPropagation();
	}).on('click', '.code-mask', function(event) {
		var appId = $(this).closest('li').attr('data-id');
		window.open('/webapp/?r=pc/Webapp/preview&id=' + appId +'&f_tpl=1');
	}).on('click', '.empty-tpl', function(event) {
		// var appId = $(this).attr('data-id');
		// $('#add-app-dialog').attr('data-id', appId).attr('data-color', '').show('slow');
		var $li = $(this).closest('li'),
			param = {
				app_name : '我的应用',
				description: '',
				logo : cdnUrl + '/static/invitation/images/logo.png',
				cover: cdnUrl + '/static/webapp/images/share_feng.jpg'
			};
		addApp($(this) , param);
	})


	function getCategory(){
		$ajax('/index.php?r=pc/AppData/AppCategoryList','get',{type : 0},'json',
			function(data){
				if (data.status === 0) {
					var categorys = data.data,
					contentsStr = '',
					firstCateStr = '';
					if(categorys.length){
						$(categorys).each(function(index, item) {
							var secCates = item.cate,
								contentStr = '<div class="tpl-content '+(index==0 ? 'active' : '')+'"><div class="tpl-sec-navs">',
								secCatesStr = '';

							if(secCates.length > 0){
								secCatesStr += '<span data-cate="'+item.id+'" class="active">全部</span>';
								$(secCates).each(function(index, el) {
									secCatesStr += '<span data-cate="'+el.id+'">'+el.name+'</span>';
								});
							}

							firstCateStr += '<span data-cate="'+item.id+'" class="'+(index==0 ? 'active' : 'js-uninitial')+'">'+item.name+'</span>'
							contentStr += secCatesStr + '</div><ul class="tpl-container"><li class="empty-tpl" data-id="-1"><div class="note-icon"></div><p class="name">空白模板</p></li></ul></div>';
							contentsStr += contentStr;
							pages.push(1);
						});

						$('#first-navs').append(firstCateStr);
						$('body').append(contentsStr);
						if (window.location.hash == '#single') {
							// 线上data-cate = 12
							$('#first-navs span[data-cate="12"]').trigger('click');
						};
						getTpls(categorys[0].id , 0);
					}else{
						// 没有分类时
						$('#first-navs span').eq(0).trigger('click');
					}
				}else{
					alertTip(data.data);
				}
			},function(data){
				alertTip(data.data);
		});
	}

	function getTpls(cate, index){
		var $container = $('.tpl-container').eq(index),
				param = {type: 0, page: pages[index], page_size: 20};

		if(cate == -1){
			param.user = 1;
		}else{
			param.cate_id = cate;
		}
		$ajax('/index.php?r=pc/AppData/AppTplList','get',param,'json',
			function(data){
				if (data.status === 0) {
					var tpls = data.data;
					tpls.length && dealData(tpls, $container, index);

					pages[index]++;
					if(data.is_more == 0){
						$container.addClass('js-no-more');
					}
				}else{
					alertTip(data.data);
				}
				$container.removeClass('js-requesting');
			},
			function(data){
				alertTip(data.tpls);
				$container.removeClass('js-requesting')
		});
	}

	function dealData(tpls, $container, index){
		$container.find('.filler').remove();

		var content = '',
			addAmount = tpls.length,
			curAmount = $container.find('.js-tpl').length,
			temp = (addAmount+curAmount)%col,
			fillerAmount = ( temp ? col : 0 ), // 需要增加的filler个数
			shadowLis = '';

		$.each(tpls, function(i, item){
			content += ' ' + parseTemplate(item, index);
		});
		for(var i=0; i<fillerAmount; i++){
			shadowLis += ' <li class="filler">&nbsp;</li>';
		}
		content += shadowLis;

		$container.append(content);
	}

	// 拼接请求到的数据内容
	function parseTemplate(data , index){
		var html = _template.replace(/\$\{(\w+)\}/g, function($0, $1){
			switch($1){
				case 'copy':
					// if(index==0){
					// 	return '<span class="select-btn choose-btn">复制</span>';
					// }else{
						return '<span class="select-btn choose-btn">选择</span>';
					// }

				default :
					return data[$1];
			}
		});
		return html;
	}


	// .on('click', '#group-page-container .group-nav', function(event) {
	// 	// 组折叠
	// 	event.preventDefault();
	// 	var target = $(this).parent();
	// 	target.toggleClass('active');
	// }).on('click', '#group-page-container .page-nav', function(event) {
	// 	if($(this).hasClass('active')){
	// 		return;
	// 	}
	// 	$('.page-nav.active').removeClass('active');
	// 	$(this).addClass('active');

	// 	var router = $(this).attr('data-router'),
	// 			$preview = $('#preview-iframe'),
	// 			url = '/app?_app_id='+$('#add-app-dialog').attr('data-id')+'&router='+router,
	// 			customFeature = _appData[router].customFeature;

	// 	if(customFeature.form){
	// 		url += '&detail=-1';
	// 	}
	// 	$preview.attr('src',url);
	// }).on('click', '.style-color-wrap li', function(event) {
	// 	$(this).addClass('selected').siblings('.selected').removeClass('selected');
	// 	setColor($(this).attr('data-color'));
	// }).on('click', '.zhichi-dialog .js-btn', function(event) {
	// 	var type = $(this).attr('data-type');
	// 	switch (type){
	// 		case 'next':
	// 			// $('#preview-tpl-dialog').hide();
	// 			$('#add-app-dialog').show();
	// 			break;
	// 		case 'add':
	// 			addApp($(this));
	// 			break;
	// 		case 'cancel':
	// 			$('#add-app-dialog').hide('slow');
	// 			break;
	// 	}
	// }).on('click', '.change-img-wrap', function(event) {
	// 	// 初始化 打开我的图片
	// 	showImgResourceBox($(this).find('img'));
	// }).on('click', '.style-palette li', function(event) {
	// 	if(confirm('您确定要更换应用的风格颜色吗？此操作会影响该应用所有的顶部导航/底部导航/按钮/分类/标题/分割线。')){
	// 		color = $(this).attr('data-color');
	// 		me.savePage();
	// 		me.setStyleColor();
	// 		me.parsePage($('#group-page-container .page-nav.active').attr('data-router'));
	// 		me.sthChange();
	// 	}else{
	// 		return false;
	// 	}
	// });
	//
	$(window).scroll(function(event) {
		var $content = $('.tpl-content.active'),
				$container = $content.find('.tpl-container');
		if ($container.hasClass('js-requesting') || $container.hasClass('js-no-more')) {
			return;
		}
		var scTop = $(this).scrollTop() + 50,
		    scheight = $(document).height() - $(this).height();
		if(scTop >= scheight){
			var index = $('#first-navs > .active').index(),
				cate = $content.find('.tpl-sec-navs .active').attr('data-cate') || $('#first-navs > .active').attr('data-cate');
			$container.addClass('js-requesting');
			getTpls(cate, index);
		}
	});

	// $('#preview-tpl-dialog').zDialog({
	// 	width: 720,
	// 	height: 620,
	// 	title: 'APP模板预览'
	// });

	// $('#add-app-dialog').zDialog({
	// 	width: 400,
	// 	height: 403,
	// 	title: '创建APP'
	// });

	$('#select-color-control').spectrum({
		chooseText: '确定',
		cancelText: '取消',
		showInput: true,
		allowEmpty:false,
		containerClassName: 'full-spectrum',
		showInitial: true,
		showPalette: false,
		showSelectionPalette: false,
		showAlpha: true,
		maxPaletteSize: 10,
		preferredFormat: 'hex',
		localStorageKey: 'spectrum.demo',
		change: function(color){
			setColor(color);
		}
	});

	function setColor(color){
		var _color = new String(color),
				appId = $('#add-app-dialog').attr('data-id');
		$('#add-app-dialog').attr('data-color', _color);
		$('#preview-iframe').attr('src', '/app?_app_id='+appId+'&style_color='+encodeURIComponent(_color));
	}

	function initialPreview(appId){
		// 预览时
		var $preview = $('#preview-iframe');
		$preview.attr('src', '/app?_app_id='+appId);

		$ajax('/index.php?r=pc/AppData/detail','get',{app_id: appId},'json',function(data){
			if (data.status === 0) {
				var info = data.data;

				_cataData = typeof info.cata_data === 'string'  ? JSON.parse(info.cata_data) : info.cata_data;
				_appData = typeof info.app_data === 'string'  ? JSON.parse(info.app_data) : info.app_data;

				parseCata();
			}else{
				alertTip(data.data);
			}

		});
	}
	function parseCata(router){
		var cataStr = '',
				targetRouter = router || 'page00',
				cataDataContent = _cataData.data;
		for(var cata in cataDataContent) {
			if(cataDataContent[cata]){
				var pages = cataDataContent[cata].pages,
						i = 0;
				cataStr += '<li class="group-page-nav active" data-index="'+cataDataContent[cata].index+'"><p class="group-nav">'+cataDataContent[cata].group+'</p><ul class="page-navs">';
				for(var item in pages){
					i++;
					cataStr += parsePageNavStr(pages[item].router, pages[item].title, pages[item].name);
				}
				if(i<=0){
					cataStr += '<p class="empty-group-tip">此分组暂无页面</p>';
				}

				cataStr += '</ul></li>';
			}
		};
		$('#group-page-container').empty().append(cataStr);
		$('#group-page-container .page-nav[data-router="'+targetRouter+'"]').addClass('active');
	}
	function parsePageNavStr (router, title, name){
		var str = '<li class="page-nav" data-router="'+router+'" data-title="'+title+'" data-name="'+name+'"><span class="js-page-name">'+name+'</span></li>';
		return str;
	}

	function addApp($btn , param){
		if($btn.hasClass('requesting')){
			return;
		}
		// var name = $('#app-name').val(),
		//     description = $('#app-description').val(),
		//     logo = $('#app-logo').attr('src'),
		//     cover = $('#app-cover').attr('src');

		// if(name.length<=0){
		// 	alertTip('请输入应用名');
		// 	$('#app-name').focus();
		// 	return;
		// }

		// if(description.length<=0){
		// 	alertTip('请输入应用描述');
		// 	$('#app-description').focus();
		// 	return;
		// }
		// if(logo===cdnUrl+'/static/invitation/images/logo.png'){
		// 	alertTip('请上传logo');
		// 	return;
		// }
		// if(cover===cdnUrl+'/static/webapp/images/share_feng.jpg'){
		// 	alertTip('请上传封面');
		// 	return;
		// }

		// var appId = $('#add-app-dialog').attr('data-id'),
		// 		color = $('#add-app-dialog').attr('data-color'),
		// 		param = {
		// 			app_name : name,
		// 			description: description,
		// 			logo : logo,
		// 			cover: cover,
		// 			style_color: color
		// 		};

		// if(appId!='-1'){
		// // appId=='-1'的话 表示没有选择模版
		// 	param.f_app_id = appId;
		// }
		// if(color){
		// // 预览模版，有选择风格颜色并确定使用该模版时，需要把app里相关的组件变化做处理，并把修改后的app_data发给后台保存
		// 	setAppData(color);
		// 	param.app_data = JSON.stringify(_appData);
		// }

		$btn.addClass('requesting');
		$ajax('/index.php?r=pc/AppData/add','post', param,'json',function(data){
				$btn.removeClass('requesting');
				if (data.status === 0) {
					window.location.href = '/index.php?r=pc/Webapp/edit&id='+data.data;
				}else if (data.status === 2) {
					loginFunc();
					$('.lr-mask').show('slow');
				} else if (data.status === 3){
					confirmTip({
					text : data.data,
					ConfirmText:'立即升级',
					CancelText: '暂不升级',
					ConfirmFunction : function(){
						window.open('/index.php?r=pc/Index/appVipPacket');
					},
					CancelFunction : function(){

					},
					CloseFunction :  function(){

					}
				})
				} else {
					alertTip(data.data);
				}
			},
			function(data){
				$btn.removeClass('requesting');
				alertTip(data.data);
		});
	}

	function setAppData(color){
		for(var router in _appData){
			var eles = _appData[router].eles;
			setAppEles(eles, color);
		}
	}
	function setAppEles(eles, color){
		$(eles).each(function(index, ele) {
			switch(ele.type){
				case 'top-nav':
				case 'bottom-nav':
				case 'button':
						ele.style = ele.style || {};
				    ele.style['background-color'] = color;
				    break;
				case 'classify':
						ele.customFeature = ele.customFeature || {};
				    ele.customFeature['selectedColor'] = color;
				    break;
				case 'breakline':
						ele.style = ele.style || {};
				    ele.style['border-color'] = color;
				    break;
				case 'title-ele':
						ele.customFeature = ele.customFeature || {};
				    ele.customFeature['markColor'] = color;
				    break;
				case 'static-vessel':
				case 'free-vessel':
				case 'list-vessel':
				case 'dynamic-vessel':
				case 'form-vessel':
					setAppEles(ele.content, color);
					break;
				case 'layout-vessel':
					setAppEles(ele.content.leftEles, color);
					setAppEles(ele.content.rightEles, color);
					break;
			}
		});
	}

	$("#add-label-span").on('click', function(event) {
		$("#add-label").show();
	});
	$("#add-label").on('click', '.labelClose', function(event) {
		$("#add-label").hide();
	});

});