<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
	  	<%@include file="/wdk/theme/je/module/public/common.jsp"%>
	  	<title>个人首页</title>
		
	  	<link rel='stylesheet' type='text/css' href='<%=WDK_ROOT%>/theme/je/core/js/lib/jqueryui/jquery-ui.min.css'>
	  	<script type="text/javascript" src="<%=WDK_ROOT%>/theme/je/core/js/lib/jqueryui/jquery-ui-1.10.4.custom.min.js"></script>
 		
		<script type="text/javascript">
		var _account_id = $.getSessionUser().personuuid;
		//初始化
		$(function(){
			$(".d-con").sortable({
				placeholder: "ui-state-highlight",
				cursor: "move",
				connectWith:".d-con",
				handle:">.d-header",
				items:">.d-item",
				forcePlaceholderSize:true,
				placeholder:"d-placeholder",
				update:function(){
					save();
				}
			}).disableSelection();
		});
		
		
		</script>
		<style>
			.d-con{
				width:100%;
				height:100%;
			}
			.d-placeholder{
				width:33%;
				border:1px dotted #000;
				min-height:353px;
				float:left; 
				position:relative;
			}
			.d-item{
				width:33.333%;
				/*min-height:355px;*/
				float:left; 
				position:relative;
			}
			.d-header{
				z-index:1; 
			    top: 100%;
			    right: 5px;
			    left: 5px;
			    bottom: 0px;
				position: absolute;
			    background:#000;  
			    color:#fff;  
			    /* older safari/Chrome browsers */  
			    -webkit-opacity: 0.5;  
			    /* Netscape and Older than Firefox 0.9 */  
			    -moz-opacity: 0.5;  
			    /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/  
			    -khtml-opacity: 0.5;  
			    /* IE9 + etc...modern browsers */  
			    opacity: .5;  
			    /* IE 4-9 */  
			    filter:alpha(opacity=50);  
			    /*This works in IE 8 & 9 too*/  
			    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  
			    /*IE4-IE9*/  
			    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);  
				-moz-transition: top ease 400ms;
			    -o-transition: top ease 400ms;
			    -webkit-transition: top ease 400ms;
			    transition: top ease 400ms;
			    cursor:move; 
			}
			.d-config{
				display:none;
			    width:100%;
			    height:100%;
			}
			.d-item-add .d-config{
				display:table;
			}
			.d-item-add{
				display:none;
				border:1px dashed #000;
				width:33%;
				height:355px;
				float:left; 
			}
			.d-config td{
			    vertical-align:middle;
			    text-align:center;
			    width:100%;
			    height:100%;
			}
			.d-content{
				position: absolute;
				background-color:#fff;
			    top: 5px;
			    left: 5px;
			    right: 5px;
			    bottom: 5px;
			    z-index:0;
			}
			.d-btn-editor{
				position:fixed;
				color:#ed143d;
				font-size:20px;
				top:20px;
				right:5px;
				width:20px;
				height:20px;
				z-index:999;
				cursor:pointer;
			}
			.d-cfg-btn,.d-del-btn{
				cursor: pointer;
				color: #fff;
			}
			
			.d-add-btn{
				font-size:60px;
				cursor:pointer;
				color:#00438a;
			}
			iframe{
				border:0px;
				overflow:hidden;
				width:100%;
				height:100%;
			}
		</style>
		<script>
		$(function(){
			
			$(".d-add-btn").on("click",function(){
				var wid=$.getUUID();
				$.openWin({
					id: wid,
					url:"platform/personhome/config.jsp",
					title:"组件新增",
					width:500,
					height:400,
					param:{width:"33.33%",height:"355px"},
					onClose:function(){
						var r=$.getWinReturn(wid);
						if(r){
							addItemByData(r);
							save();
						}
					}
				});
			});
			$(".d-btn-editor").on("click",function(){
				if($(this).find(".fa").hasClass("fa-th")){
					$(this).attr("title","切换为查看模式");
					$(".d-con").addClass("d-itemeditor");
					$(this).find(".fa").removeClass("fa-th");
					$(this).find(".fa").addClass("fa-table");
					$(".d-item-add").show();
				}else{
					$(this).attr("title","切换为编辑模式");
					$(".d-con").removeClass("d-itemeditor");
					$(this).find(".fa").addClass("fa-th");
					$(this).find(".fa").removeClass("fa-table");
					$(".d-item-add").hide();
				}
			});
			
			var config=null;
   			/* $.cuajax({
   	 			url : 'wdk?action=wdk.pub&method=call_service&ajaxparam=' + new Date().getTime(),
   	 			data : {
   					_SRVNAME:'service.pf.customized',
   			   	  	_SRVMETHOD:'personal_query',
   	 				_DATA : $.json2str({
   	 					user_uuid:_account_id
   	 				}),
   			   		_RSFIELD:'result'
   	 			},
   	 			success:function(data){
   	 				data=$.str2json(data);
   	 				if(data.code==0){
   	 					alert(data.desc);
   	 					return;
   	 				}
   	 				config = data.page_config;
   	 				var cmpt_uuids=[];
   	 				if(Array.isArray(config)){
   	 					for(var i=0;i<config.length;i++){
   	 						cmpt_uuids.push(config[i].cmpt_uuid);
   	 					}
	   	 				$.cuajax({
	   	    	 			url : 'wdk?action=wdk.pub&method=call_service&ajaxparam=' + new Date().getTime(),
	   	    	 			data : {
	   	    					_SRVNAME:'service.pf.customized',
	   	    			   	  	_SRVMETHOD:'cmpt_isUserEnable',
	   	    	 				_DATA : $.json2str({
		   	 						op_account_uuid : $.getSessionUser().account_id,
		   							manage_unit_uuid : $.getSessionUser().manageunituuid,
		   							org_uuid : $.getSessionUser().deptuuid,
		   							account_uuid : $.getSessionUser().account_id,
		   							app_uuid : $.getSessionUser().appuuid,
		   							cmpt_uuids:cmpt_uuids.join(",")
	   	    	 				}),
	   	    			   		_RSFIELD:'resultset'
	   	    	 			},
	   	    	 			success:function(data){
	   	    	 				data=$.str2json(data);
	   	    	 				if(data.code=="0"){
	   	    	 					alert(data.desc);
	   	    	 					return ;
	   	    	 				}
	   	    	 				var avaliabled={};
	   	    	 				for(var i=0;i<data.length;i++){
	   	    	 					if(data[i]!=null){
		   	    	 					avaliabled[data[i].cmpt_uuid]=data[i];
	   	    	 					}
	   	    	 				}
	   	    	 				for(var i=0;i<config.length;i++){
	   	    	 					var av=avaliabled[config[i].cmpt_uuid];
	   	    	 					if(av){
	   	    	 						config[i].cmpt_url=av.cmpt_url;
	   	    	 						config[i].cmpt_param_url=av.cmpt_param_url;
	   	    	 						config[i].cmpt_config=av.cmpt_config;
			   	 						addItemByData(config[i]);
	   	    	 					}
		   	 					}
	   	    	 			},
	   	    	 			error:function(e){
	   	    	 				alert("出现网络错误,查询失败。");
	   	    	 			}
	   	    	 		});
   	 				}
   	 			},
   	 			error:function(e){
   	 				alert("出现网络错误,查询失败。");
   	 			}
   	 		}); */
			
			
		});
		function save(){
			var items=$(".d-item");
			var cfgs=[];
			for(var i=0;i<items.length;i++){
				var cfg=$(items[i]).data("cfg");
				var rcfg={};
				rcfg.param=cfg.param;
				rcfg.cmpt_config=cfg.cmpt_config;
				rcfg.cmpt_uuid=cfg.cmpt_uuid;
				rcfg.id=cfg.id;
				rcfg.width=cfg.width;
				rcfg.height=cfg.height;
				cfgs.push(rcfg);
			}
			$.cuajax({
   	 			url : 'wdk?action=wdk.pub&method=call_service&ajaxparam=' + new Date().getTime(),
   	 			data : {
   					_SRVNAME:'service.pf.customized',
   			   	  	_SRVMETHOD:'personal_update',
   	 				_DATA : $.json2str({
   	 					user_uuid:_account_id,
   	 					page_config:$.json2str(cfgs)
   	 				})
   	 			},
   	 			success:function(data){
   	 				data=$.str2json(data);
   	 				if(data.code==0){
   	 					alert(data.desc);
   	 					return;
   	 				}
   	 			},
   	 			error:function(e){
   	 				alert("出现网络错误,保存设置失败。");
   	 			}
   	 		});
		}
		function addItemByData(r){
			var item=addItem(r.id);
			setItem(item,r);
			setItemData(item,r);
		}
		function setItemData(item,r){
			r.id=item.attr("id");
			item.data("cfg",r);
			var url = r.cmpt_url;
			if(url.indexOf("?")>0){
				url=url+"&widgetuuid="+item.attr("id");
			}else{
				url=url+"?widgetuuid="+item.attr("id");
			}
			if(r.param){
				url+="&param="+$.urlparam_encode($.json2str(r.param));
			}
			if(r.cmpt_config!=""){
				url+="&config="+$.urlparam_encode(r.cmpt_config);
			}
			item.find(".d-iframe").attr("src",url);
			item.css("width",r.width);
			item.css("height",r.height);
		}
		function setItem(item,r){
			item.find(".d-del-btn").on("click",function(){
				var item=$($(this).parents(".d-item")[0]);
				item.remove();
				save();
			});

			item.hover(function(){
				if($(".d-con").hasClass("d-itemeditor")){
					$(this).find(".d-header").css("top","5px");
					$(this).find(".d-config").css("display","table");
				}
			},function(){
				if($(".d-con").hasClass("d-itemeditor")){
					$(this).find(".d-header").css("top","100%");
					$(this).find(".d-config").css("display","none");
				}
			});
			item.find(".d-cfg-btn").on("click",function(){
				var item=$($(this).parents(".d-item")[0]);
				var wid=$.getUUID();
				$.openWin({
					id: wid,
					url:"platform/personhome/config.jsp",
					title:"组件设置",
					width:500,
					height:400,
					param:item.data("cfg")?item.data("cfg"):{},
					onClose:function(){
						var r=$.getWinReturn(wid);
						if(r){
							setItemData(item,r);
							save();
						}
					}
				});
			});

			
		}
		function addItem(id){
			var item=$('<div class="d-item">'
					+'<div class="d-header">'
					+'<table class="d-config">'
					+'	<tr>'
					+'		<td><i class="fa fa-list d-cfg-btn">设置</i>&nbsp;&nbsp;<i class="fa fa-remove d-del-btn">删除</i></td>'
					+'	</tr>'
					+'</table>'
					+'</div>'
					+'<div class="d-content">'
					+'<iframe class="d-iframe" frameborder="0" src="about:blank"></iframe>'
					+'</div>'
					+'</div>').insertBefore($(".d-item-add"));
			item.attr("id",id?id:$.getUUID());
			return item;
		}
		</script>
	</head>
	
	<body>
	<!--<div class="d-con">
		<div class="d-item-add">
			<table class="d-config">
				<tr>
					<td><i class="fa fa-plus-square-o d-add-btn"></i></td>
				</tr>
			</table>
		</div>
	</div>	
	<div class="d-btn-editor" title="切换为编辑模式">
		<i class="fa fa-th" aria-hidden="true"></i>
	</div>-->
	</body>
</html>