<%--
  Created by IntelliJ IDEA.
  User: molinyi
  Date: 2017/11/23 0023
  Time: 上午 11:07
  To change this template use File | Settings | File Templates.
--%>

<%@ 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}/MonitorOperation/AssociateDiagosisConfiguration";
    });
</script>

</body>
</html>