<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/include/header.jsp"%>
<link type="text/css" rel="stylesheet" href="${ctx}/css/admin.css" />
<title>疑案管理</title>
<style>
	.btnDiv{
		height: 30px;
		float: right;
		margin-top: 10px;
	}
	.btnSpan {
	    padding: 3px 10px;
	    background-color: #00bb9c;
	    color: #fff;
	    border-radius: 5px;
	    margin-right: 5px;
	    cursor: pointer;
	}
	.tableCon th,.tableCon td{
		border:1px solid #6571a0;
		text-align: center;
	}
	.deleteBtn{
		background-color: #F56904;
	}
	/* 弹出框 */
	.dialog_main {
	    width: 500px;
	    height: auto;
	    background: #fff;
	    border-radius: 5px;
	    color: #000;
	    position: relative;
	}
	.dialog_main li{
		height: 35px;
   		line-height: 35px;
	}
	.dialog_title {
	    height: 30px;
	    line-height: 30px;
	    background-color: #3399cc;
	    text-indent: 1em;
	    color: #fff;
	    border-radius: 5px;
	    border-bottom-left-radius: 0;
	    border-bottom-right-radius: 0;
	}
	.confirmBtn {
	    position: absolute;
	    left: 45%;
	    bottom: 20px;
	}
	.input_text {
	    border-radius: 3px;
	    border: 1px solid #ddd;
	    padding: 5px;
	}
	td.td_align {
	    text-align: left;
	    padding-left: 5px;
	}
	.dialog_main label {
	    width: 20%;;
	    display: inline-block;
	}
	.dialog_main input {
	    width: 70%;;
	    display: inline-block;
	}
</style>
</head>
<body class="bg1">
	<div class="headCon">
		<jsp:include page="/WEB-INF/jsp/top.jsp">
		<jsp:param name="index" value="疑案管理" />
		</jsp:include>
	</div>
	<div class="searchCon">
		<ul id="accordion" class="accordion">
			<li>
				<div class="link"><i class="fa fa-apply"></i>任务申请<i class="fa fa-chevron-down"></i></div>
				<ul class="submenu">
					<li><a href="${ctx}/sysPersonal/taskApply.do">任务申请</a></li>
					<li><a href="${ctx}/sysPersonal/modelTaskApply.do">专项模型申请</a></li>
				</ul>
			</li>
			<li>
				<div class="link"><i class="fa fa-mark"></i>标注管理<i class="fa fa-chevron-down"></i></div>
				<ul class="submenu">
					<li><a href="${ctx}/sysPersonal/markExport.do">标注管理</a></li>
				</ul>
			</li>
			<li>
				<div class="link"><i class="fa fa-send-view"></i>调查查看情况<i class="fa fa-chevron-down"></i></div>
				<ul class="submenu">
					<li><a href="${ctx}/outService/canSendM6.do">可发起调查</a></li>
					<li><a href="${ctx}/outService/alreadySendM6.do">已发起调查</a></li>
					<li><a href="${ctx}/outService/succSendM6.do">已完成调查</a></li>
					<li ><a href="${ctx}/outService/backSendM6.do">退回调查</a></li>
				</ul>
			</li>
			<li>
				<div class="link"><i class="fa fa-mark"></i>模型管理<i class="fa fa-chevron-down"></i></div>
				<ul class="submenu">
					<li class="on"><a href="${ctx}/sysTaskPlus/searchModelPlus.do">模型匹配</a></li>
				</ul>
			</li>
		</ul>
	</div>
	<!-- <div id="resultCon1" class="resultCon" style="margin-left: 255px;"> -->
	<div class="resultCon" style="margin-left: 255px;position:relative;">
		<div class="p_bar">您当前的位置：模型管理</div>
		<div style="overflow:hidden">
			<div class="btnDiv">
				<span class="btnSpan addBtn" data-status="addBtn">增加</span>
			</div>
		</div>
		<div class="tableDiv">
			<table class="tableCon">
				<thead><tr><th>模型</th><th>模型ID</th><th>规则</th><th>规则ID</th><th>规则描述</th><th>操作</th></tr></thead>
				<tbody id="tbodyCon"></tbody>
			</table>
		</div>
	
	</div>

	<!-- 弹出框 2017.11.23-->
	<div class="backg" id="dialog_model" style="display: none;">
		<div class="dialog_main">
			<div class="dialog_title">模型</div>
			<ul id="dialog_con" style="padding: 15px;height: 250px;">
				<li><label>模型：</label><input type="text" name="model" class="input_text"></li>
				<li><label>模型ID：</label><input type="number" name="modelId" class="input_text"></li>
				<li><label>规则：</label><input type="text" name="rule" class="input_text"></li>
				<li><label>规则ID：</label><input type="number" name="ruleId" class="input_text"></li>
				<li><label>规则描述：</label><input type="text" name="ruleDesc" class="input_text"></li>
			</ul>
			<div class="confirmBtn">
				<input type="button" class="confirm_btn" value="确定">
				<input type="button" class="btn delete_btn" value="取消">
			</div>
		</div>
	</div>

	<!--弹出框 -->
	<script type="text/html" id="dialog_template">
		<div class="dialog_main">
			<div class="dialog_title">模型</div>
			<ul id="dialog_con" style="padding: 15px;height: 250px;overflow: auto;">
				<li><label>模型：</label><input type="text" name="model" value="<!=list.modelName!>" class="input_text"></li>
				<li><label>模型ID：</label><input type="text" name="modelId" value="<!=list.modelId!>" class="input_text" disabled="disabled"></li>
				<li><label>规则：</label><input type="text" name="rule" value="<!=list.ruleName!>" class="input_text"></li>
				<li><label>规则ID：</label><input type="text" name="ruleId" value="<!=list.ruleId!>" class="input_text" disabled="disabled"></li>
				<li><label>规则描述：</label><input type="text" name="ruleDesc" value="<!=list.desc!>" class="input_text"></li>
			</ul>
			<div class="confirmBtn">
				<input type="button" class="confirm_btn" value="确定">
				<input type="button" class="btn delete_btn" value="取消">
			</div>
		</div>
	</script>

	<!--表格模板引擎-->
	<script type="text/html" id="tbodyCon_template">
		<!if(list.length>0) {!>
			<!for(var i=0;i<list.length;i++){
				var item = list[i].data;
				for(var k=0;k<item.length;k++){
					var subItem=item[k];
					var str=JSON.stringify(subItem);
			!>
			
			<tr class="gradeA>">
				<td title="<!=subItem.modelName!>"><!=subItem.modelName!></td>	
				<td title="<!=subItem.modelId!>"><!=subItem.modelId!></td>						
				<td class="td_align" title="<!=subItem.ruleName!>"><!=subItem.ruleName!></td>
				<td title="<!=subItem.ruleId!>"><!=subItem.ruleId!></td>
				<td class="td_align" title="<!=subItem.desc!>"><!=subItem.desc!></td>	
				<td title="<!=str!>">
					<span class="btnSpan editBtn" data-shuju="<!=str!>"  data-status="editBtn">修改</span>
					<span class="btnSpan deleteBtn" data-shuju="<!=str!>" data-status="deleteBtn">删除</span>
				</td>						
			</tr>
		<!} }!>
		<!}else{!>
			<tr>
				<td colspan="6"> 暂无数据</td>
			</tr>
		<!}!>
	</script>

	<script src="${ctx}/js/lib/perfect-scrollbar.jquery.js"></script>
	<script>
	     $(function () {
	     	//左侧js
			var Accordion = function(el, multiple) {
				this.el = el || {};
				this.multiple = multiple || false;
		
				// Variables privadas
				var links = this.el.find('.link');
				// Evento
				links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
			};
		
			Accordion.prototype.dropdown = function(e) {
				var $el = e.data.el;
					$this = $(this),
					$next = $this.next();
		
				$next.slideToggle();
				$this.parent().toggleClass('open');
		
				if (!e.data.multiple) {
					$el.find('.submenu').not($next).slideUp().parent().removeClass('open');
				};
			}			
			var accordion = new Accordion($('#accordion'), false);

			//判断是否有on存在
			if($("#accordion li").hasClass("on")){
				$("#accordion li.on").parent().parent().find(".link").click();
			}

			//表格内容
			/*var result={"model":{"datalist":[
					{"modelName":"人伤模型","id":1,"name": "同一电话报案2次及以上人伤案件","describe":"是否存在同一电话多次报案的人为制造虚假事故"},
					{"modelName":"人伤模型","id":2,"name": "同一伤者在不同案件中出现","describe":"是否存在同一电话多次报案的人为制造虚假事故"},
				  	{"modelName":"人伤模型","id":3,"name": "同一车辆出险次数3次以上的人伤案件","describe":"是否存在同一电话多次报案的人为制造虚假事故"},
				  	{"modelName":"人伤模型","id":4,"name": "三者2同一车辆出险次数3次以上的人伤案件","describe":"是否存在同一电话多次报案的人为制造虚假事故"}
				  ]}
				};*/
			var datalist=${datalist};
			console.log(${datalist});	
			var ht=baidu.template("tbodyCon_template",{list:datalist});
			$("#tbodyCon").html(ht);

			//增加
			$(".addBtn").click(function(){
				$(".input_text").attr("disabled",false);
				$("#dialog_model .input_text").val("");//清楚弹出框中输入框的数据
				var status=$(this).data("status");
				$("#dialog_model").data("status",status);
				$("#dialog_model").css("display","");
			})
			//修改
			$("#tbodyCon").delegate(".editBtn","click",function(){
				var data=$(this).data("shuju");
				$("#dialog_model .input_text").val("");//清楚弹出框中输入框的数据
				var ht=baidu.template("dialog_template",{list:data});
				$(".dialog_main").html(ht);
				var status=$(this).data("status");//获点击的按钮
				$("#dialog_model").data("status",status);//并赋值
				$("#dialog_model").css("display","");
			})
			//点击确定
			$("#dialog_model").delegate(".confirm_btn","click",function(){
		 		var status2=$("#dialog_model").data("status");
		 		if(status2=="addBtn"){//增加
		 			var data=getInput($("#dialog_model .confirm_btn"));
		 			$.ajax({
		 				type:"POST",
		 				data:data,
		 				url:"${ctx}/sysTaskPlus/addRule.do",
		 				success:function(result){
		 					alert(result.succ);
		 					console.log(result);
		 					//如果操作成功则跳到列表界面 
		 					top.location.replace("${ctx}/sysTaskPlus/searchModelPlus.do?ts="+ new Date().getTime()); 
		 				},
		 				error:function(){
		 					alert("增加失败！");
		 				}
		 			})
		 		}else if(status2=="editBtn"){//修改
		 			var data=getInput($("#dialog_model .confirm_btn"));
		 			$.ajax({
		 				type:"POST",
		 				data:data,
		 				url:"${ctx}/sysTaskPlus/updateRuleById.do",
		 				success:function(result){
		 					alert(result.succ);
		 					console.log(result);
		 					top.location.replace("${ctx}/sysTaskPlus/searchModelPlus.do?ts="+ new Date().getTime());
		 				},
		 				error:function(){
		 					alert("修改失败！");
		 				}
		 			})
		 		}
		 		$("#dialog_model").css("display","none");
		 	})	
		 	$("#dialog_model").delegate(".delete_btn","click",function(){
		 		$("#dialog_model").css("display","none");
		 	})
		 	//获取值的函数
		 	function getInput(_this){
		 		var modelName=_this.parent().parent().find("#dialog_con input[name='model']").val()+'';
	 			var modelId=_this.parent().parent().find("#dialog_con input[name='modelId']").val();
	 			var ruleName=_this.parent().parent().find("#dialog_con input[name='rule']").val()+'';
	 			var ruleId=_this.parent().parent().find("#dialog_con input[name='ruleId']").val();
	 			var modelDesc=_this.parent().parent().find("#dialog_con input[name='ruleDesc']").val();
	 			if(modelId==''|| modelName=='' || ruleName=='' || ruleId==''){
	 				alert("模型ID、模型、规则和规则ID都不能为空！");
	 				return false;
	 			}
	 			var data={modelName:modelName,modelId:modelId,ruleName:ruleName,ruleId:ruleId,desc:modelDesc};
	 			
	 			return data;
		 	}

		 	//点击删除
		 	$("#tbodyCon").delegate(".deleteBtn","click",function(){
		 		if(confirm("确定要删除吗？")){
		 			var data=$(this).data("shuju");
			 		var modelName=data.modelName;
		 			var modelId=data.modelId;
		 			var ruleName=data.ruleName;
		 			var ruleId=data.ruleId;
		 			var modelDesc=data.desc;	 			
		 			var data={modelName:modelName,modelId:modelId,ruleName:ruleName,ruleId:ruleId,desc:modelDesc,deleteFlag:1};
		 			$.ajax({
		 				type:"POST",
		 				data:data,
		 				url:"${ctx}/sysTaskPlus/updateRuleById.do",
		 				success:function(result){
		 					alert(result.succ);
		 					console.log(result);
		 					top.location.replace("${ctx}/sysTaskPlus/searchModelPlus.do?ts="+ new Date().getTime());
		 				},
		 				error:function(){
		 					alert("删除失败！");
		 				}
		 			})
		 		}
		 		
		 	});

	     	//初始化滚动条
			$(".resultCon ").perfectScrollbar();
			resize();
            $(window).resize(function(){
				resize();
			});	
			
	    });
	    function resize(){
			//获取窗口高度
			var windowheight=$(window).height();
			var windowWidth=$(window).width();
			var leftList = windowheight-40;
			$(".searchCon").css({"height":leftList+"px"});
			$(".resultCon").css({"height":leftList-12+"px"});
			//$(".tableMain").css({"height":windowheight-40-42-131+"px"});
			//$(".table_list").css({"height":windowheight-40-42-100-85+"px"});
			$(".resultCon").perfectScrollbar("update");
			//$(".dialog_main").css("width",Math.ceil(windowWidth*0.5));
			//$(".dialog_main").css("height",Math.ceil(windowheight*0.6));
		}
	</script>
	<%@ include file="/include/footer.jsp"%>
</body>
</html>
