<%inherit file="/base_index.html"/>           
<%block name='content'>
<!-- 模板管理-->
<div class="panel panel-default table7_demo king-table7-demo3" id="tmpManage" style="padding:1rem">
        <div class="panel-heading">
            模板列表
        </div>
        <div style="padding-top:.5rem;padding-bottom: .5rem">
            <el-row>
                <el-col  :span="4" ><div class="grid-content bg-purple">
                        <el-input placeholder="请输入内容" prefix-icon="el-icon-search">
                      </el-input>
                </div>
            </el-col>
            <el-col :span="2" :offset="16">
                    <div class="grid-content bg-purple-light">
                        <el-button @click="createNewTmp()" type="primary">新建模板</el-button>    
                </div>
            </el-col>
              </el-row>
        </div>
        <div>
                <el-table
                :data="data1"
                border
                style="width: 100%"  v-loading="loading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                height="550">
                <el-table-column
                  fixed
                  prop="templateName"
                  label="模板名称"
                  >
                </el-table-column>
                <el-table-column
                  prop="templateType"
                  label="模板类型"
                  :formatter="filterType"
                  >
                </el-table-column>
                <el-table-column
                  prop="createTime"
                  label="创建时间"
                  >
                </el-table-column>
                <el-table-column
                  prop="createUser"
                  label="创建用户"
                  >
                </el-table-column>
                <el-table-column
                  fixed="right"
                  label="操作"
                  >
                  <template slot-scope="scope">
                    <el-button @click="readRow(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button type="text" @click="deleteRow(scope.row.id)" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div >
                    <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    layout="total, prev, pager, next, jumper"
                    :total="total"
                    >
                  </el-pagination>
             </div>
        </div>
        <el-dialog title="编辑模板" width="80%"  :visible.sync="dialogFormVisible">
           
                <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
                        <div>
                                <el-row>
                                        <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-row>
                        </div>    
                    <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="脚本内容：">
                                                <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 slot="footer" class="dialog-footer">
                            <el-row>
                                    <el-col :offset="5" :span="4"> 
                                          <el-button type="primary" @click="addDomain()">新增步骤</el-button>
                                    </el-col>
                                    <el-col :offset="5" :span="4">
                                          <el-button @click="saveDonain" >保存步骤</el-button>
                                    </el-col>
                                  </el-row>
                      </div>
               
                    
        </el-dialog>

       
    </div>
    <script type="text/javascript">
    var vm =new Vue({
        el:'#tmpManage',
        data:{
        selectContent:'',//选择任务内容
        data1: [],
        dialogFormVisible:false,
        formInline:{
            templateName:'',//
            templateType: ''
       },
        options: [
            {
          value: 1,
          label: 'RedHat Linux'
        }, 
        {
          value: 2,
          label: 'Windows2008'
        }, 
            ],

         dynamicValidateForm: {
          domains: [{
            stepName: '',
            stepScriptText:'',
            stepInputParam:'',
            stepScriptType:'',
            description:''
          }]
         
         
        },
        loading:false,
        total:'',
        currentPage:1,
        pageSize:'10',
        pagescount:'',
        selectRowContent:'',//查看选中内容
        },
        mounted() {
        
          this.getTmpList()
           
        },

        methods:{
       //获取模板列表
            getTmpList(){
                let data ={
                    currentPage:this.currentPage,
                    pageSize:this.pageSize
                }
                this.loading = true
                $.ajax({
                url: "${SITE_URL}template/getTemplateList",
                dataType: "json",
                type: "get",
                data:data,
                success: function (result) {
                    if(result.code == 0){
                        console.log("获取模板列表")
                        console.log(result)
                        vm.data1 =[]
                        vm.data1 = result.data.templateList
                        vm.total = result.data.count
                        vm.pagescount = result.data.pages
                        vm.loading = false
                    }
                },
                error: function (err) {
                    vm.loading = false
                    reject(err)
                }
            })
            },
            //新建模板
            createNewTmp(){
                window.location.href="${SITE_URL}createTemplate"
            },
            //删除模板
        deleteRow(id){
                let vm= this
                vm.selectId = id 
                console.log(vm.selectId)
                this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).
                then(() => {
                    console.log("1111")
                     vm.sureDelete()
                }).catch(() => {
                        this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });  
                    vm.selectId =""        
        });
             },
             //查看
             readRow(row){
                this.dialogFormVisible = true
                var data = _.cloneDeep(row.display_step_list);  
                this.formInline = Object.assign({},{templateName:row.templateName},{templateType:row.templateType})
                this.dynamicValidateForm.domains=[]
                for(let i in data){
                    this.dynamicValidateForm.domains.push(data[i])
                }
                vm.selectRowContent = row
             },
                sureDelete(){
                    let vm = this
                    console.log("删除操作")
                    let tmpId = vm.selectId ;
                    let data={templateID:tmpId};
                    
                    console.log(tmpId)
                    $.ajax({
                        url:"${SITE_URL}template/deleteTemplate/",
                        dataType: "json",
                        type: "post",
                        data:JSON.stringify({'templateID':tmpId}),
                        headers:{
                            "Content-Type":"application/json;charset=utf-8"
                        },
                        success:function(result){
                            if(result.code == 0){
                                //重新刷新列表
                                vm.$message({
                                type: 'success',
                                message: '删除成功!'
                                });
                                vm.getTmpList()
                            }else{
                                vm.$message({
                                type: 'info',
                                message: '删除失败!'+result.message
                                });
                            }
                        },
                        error:function(){
                            vm.$message({
                                type: 'info',
                                message: '删除失败!'
                                });
                        }
                    })
                },
                
                //新增步骤
                addDomain() {
                    this.dynamicValidateForm.domains.push({
                            stepName: '',
                            stepScriptText:'',
                            stepInputParam:'',
                            stepScriptType:1,
                            description:'',
                            key: Date.now()
                });
        
    },
    //删除步骤
    removeDomain(item) {
        var index = this.dynamicValidateForm.domains.indexOf(item)
        if (index !== -1) {
          this.dynamicValidateForm.domains.splice(index, 1)
        }
      },
      //保存步骤
      saveDonain(){
        //   let data =Object.assign({},vm.formInline)
        //   let formData =vm.dynamicValidateForm.domains.slice(-1)
        let vm =this
        let param={}
        param.templateID = vm.selectRowContent.id
        param.templateName = vm.formInline.templateName
        param.templateType =vm.formInline.templateType
        param.stepList = vm.dynamicValidateForm.domains
        $.ajax({
            url:"${SITE_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){
                    vm.$message({
                                type: 'success',
                                message: '编辑成功!'
                                });
                    window.location.href = "${SITE_URL}templateManagement"
                }else{
                    vm.$message({
                        type: 'error',
                        message: "编辑失败"+result.message
                     });
                   
                }
            }
        })

          
      },
      filterType(row,cloumn){
          let data = row[cloumn.property]
          console.log(data)
        return data = this.filterTmpType(data)
      },
      //每页多少条
    //   handleSizeChange(val) {
    //     console.log(val+"条");
    //     if(this.pageSize != val){
    //         //进行新的分页查询
    //         this.pageSize=val
    //         this.getTmpList()
    //     }
    //   },
      handleCurrentChange(val) {
        console.log("当前页"+val);
        if(this.currentPage != val){
            this.currentPage = val
            this.getTmpList()
            //重新请求
        }
      },
      
      //格式化模板类型
        },
        computed:{
            
        }
    })
        
    
    </script>





</%block>