<%inherit file="/base_index.html"/>
<%block name='content'>
<div class="panel panel-default" id="">
    <input type="hidden" id="templateID" name="templateID"/>
    <div class="row">
        <div class="col-md-4">
            <div class="form-group clearfix ">
                <label class="col-sm-3 control-label bk-lh30 pt0">模板名称：</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control bk-valign-top" id="templateName" name="templateName" placeholder="亲输入脚本名称">
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-group clearfix ">
                <label class="col-sm-3 control-label bk-lh30 pt0">模板类型：</label>
                <div class="col-sm-9">
                    <select id="templateType" name="templateType">
                        <option value="">请选择类型</option>
                        <option value="1">RedHat Linux</option>
                        <option value="2">Windows2008</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="panel panel-default" id="container">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href='#collapseTwo0'>
                步骤名称：aaa
            </a>
            <!--<a class="king-btn-demo king-btn king-border king-btn-icon king-danger" style="float: right;margin-top: -7px;"  title="删除"  onclick='test(this)'>
                <i class="fa fa-close btn-icon"></i>
            </a>-->
        </h4>
        <input type="hidden" id="stepID0" name="stepID0"/>
        <div id='collapseTwo0' class="panel-collapse collapse in">
            <div class="panel-body">
                <div class="panel-body">
                    <div class="container-fluid mb0 ">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group clearfix ">
                                    <label class="col-sm-4 control-label bk-lh30 pt0">步骤名称：</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control bk-valign-top" id="stepName0" placeholder="请输入步骤名称">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4"></div>
                        </div>
                    </div>
                    <div class="container-fluid mb0 ">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group clearfix ">
                                    <label class="col-sm-4 control-label bk-lh30 pt0">脚本名称：</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control bk-valign-top" id="stepScriptName0" placeholder="亲输入脚本名称">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group clearfix ">
                                    <label class="col-sm-4 control-label bk-lh30 pt0">脚本参数：</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control bk-valign-top" id="stepScriptInputParam0" placeholder="请输入参数">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4"></div>
                        </div>
                    </div>
                    <div class="container-fluid mb0 ">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group clearfix ">
                                    <label class="col-sm-4 control-label bk-lh30 pt0">脚本内容：</label>
                                    <!--<textarea id="code2">if a==0:</textarea>-->
                                    <div class="col-sm-8">
                                        <textarea class="form-control" rows="3" id='stepScriptText0' placeholder="提示信息"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-8"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<button class="king-btn-demo king-btn king-border king-success" title="添加步骤" id="add">添加步骤</button>
<button class="king-btn-demo king-btn king-border king-success" title="保存" id="save">保存</button>

<script type="text/javascript">
    var add = document.getElementById('add');
    var container = document.getElementById('container');
    var node = container.nextSibling;
    var next_add = 0
    window.onload = function(){
        var path = window.location.pathname
        var templateID = path.split("/")[2]
        $.ajax({
            url:"/template/toEditTemplate/",
            type:"post",
            data:JSON.stringify({"templateID":templateID}),
            dataType:"json",
            headers:{
                "Content-Type":"application/json;charset=utf-8"
            },
            success:function(result){
                if(result.code==0){
                    $("#templateName").val(result.data.template.templateName)
                    $("#templateType").val(result.data.template.templateType)
                    $("#templateID").val(result.data.template.templateID)
                    $.each(result.data.stepList,function(index,item){
                        next_add = index
                        if(item.stepInputParam==null){
                            item.stepInputParam=""
                        }
                        if(index==0){
                            $("#stepName0").val(item.stepName)
                            $("#stepScriptInputParam0").val(item.stepInputParam)
                            $("#stepScriptText0").val(item.stepScriptText)
                            $("#stepID0").val(item.id)
                        }else{
                            oDiv = document.createElement('div');
                            oDiv.innerHTML = "<div class=\"panel panel-default\" id=\"container\">\n" +
                            "    <div class=\"panel-heading\">\n" +
                            "        <h4 class=\"panel-title\">\n" +
                            "            <a data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapseTwo"+next_add+"\">\n" +
                            "                步骤名称：aaa\n" +
                            "            </a>\n" +
                            "            <a class=\"king-btn-demo king-btn king-border king-btn-icon king-danger\" style=\"float: right;margin-top: -7px;\"  title=\"删除\"  onclick='test(this)'>\n" +
                            "                <i class=\"fa fa-close btn-icon\"></i>\n" +
                            "            </a>\n" +
                            "        </h4>\n" +
                            "        <input type=\"hidden\" id=\"stepID"+next_add+"\" name=\"stepID"+next_add+"\" value="+item.id+">"+
                            "        <div id=\"collapseTwo"+next_add+"\" class=\"panel-collapse collapse in\">\n" +
                            "            <div class=\"panel-body\">\n" +
                            "                <div class=\"panel-body\">\n" +
                            "                    <div class=\"container-fluid mb0 \">\n" +
                            "                        <div class=\"row\">\n" +
                            "                            <div class=\"col-md-4\">\n" +
                            "                                    <div class=\"form-group clearfix \">\n" +
                            "                                        <label class=\"col-sm-4 control-label bk-lh30 pt0\">步骤名称：</label>\n" +
                            "                                        <div class=\"col-sm-8\">\n" +
                            "                                            <input type=\"text\" class=\"form-control bk-valign-top\" id=\"stepName"+next_add+"\" placeholder=\"请输入步骤名称\" value="+item.stepName+">\n" +
                            "                                        </div>\n" +
                            "                                    </div>\n" +
                            "                            </div>\n" +
                            "                            <div class=\"col-md-4\"></div>\n" +
                            "                        </div>\n" +
                            "                    </div>\n" +
                            "                    <div class=\"container-fluid mb0 \">\n" +
                            "                        <div class=\"row\">\n" +
                            "                            <div class=\"col-md-4\">\n" +
                            "                                    <div class=\"form-group clearfix \">\n" +
                            "                                        <label class=\"col-sm-4 control-label bk-lh30 pt0\">脚本名称：</label>\n" +
                            "                                        <div class=\"col-sm-8\">\n" +
                            "                                            <input type=\"text\" class=\"form-control bk-valign-top\" id=\"stepScriptName"+next_add+"\" placeholder=\"亲输入脚本名称\">\n" +
                            "                                        </div>\n" +
                            "                                    </div>\n" +
                            "                            </div>\n" +
                            "                            <div class=\"col-md-4\">\n" +
                            "                                    <div class=\"form-group clearfix \">\n" +
                            "                                        <label class=\"col-sm-4 control-label bk-lh30 pt0\">脚本参数：</label>\n" +
                            "                                        <div class=\"col-sm-8\">\n" +
                            "                                            <input type=\"text\" class=\"form-control bk-valign-top\" id=\"stepScriptInputParam"+next_add+"\" placeholder=\"请输入参数\" value="+item.stepInputParam+">\n" +
                            "                                        </div>\n" +
                            "                                    </div>\n" +
                            "                            </div>\n" +
                            "                            <div class=\"col-md-4\"></div>\n" +
                            "                        </div>\n" +
                            "                    </div>\n" +
                            "                    <div class=\"container-fluid mb0 \">\n" +
                            "                        <div class=\"row\">\n" +
                            "                            <div class=\"col-md-4\">\n" +
                            "                                    <div class=\"form-group clearfix \">\n" +
                            "                                        <label class=\"col-sm-4 control-label bk-lh30 pt0\">脚本内容：</label>\n" +
                            "                                        <div class=\"col-sm-8\">\n" +
                            "                                            <textarea class=\"form-control\" rows=\"3\" id=\"stepScriptText"+next_add+"\" placeholder=\"请输入脚本内容\">"+item.stepScriptText+"</textarea>\n" +
                            "                                        </div>\n" +
                            "                                    </div>\n" +
                            "                            </div>\n" +
                            "                            <div class=\"col-md-8\"></div>\n" +
                            "                        </div>\n" +
                            "                    </div>\n" +
                            "                </div>   \n" +
                            "            </div>\n" +
                            "        </div>\n" +
                            "    </div>\n" +
                            "</div>";
                            container.parentNode.insertBefore(oDiv, node)
                            node = oDiv.nextSibling;
                        }
                    })
                }
            }
        })
    }
    add.onclick = function () {
        oDiv = document.createElement('div');
        next_add = next_add+1
        oDiv.innerHTML = "<div class=\"panel panel-default\" id=\"container\">\n" +
            "    <div class=\"panel-heading\">\n" +
            "        <h4 class=\"panel-title\">\n" +
            "            <a data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapseTwo"+next_add+"\">\n" +
            "                步骤名称：aaa\n" +
            "            </a>\n" +
            "            <a class=\"king-btn-demo king-btn king-border king-btn-icon king-danger\" style=\"float: right;margin-top: -7px;\"  title=\"删除\"  onclick='test(this)'>\n" +
            "                <i class=\"fa fa-close btn-icon\"></i>\n" +
            "            </a>\n" +
            "        </h4>\n" +
            "        <div id=\"collapseTwo"+next_add+"\" class=\"panel-collapse collapse in\">\n" +
            "            <div class=\"panel-body\">\n" +
            "                <div class=\"panel-body\">\n" +
            "                    <div class=\"container-fluid mb0 \">\n" +
            "                        <div class=\"row\">\n" +
            "                            <div class=\"col-md-4\">\n" +
            "                                    <div class=\"form-group clearfix \">\n" +
            "                                        <label class=\"col-sm-4 control-label bk-lh30 pt0\">步骤名称：</label>\n" +
            "                                        <div class=\"col-sm-8\">\n" +
            "                                            <input type=\"text\" class=\"form-control bk-valign-top\" id=\"stepName"+next_add+"\" placeholder=\"请输入步骤名称\">\n" +
            "                                        </div>\n" +
            "                                    </div>\n" +
            "                            </div>\n" +
            "                            <div class=\"col-md-4\"></div>\n" +
            "                        </div>\n" +
            "                    </div>\n" +
            "                    <div class=\"container-fluid mb0 \">\n" +
            "                        <div class=\"row\">\n" +
            "                            <div class=\"col-md-4\">\n" +
            "                                    <div class=\"form-group clearfix \">\n" +
            "                                        <label class=\"col-sm-4 control-label bk-lh30 pt0\">脚本名称：</label>\n" +
            "                                        <div class=\"col-sm-8\">\n" +
            "                                            <input type=\"text\" class=\"form-control bk-valign-top\" id=\"stepScriptName"+next_add+"\" placeholder=\"亲输入脚本名称\">\n" +
            "                                        </div>\n" +
            "                                    </div>\n" +
            "                            </div>\n" +
            "                            <div class=\"col-md-4\">\n" +
            "                                    <div class=\"form-group clearfix \">\n" +
            "                                        <label class=\"col-sm-4 control-label bk-lh30 pt0\">脚本参数：</label>\n" +
            "                                        <div class=\"col-sm-8\">\n" +
            "                                            <input type=\"text\" class=\"form-control bk-valign-top\" id=\"stepScriptInputParam"+next_add+"\" placeholder=\"请输入参数\">\n" +
            "                                        </div>\n" +
            "                                    </div>\n" +
            "                            </div>\n" +
            "                            <div class=\"col-md-4\"></div>\n" +
            "                        </div>\n" +
            "                    </div>\n" +
            "                    <div class=\"container-fluid mb0 \">\n" +
            "                        <div class=\"row\">\n" +
            "                            <div class=\"col-md-4\">\n" +
            "                                    <div class=\"form-group clearfix \">\n" +
            "                                        <label class=\"col-sm-4 control-label bk-lh30 pt0\">脚本内容：</label>\n" +
            "                                        <div class=\"col-sm-8\">\n" +
            "                                            <textarea class=\"form-control\" rows=\"3\" id=\"stepScriptText"+next_add+"\" placeholder=\"请输入脚本内容\"></textarea>\n" +
            "                                        </div>\n" +
            "                                    </div>\n" +
            "                            </div>\n" +
            "                            <div class=\"col-md-8\"></div>\n" +
            "                        </div>\n" +
            "                    </div>\n" +
            "                </div>   \n" +
            "            </div>\n" +
            "        </div>\n" +
            "    </div>\n" +
            "</div>";
        container.parentNode.insertBefore(oDiv, node)
        node = oDiv.nextSibling;

    }

    function test(test) {
        test.parentNode.parentNode.parentNode.parentNode.removeChild(test.parentNode.parentNode.parentNode);
        next_add = next_add-1
    }

    $("#save").on('click',function(){
        var step_arr = new Array()
        var templateName = $("#templateName").val()
        var templateType = $("#templateType").val()
        var templateID = $("#templateID").val()
        for(var i=0;i<=next_add;i++){
            var stepName = $("#stepName"+i).val()
            var stepScriptInputParam = $("#stepScriptInputParam"+i).val()
            var stepScriptText = $("#stepScriptText"+i).val()
            var stepID = $("#stepID"+i).val()
            var step = {
                "stepID":stepID,
                "stepName":stepName,
                "stepInputParam":stepScriptInputParam,
                "stepScriptType":1,
                "stepScriptText":stepScriptText
            }
            step_arr.push(step)
        }
        param = {
            "templateID":templateID,
            "templateName":templateName,
            "templateType":templateType,
            "stepList":step_arr
        }
        $.ajax({
            url:"/template/editTemplate/",
            dataType: "json",
            type: "post",
            data:JSON.stringify(param),
            headers:{
                "Content-Type":"application/json;charset=utf-8"
            },
            success:function(result){
                if(result.code == 0){
                    alert("创建成功")
                    window.location.href = "/templateManagement"
                }else{
                    alert(result.message)
                }
            }
        })
    })
</script>
                      
</%block>