/**
 * 自定义UI组件库
 * @author 姜友瑶
 * */

/**
 * 自动填充select中的option节点，改节点显示有树的形状 selectID select控件的di
 * options=[{ID:'213',PARENT_ID:'123123',NAME:'JYY',value:'213'},{{ID:'213',PARENT_ID:'123123',NAME:'JYY'}}]
 */

var MUI=function(){
	
	"use strict";// 严格模式
	
return {
		
	//全局常量 弹窗宽度
	 SIZE_S:'40%',
	 SIZE_L:'70%',
	 SIZE_M:['100%','100%'],




	openTab:function(url,name) {
	 	let t=url;
	 	let i=name;
		console.log("点击了菜单");
		let a ='';
		let isOpen = false;
		window.top.$(".J_menuTab").each(function () {
				//重新加载界面
				if ($(this).data("id") == t) {
					parent.$(".J_mainContent .J_iframe").each(function () {
							if ($(this).data("id") == t) {
								$(this).attr("src", t);
								isOpen=true;
							}
						}
					);
				}
			}
		);
		if(!isOpen){
			window.top.$(".J_menuTab").removeClass("active");
			var s = '<a href="javascript:;" id="'+t.replace(/\//g,'-')+'" class="active J_menuTab" data-id="' + t + '">' + i + ' <i class="fa fa-times-circle"></i></a>';
			var length=window.top.$(".J_mainContent").find("iframe.J_iframe").length;
			let ifram='<iframe class="J_iframe" name="iframe'+length+'" width="100%" height="100%"  src="'+basePath+t+'" frameborder="0"  data-id="'+t+'" seamless></iframe>';
			window.top.$(".J_menuTabs .page-tabs-content").append(s);
			window.top.$(".J_mainContent").find("iframe.J_iframe").hide();
			window.top.$(".J_mainContent").append(ifram);
		} else{


			window.top.$(".J_mainContent").find("iframe.J_iframe").each(function () {
				if ($(this).data("id") == t) {
					$(this).show();
				}else{
					$(this).hide();
				}
			});
			window.top.$(".J_menuTab").removeClass("active");
			window.top.$("#"+t.replace(/\//g,'-')).addClass("active");



		}

	},



	 /** 图片在上传的时候，需要在页面嵌套一个jspifram页面 页面处理完图片后服务器返回脚本代码控制父窗口显示图片。 */
	 upolad : function(img_id, file_id) {
	 	if ($("#" + file_id).val() == '') {
	 		layer.alert("请先选择要上传的文件！");
	 		return;
	 	}
	 	$("#" + img_id).attr("src", basePath + "/plat/images/loading.gif");
	 	$("#" + img_id).show();
	 },




	/**
	 * 初始化文件上传
	 * 需要传一个input框的选择器，支持多个文件同时初始化
	 * 编辑时input框value值应该是图片是src路径，这样控件会自动创建图片回显
	 * 实现原理：在页面创建一个ifram用于提交文件，每个input框会对应的创建一个隐藏input，把原始
	 * input的值复制给隐藏input这个input会用于最后的提交。
	 * 还会创建一个form表单，表单中有一个文件选择框。
	 * 点击原始input会触发文件选择器的点击事件弹出文件选择框。
	 * 文件上传后会改变隐藏input框架的value值。
	 * by jyy
	 */
	initImgUpload:function(selected){
	
		//文件类型
		var fileTypes="gif,jpg,jpeg,png,bmp";
		//最大5M
		var maxSize=5*1024*1024;
		
		//在界面创建一个iframe
		var iframe = $('<iframe name="blankFrame" ></iframe>');
		iframe.css("display", "none");	
		$("body").append(iframe);
		$(selected).each(function(i){
			//文件类型
			var fileTypes="gif,jpg,jpeg,png,bmp";
			var $input=$(this);
			var id=$input.attr("id");
			var hideInputId=id+"_hide";
			if($input.data("filetypes")){
				fileTypes=$input.data("filetypes");
			}
			//创建一个隐藏控件,如果input有值创建一个img
			if($input.val()!=null &&$input.val().length>0 ){
				$input.next("a").after("<img onclick='MUI.removeUpload(this,\""+hideInputId+"\")' id='"+$input.attr("id")+"_img'  class='loadingbig' src='"+$input.val()+"' />")
				$input.before("<input   name='"+$input.attr("name")+"' value='"+$input.val()+"'   id='"+$input.attr("id")+"_hide'  style='display:none;' /> ")
			}else{
				$input.before("<input   name='"+$input.attr("name")+"'   id='"+hideInputId+"'  style='display:none;' /> ")
			}
			//删除控件本身的name属性
			$input.removeAttr("name");
			//添加点form表单
			var form = $('<form method="post" enctype="multipart/form-data" target="blankFrame"  style="display:none;" ></form>')
			form.attr("action",basePath+"/admin/uploadFile/doUpload?callBack=MUI.uploadCallBack&inputId="+id);
			//创建一个file文件
			var file=$('<input   type="file" multiple name="file-1" />');
			form.append(file);
			//文件改变就提交
			file.change(function(){
				var filePath = file.val();
				var fileName = filePath.substring(filePath.lastIndexOf("\\") + 1,
						filePath.length);
				//文件类型判断
				var photoExt=fileName.substr(fileName.lastIndexOf(".")+1).toLowerCase();//获得文件后缀名
			    if(fileTypes.indexOf(photoExt)<0){
			       layer.msg("允许的文件类型是："+fileTypes,{icon:2,time:2000});
			        return false;
			    }

			    var obj=file.get(0);
			    var fileSize = 0;
			  	fileSize = obj.files[0].size;     
			    if(fileSize>=maxSize){
			        layer.msg("照片最大尺寸为"+maxSize/1024+"KB，请重新选择文件!",{icon:2});
			        return false;
			    }
				//校验通过开始上传
			    
				//改变输入框字符
				$input.val(fileName);
				//创建加载图
				if($input.next().next().is("img")){
					$input.next().next().attr("src" ,basePath+"/images/loadingbig.gif");
				}else{
					$input.next("a").after("<img onclick='MUI.removeUpload(this,\""+hideInputId+"\")'  class='loadingbig' src='"+basePath+"/images/loadingbig.gif' />")
				}
				//提交表单
				form.submit();
			});
			// 绑定事件
			$input.click(function(){
				file.trigger("click");
			});
			$input.next("a").click(function(){
				file.trigger("click");
			});
			//把组件添加到文档中
			$("body").append(form);
		});
		
		
	},
	
	/**
	 * 删除上传图片
	 */
	removeUpload:function(node,inputId){
		$(node).remove();
		var textId=inputId.substring(0,inputId.indexOf("_"));
		$("#"+textId).val("");
		$("#"+inputId).val("");
		
	},
	/**
	 * 上传服务器回调函数
	 */
	 uploadCallBack:function(id,path){
		 console.log(path);
		$("#"+id+"_hide").val(path);
		$("#"+id).next().next().attr("src" ,path);
		$("#showImgUrl").hide();
	},




	/**
	 * 打开多图上传页面
	 *
	 * @param fn
	 *            回调函数 {err:0,url:'http://12312!!!!.jpg'}
	 */
	openMultipleUpload : function(fn) {
		KindEditor.ready(function(K) {
			var editor = K.editor({
				cssPath :basePath + '/plugin/kindeditor/plugins/code/prettify.css',
				uploadJson :basePath + '/plugin/kindeditor/uploadFile.jsp',
				fileManagerJson :basePath + '/plugin/kindeditor/file_manager_json.jsp',
				allowFileManager : true
			});
			editor.loadPlugin('multiimage', function() {
				editor.plugin.multiImageDialog({
					clickFn : function(urlList) {
						fn(urlList);
						editor.hideDialog();
					}
				});
			});
		});
	},

	/**
	 * 打开远程图片空间
	 *
	 * @param fn
	 *            回调函数 url:'http://12312!!!!.jpg'
	 *            event 触发开启事件源
	 */
	openServiceImgSpace : function(fnn,event) {
		KindEditor.ready(function(K) {
			var editor = K.editor({
				fileManagerJson : basePath + '/plugin/kindeditor/file_manager_json.jsp',
			});

			$(event).click(function(){

				editor.loadPlugin('filemanager', function() {
					editor.plugin.filemanagerDialog({
						viewType : 'VIEW',
						dirName : 'image',
						clickFn : function(url, title) {
							fnn(url);
							editor.hideDialog();
						}
					});
				});
			});
		});
	},
	/**
	 * 创建一个富文本编辑器
	 */
	createEdit:function( name, width ,heigt ,editor ){

		KindEditor.ready(function(K) {
			window[editor]= K.create('textarea[name="'+name+'"]', {
				cssPath :  basePath + '/plugin/kindeditor/plugins/code/prettify.css',
				uploadJson :  basePath + '/plugin/kindeditor/uploadFile.jsp',
				fileManagerJson :  basePath + '/plugin/kindeditor/file_manager_json.jsp',
				allowFileManager : true,
				width : width,
				height : heigt,
				afterCreate : function() {
					var self = this;
					K.ctrl(document, 13, function() {
						self.sync();
						document.forms['example'].submit();
					});
					K.ctrl(self.edit.doc, 13, function() {
						self.sync();
						document.forms['example'].submit();
					});
				}
			});
			prettyPrint();
		});
	},
	
}
	
}();


//定义一些jquery UI插件
(function($) {
	
	$.fn.extend({
		
		createSelectTree : function(options, seting) {
			// 配置对象
			var _seting = {
				id : "id",		// 选项的值
				parent : "parentId",	// 父节点值
				value : "name",	// 要显示的名称
				append:false,	// 是否为追加 ，默认不追加
				defaultValue:null,  //默认选中值
				defaultHtml:"",  //默认option
			}
			var _seting = $.extend(_seting, seting);
			// 用每一个节点的id标识一个节点对象，这里是所有对象的map集合
			var _options = {};
			var nodeNength = options.length;
			for (var i = 0; i < nodeNength; i++) {
				// 用id来唯一标识这个节点
				_options[options[i][_seting.id]] = options[i];
			}
			// 构建树模型 root 是这课树的集合
			var root = {};
			root.children = [];
			for (var i = 0; i < nodeNength; i++) {
				var node = options[i];
				// _options中 如果存在 options 对应的 父节，把当前的节点放入父节点
				if (_options[node[_seting.parent]]) {
					var parent = _options[node[_seting.parent]];
					if (parent.children) {
						parent.children.push(_options[node[_seting.id]]);
					} else {
						parent.children = [];
						parent.children.push(_options[node[_seting.id]]);
					}
				} else {// 如果不存在父节点就放入根节点中
					root.children.push(_options[node[_seting.id]]);
				}
			}
			// 创建html代码加载到树当中
			var html = "";
			if(_seting.defaultHtml){
				html+=_seting.defaultHtml;
			}
			html += this.getOptionHtml(root.children, _seting, _options);
			
			if(_seting.append){
				$(this).html($(this).html()+html);
			}else{
				$(this).html(html);	
			}
			
			
		},
		getOptionHtml : function(children, _seting, _options) {
			if (children) {
				var length = children.length;
				var html = "";
				for (var i = 0; i < length; i++) {
					var node = children[i];
					var prefix = "| ";
					var count = 0;
					count += this.getParentCount(node, _seting, count, _options);
					for (var j = 0; j < count; j++) {
						prefix += " - ";
					}
					if(_seting.defaultValue && _seting.defaultValue==node[_seting.id] ){
						html += "<option selected='selected' value='" + node[_seting.id] + "' >" + prefix + node[_seting.value] + "</option>"
					}else{
						html += "<option value='" + node[_seting.id] + "' >" + prefix + node[_seting.value] + "</option>"
					}
					html += this.getOptionHtml(node.children, _seting, _options);
				}
				return html;
			} else {
				return "";
			}
		},
		// 获父节点数量
		getParentCount : function(node, _seting, count, _options) {
			var str = _options[node[_seting.parent]];
			if (str) {
				count++;
				return this.getParentCount(_options[node[_seting.parent]], _seting, count, _options);
			} else {
				return count;
			}
		}
	});

})(jQuery);