<%inherit file="/base_index.html"/>
<%block name='content'>
<div id="createTmp" style="">
  <div class="loadText">
    新建模板
  </div>
        <div class="panel panel-default" style="padding-top: 1.3rem;padding-left: .5rem;margin-bottom: 10px" >
                
                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                          <el-row>
                            <el-col :span="6">
                                <el-form-item label="模板名称">
                                    <el-input v-model="formInline.templateName" placeholder="模板名称"></el-input>
                                  </el-form-item>
                            </el-col>
                            <el-col :offset="4":span="6">
                                <el-form-item label="模板类型">
                                    <el-select  v-model="formInline.templateType" placeholder="请选择">
                                            <el-option
                                              v-for="item in options"
                                              :key="item.value"
                                              :label="item.label"
                                              :value="item.value">
                                            </el-option>
                                          </el-select>
                            </el-form-item>
                            </el-col>
                          </el-row>
                        </el-form>
                    
            </div>
            <div class="panel panel-default"  style="    overflow: scroll;
            height: 44rem;">
                <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
                        <el-form-item
                          v-for="(domain, index) in dynamicValidateForm.domains"
                          :label="'步骤' + (index+1)"
                          :key="domain.key">
                        <el-row>
                          <el-col :offset="22" :span="2">
                              <el-button type="mini" @click.prevent="removeDomain(domain)">删除</el-button>
                          </el-col>
                        </el-row>
                      <el-row>
                        <el-col :offset="3" :span="15">
                          <div >
                              <el-form-item label="脚本类型：">
                                  <el-radio-group v-model="domain.stepScriptType">
                                          <el-radio :label="1">shell</el-radio>
                                          <el-radio :label="2">bat</el-radio>
                                          <el-radio :label="3">perl</el-radio>
                                          <el-radio :label="4">python</el-radio>
                                          <el-radio :label="5">powershell</el-radio>
                                        </el-radio-group>
                               </el-form-item>
                              <el-form-item label="步骤名称：">
                                  <el-input v-model="domain.stepName" placeholder=""></el-input>
                               </el-form-item>
                             
                               <el-form-item label="脚本参数：">
                                  <el-input v-model="domain.stepInputParam" placeholder=""></el-input>
                               </el-form-item>
                               <el-form-item label="脚本描述：">
                                  <el-input v-model="domain.description" placeholder=""></el-input>
                               </el-form-item>
                                     <div class="commandContent">
                                        <div class="commandArea">
                                            <el-form-item label="脚本内容：">
                                                <!-- <code-mirror :text="scriptText" :type="scriptType"></code-mirror> -->
                                                <el-input type="textarea" :rows="5"  v-model="domain.stepScriptText" placeholder=""></el-input>
                                             </el-form-item>
                                        </div>
                            </el-form-item>
                                     </div>
                          </div>
                        </el-col>
                      </el-row>
                      </el-form>
            </div>
            <el-row>
                    <el-col :offset="16":span="4"> 
                          <el-button type="primary" @click="addDomain()">新增步骤</el-button>
                    </el-col>
                    <el-col :span="4">
                          <el-button @click="saveDonain" >保存步骤</el-button>
                    </el-col>
                  </el-row>
</div>
<script type="text/javascript">

var vm =new Vue({
    el:'#createTmp',
    data:{
        formInline:{
        templateName:'',//
        templateType: ''
       },
        options: [{
          value: '1',
          label: 'RedHat Linux'
        }, {
          value: '2',
          label: 'Windows2008'
        }, ],

         dynamicValidateForm: {
          domains: [{
            stepName: '',
            description:'',
            stepScriptText:'',
            stepInputParam:'',
            stepScriptType:'',
          }],
         
        },
        // scriptTypeCode: { 1: 'shell', 2: 'bat', 3: 'perl', 4: 'python', 5: 'Powershell' },
       
    },
    methods:{
        addDomain() {
            vm.dynamicValidateForm.domains.push({
            stepName: '',
            description:'',
            stepScriptText:'',
            stepInputParam:'',
            stepScriptType:1,
            key: Date.now()
        });
        
    },
    removeDomain(item) {
        var index = this.dynamicValidateForm.domains.indexOf(item)
        if (index !== -1) {
          this.dynamicValidateForm.domains.splice(index, 1)
        }
      },
      saveDonain(){
        let vm  =this
          let data =Object.assign({},vm.formInline)
          let formData =vm.dynamicValidateForm.domains.slice(-1)
        let param={}
        param.templateName = vm.formInline.templateName
        param.templateType =vm.formInline.templateType
        param.stepList = vm.dynamicValidateForm.domains
        $.ajax({
            url:"${SITE_URL}template/createTemplate/",
            dataType: "json",
            type: "post",
            data:JSON.stringify(param),
            headers:{
                "Content-Type":"application/json;charset=utf-8"
            },
            success:function(result){
                if(result.code == 0){
                   vm.$message({
                     type:'success',
                     message:'创建成功'
                   })
                    window.location.href = "${SITE_URL}templateManagement"
                }else{
                  vm.$message({
                     type:'error',
                     message:'创建失败！'+result.message
                   })
                    
                }
            },
            error:function(){
              vm.$message({
                     type:'error',
                     message:'创建失败！'
                   })
            }
            
        })

          
      }

    }
})
   
</script>
                      
</%block>