<%@ page language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head> 
    <title>模型维护</title>
<style>
.table-null .table{
	margin-bottom: 0px;
}
.table-null .table > tbody > tr > td, .table-null .table > thead > tr > th{
	text-align: center;
 	width: 25%;
}
.table-null td:first-child{	
 	text-align: right;
 	width: 36%;
}
.table-null tr td:last-child .form-control,.table-null tr td:last-child table{
	width: 400px;
}
.file-box{ position:relative;}
.file{ position:absolute; top:0; height:30px; filter:alpha(opacity:0);opacity:0;width:470px;cursor: pointer; }

/* .file-box{ position:relative;width:340px} 
.txt{ height:22px; border:1px solid #cdcdcd; width:180px;} 
.btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;} 
.file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px } */ 

</style>
</head>
  
<body>
	<div class="container">
		<ol class="breadcrumb">
			<li><a href="${ctx}/index">首页</a></li>
			<li>分析建模</li>
			<li class="active">模型维护</li>
		</ol>
	</div>
	<div id="main-container main-tab-container">
		<div id="content" class="container">
			<div class="section">
				<div class="tab-content">

					<div class="tab-pane fade in active" id="home">
						<div class="row">
							<div class="col-xs-12">
								<div class="table-header">模型上传</div>
								<form action="#" class="form-horizontal" id="modelMaintainForm" method="post" enctype="multipart/form-data">
								<table id="modelMaintainTable" class="table-null">
									<tr><td>数据模型名称(<font color="red">必填</font>):</td><td><input type="text"  class="form-control" name="dataModelName" id="dataModelName" style="display: inline;" /><span id="writeWarningInf" style="color:red;display: inline;padding-left:10px;"></span></td></tr>
									<tr><td>模型描述:</td><td><input type="text" class="form-control" name="modelDesc" id="modelDesc" style="display:inline;" /></td></tr>
									<tr><td>规则定义:</td><td><input type="text" class="form-control" name="ruleDefinition" id="ruleDefinition"/></td></tr>
									<tr><td>评判方法:</td><td><input type="text" class="form-control" name="evaluationMethod" id="evaluationMethod" style="display: inline;" /></td></tr>
									<tr><td>评判标准:</td><td><input type="text" class="form-control" name="evaluationStandard" id="evaluationStandard" style="display: inline;" /></td></tr>
									<tr><td>模型执行脚本(<font color="red">必填</font>):</td><td>
									 	<div class="file-box">
 										<input type='text' id='modelExeScriptName' class="form-control" style="display: inline;"/>
 										<input type='button' class="btn btn-default" value='浏  览' style="width:70px"/> 
    									<input type="file" name="uploadFile" class="file" id="fileField" onchange="document.getElementById('modelExeScriptName').value=this.value" />
    									</div>
    								</td></tr>
									<tr><td>模型类别:</td>
										<td><select class="form-control" name="modelType" id="modelType" >
			    								<c:forEach var="modelType" items="${dataModelTypeList}">
			    									<option value="${modelType.dataModelTypeId}">${modelType.dataModelTypeName}</option>
			    								</c:forEach>
										    </select></td></tr>
									<tr><td>部署服务器:</td>
										<td><select class="form-control" name="deployedServer" id="deployedServer">
			    								<c:forEach var="deployedServers" items="${deployedServerList}">
			    									<option value="${deployedServers.serverId}">${deployedServers.serverName}</option>
			    								</c:forEach>
										    </select></td></tr>
									<tr><td>模型状态:</td>
										<td><select class="form-control" name="modelStatus" id="modelStatus">
			    									<option value="1">正常</option>
			    									<option value="0">失效</option>
			    							</select></td></tr>
									<tr><td>数据类型(<font color="red">必填</font>):</td>
										<td><select class="form-control" name="kpiTypeId" id="kpiTypeId">
													<option value="1">时长类</option>
													<option value="2">业务量类</option>
													<option value="3">百分比类</option>
											</select></td></tr>
									<!-- <tr><td>模型运行频度分钟数(<font color="red">只能是数字</font>):</td><td><input name="cycleMinutes" type="text" class="form-control" onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9]+/,'');}).call(this)" onblur="this.v();"/></td></tr> -->
									<tr><td>业务结束时间(<font color="red">必填</font>):</td><td><input type="text" class="form-control" id="businessEndTime" name="businessEndTime" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'businessStartTime\')}'})" /></td></tr>
									<tr><td>业务开始时间(<font color="red">必填</font>):</td><td><input id="businessStartTime" name="businessStartTime" class="form-control" type="text" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'businessEndTime\')}'})"> </td></tr>
									<tr><td>已添加参数:</td>
										<td><table class="table table-hover table-striped" id="displayParam">
											<thead>
												<tr><th>参数名</th><th>参数值</th><th>参数类型</th><th><a href="javascript:deleteAllTr()">删除所有参数</a></th></tr>
											</thead>
											<tbody id="addTr"></tbody>
										</table></td></tr>
									<tr><td>参数数据类型:</td>
										<td><select class="form-control" id="paramDataType" name="paramDataType">
			    									<c:forEach var="dataTypes" items="${dataTypeList}">
			    										<option value="${dataTypes.dataTypeName}">${dataTypes.dataTypeName}</option>
			    									</c:forEach>
										    </select></td></tr>
									<tr><td>参数名:</td><td><input type="text"  class="form-control" name="paramName" id="paramName"/></td></tr>
									<tr><td>参数值:</td><td id="addParamVal"></td></tr>
									<tr><td></td>
										<td><button type="button" id="addParam" class="btn btn-primary">添加参数</button></td></tr>
									<tr><td></td><td><button type="button" id="modelSubmit" class="btn btn-primary">确定</button>
										<button type="reset" class="btn btn-default" id="modelReset">清空</button>
										<button type="reset" class="btn btn-warning" id="modelBack">返回</button>
										</td></tr>
	                            </table>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
<script type="text/javascript">
	$(document).ready(function(){
		if($("#paramDataType").val()=="字符"){
			var addDataValue = $("<input type='text' class='form-control name=paramValue' id='paramValue'/>");
			$("#addParamVal").append(addDataValue);
		}else if($("#paramDataType").val()=="日期"){
			var addDataValue = $("<input type='text' class='form-control name=paramValue' id='paramValue' onFocus='WdatePicker({dateFmt:\" yyyy-MM-dd \"})'/>");
			$("#addParamVal").append(addDataValue);
		}else if($("#paramDataType").val()=="时间"){
			var addDataValue = $("<input type='text' class='form-control name=paramValue' id='paramValue' onFocus='WdatePicker({})'/>");
			$("#addParamVal").append(addDataValue);
		}else{
			var addDataValue = $("<input type='text' class='form-control' name='paramValue' id='paramValue' onkeyup='(this.v=function(){this.value=this.value.replace(/[^0-9]+/,\"\");}).call(this)' onblur='this.v();'/>");
			$("#addParamVal").append(addDataValue);
		}
	});
	
	//模型名称是否重复判断
	var isDouble = true;
	$("#dataModelName").blur(function(){
		if(""!=$.trim($(this).val())){
			var modelName = $(this).val();
			$.ajax({
				type: "GET",
				contentType : "application/json",
				dataType: "text",
				url: "${ctx}/ModelManage/ModelMaintain/select_modelName/"+encodeURIComponent(modelName),
				beforeSend: function(data) { $("#modelSubmit").attr("disabled",true);},
				success:function(data){
					data = parseInt(data);
					if(0==data){
						$("#writeWarningInf").html("");
						isDouble = false;
						$("#modelSubmit").attr("disabled",false);
					}else{
						$("#writeWarningInf").html("<img src='${ctx}/static/images/x.png'/> 标题已存在");
						isDouble = true;
						$("#modelSubmit").attr("disabled",true);
					}
				}
			});
		}
	});
	
	//参数类型变化  类型数据验证
	$("#paramDataType").change(function(){
		$("#addParamVal").empty();
		var paramDataType = $(this).find("option:selected").val();
		if(paramDataType=="字符"){
			var addDataValue = $("<input type='text' class='form-control name=paramValue' id='paramValue'/>");
			$("#addParamVal").append(addDataValue);
		}else if(paramDataType=="日期"){
			var addDataValue = $("<input type='text' class='form-control name=paramValue' id='paramValue' onFocus='WdatePicker({dateFmt:\" yyyy-MM-dd \"})'/>");
			$("#addParamVal").append(addDataValue);
		}else if(paramDataType=="时间"){
			var addDataValue = $("<input type='text' class='form-control name=paramValue' id='paramValue' onFocus='WdatePicker({})'/>");
			$("#addParamVal").append(addDataValue);
		}else{
			var addDataValue = $("<input type='text' class='form-control' name='paramValue' id='paramValue' onkeyup='(this.v=function(){this.value=this.value.replace(/[^0-9]+/,\"\");}).call(this)' onblur='this.v();'/>");
			$("#addParamVal").append(addDataValue);
		}
	});
	
	//删除所有参数
	function deleteAllTr(){
		$("#addTr").empty();
	}
	
	//修改一条参数
	function updateRow(elementTag){
		$("#addParam").text("修改参数");
		$("#addTr").find("tr").removeClass("orange-tr");
		$(elementTag).parents("tr").eq(0).addClass("orange-tr");
		var paramName = $(elementTag).parents("tr").find("td").eq(0).html();
		var paramValue = $(elementTag).parents("tr").find("td").eq(1).html();
		var paramType = $(elementTag).parents("tr").find("td").eq(2).html();
		$("#paramDataType option[value='"+paramType+"']").attr("selected","selected");
		$("#paramDataType").change();
		$("#paramName").val(paramName);
		$("#paramValue").val(paramValue);
	}
	
	//添加/修改参数
	$("#addParam").click(function(){
		var paramDataType = $("#paramDataType").val();
		var paramName = $.trim($("#paramName").val());
		var paramValue = $("#paramValue").val();
		if(paramName==""){
			$.alert("参数名不能为空");
		}else{
			if($("#addTr").find("tr.orange-tr").html()==null){
				var addRow = $("<tr><td>"+paramName+"</td><td>"+paramValue+"</td><td>"+paramDataType+"</td><td><a href='javascript:;' title='' onclick='deleteRow(this)'>删除</a>&nbsp;&nbsp;<a href='javascript:;' onclick='updateRow(this)'>修改</a></td></tr>");
				$("#addTr").append(addRow);
				$("#paramName").attr("value","");
				$("#paramValue").attr("value","");
			}else{
				 var findTr = $("#addTr").find("tr.orange-tr");
				 $(findTr).find("td").eq(0).html(paramName);
				 $(findTr).find("td").eq(1).html(paramValue);
				 $(findTr).find("td").eq(2).html(paramDataType);
				 $("#addTr").find("tr").removeClass();
				 $("#addParam").text("添加参数");
			}
		}
	});
	
	//删除一条参数
	function deleteRow(elementTag){
		$(elementTag).parent().parent().remove();
	}
	
	//form表单重置
	$("#modelReset").click(function(){
		deleteAllTr();
	});
	
	//form表单提交
	$("#modelSubmit").click(function(){
		if($.trim($("#dataModelName").val())==""){
			$.alert("数据模型名称不能为空");
		}else if($("#modelExeScriptName").val()==""){
			$.alert("模型执行脚本不能为空");
		}else if($("#businessStartTime").val()==""){
			$.alert("业务开始时间不能为空");
		}else if($("#businessEndTime").val()==""){
			$.alert("业务结束时间不能为空");
		}else{
			if($.trim($("#paramName").val())!=""){
			$.dialog({
				title: "提醒",
				content: "有参数尚未添加,确定提交",
				ok: function(){
					
				$("#modelSubmit").attr("disabled",true);
				var i = $("#addTr").find("tr").size();
			 
				if(i==0){
				var createForm=$("#modelMaintainForm");
					createForm.attr("action","${ctx}/ModelManage/ModelMaintain/saveModelDataForm");
					createForm.submit();
					createForm.attr("action","#");
			}else{
					$("#addTr").find("tr").each(function(){
						//alert($(this).find("td").eq(0).html());
						var paramName = $(this).find("td").eq(0).html();
						var paramValue = $(this).find("td").eq(1).html();
						var paramType = $(this).find("td").eq(2).html();
						$.ajax({
							type : "GET",
							contentType : "application/json",
							url: "${ctx}/ModelManage/ModelMaintain/createModelParam?paramName="+encodeURIComponent(paramName)+"&paramValue="+encodeURIComponent(paramValue)+"&paramType="+encodeURIComponent(paramType),
							dataType : "text",
							async: false,
							beforeSend: function(data) {},
							success: function(){
								i--;
								if(i==0){
									var createForm=$("#modelMaintainForm");
									createForm.attr("action","${ctx}/ModelManage/ModelMaintain/saveModelDataForm");
									createForm.submit();
									createForm.attr("action","#");
								}
							}
						});
				});
			}
				},
				okValue: "确定",
				cancel: function(){},
				cancelValue: "取消",
			});	
			}
			else{
				$("#modelSubmit").attr("disabled",true);
				var i = $("#addTr").find("tr").size();
			 
				if(i==0){
					var createForm=$("#modelMaintainForm");
						createForm.attr("action","${ctx}/ModelManage/ModelMaintain/saveModelDataForm");
						createForm.submit();
						createForm.attr("action","#");
				}else{
					$("#addTr").find("tr").each(function(){
					//alert($(this).find("td").eq(0).html());
					var paramName = $(this).find("td").eq(0).html();
					var paramValue = $(this).find("td").eq(1).html();
					var paramType = $(this).find("td").eq(2).html();
					$.ajax({
						type : "GET",
						contentType : "application/json",
						url: "${ctx}/ModelManage/ModelMaintain/createModelParam?paramName="+encodeURIComponent(paramName)+"&paramValue="+encodeURIComponent(paramValue)+"&paramType="+encodeURIComponent(paramType),
						dataType : "text",
						async: false,
						beforeSend: function(data) {},
						success: function(){
							i--;
							if(i==0){
								var createForm=$("#modelMaintainForm");
							    createForm.attr("action","${ctx}/ModelManage/ModelMaintain/saveModelDataForm");
							    createForm.submit();
							    createForm.attr("action","#");
							}
						}
					});
				});
			}
		}
			
	}
});

$("#modelBack").click(function(){
		location.href="${ctx}/ModelManage/ModelResult";
	});
</script>

</body>
</html>