<%inherit file="/base_index.html"/>
<%block name='content'>

<div id="createTask" style="margin:0 auto;padding:2rem;">
        <div class="clearfix" >
                <div style="margin-top: 30px;border:none" class="king-pearls king-pearls king-justified-pearls">
                    <el-steps :active="active" finish-status="success">
                            <el-step title="信息填写"></el-step>
                            <el-step title="服务器选择"></el-step>
                            <el-step title="任务详情"></el-step>
                          </el-steps>
                </div>
            </div>
            <div class="panel-body">
                <el-form v-if="active=='0'" :model="taskData1">
                  <el-row>
                      <el-col :span="10">
                            <el-form-item label="任务名称">
                                    <el-input v-model="taskData1.taskName" placeholder="请输入任务名称"></el-input>
                                </el-form-item>
                      </el-col>
                      <el-col :span="4" :offset="5">
                          <el-form-item label="模板">
                                <el-select v-model="taskData1.template_id" filterable placeholder="">
                                        <el-option
                                        v-for="item in taskData1.options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                      </el-option>
                                  </el-select>
                          </el-form-item>
                      </el-col>
                    
                  </el-row>
                  <el-row>
                   <el-form-item label="执行时间" label-width="100">
                                    <el-radio-group v-model="taskData1.taskType">
                                        <el-radio label="1">立即</el-radio>
                                        <el-radio label="2">定时</el-radio>
                                        <el-radio label="3">周期</el-radio>
                                    </el-radio-group>   
                    </el-form-item> 
                    <el-form-item label="" v-show="taskData1.taskType=='2'">
                           
                            开始时间： <el-date-picker
                                      v-model="taskData1.startTime"
                                      type="datetime"
                                      placeholder="选择日期时间"
                                      default-time="12:00:00"
                                      value-format="yyyy:MM:dd:HH:mm">
                                    </el-date-picker>  
                    </el-form-item>
                    <el-form-item label="" v-if="taskData1.taskType=='3'" >
                          <el-row>
                            <el-col :span="5">
                                    开始时间：<el-date-picker
                                    v-model="taskData1.startTime"
                                    type="datetime"
                                    placeholder="选择日期时间"
                                    default-time="12:00:00"
                                    value-format="yyyy:MM:dd:HH:mm">
                                  </el-date-picker>
                            </el-col>
                            <el-col :span="5">
                                    周期天数<el-input v-model="taskData1.day" placeholder=""></el-input> 
                                   </el-col>
                            
                          </el-row>
                    </el-form-item>
                 
                </el-row>
                </el-form>
                <el-form :model="taskData2" v-show="active=='1'">
                            <el-form-item label="选择业务">
                                <div class="chooseBusiness">
                                        <el-select popper-class="chooseBusiness" @change="getBusinessTaskList()" v-model="taskData2.slectValue" multiple filterable placeholder="请选择">
                                                <el-option
                                                  v-for="item in taskData2.options"
                                                  :key="item.value"
                                                  :label="item.label"
                                                  :value="item.value">
                                                </el-option>
                                              </el-select>
                                </div>    
                            </el-form-item>
                    <el-table  style="width: 100%"  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="350":data="taskData2.tabelData" @selection-change="handleSelectionChange" >
                            <el-table-column
                            type="selection"
                            width="55">
                          </el-table-column>
                            <el-table-column
                            fixed
                            prop="bk_host_name"
                            label="主机名"
                            >
                          </el-table-column>
                          <el-table-column
                            prop="bk_host_innerip"
                            label="IP"
                            >
                          </el-table-column>
                          <el-table-column
                            prop="bk_os_type"
                            label="系统类型"
                            :formatter="filterSystemType"
                            >
                          </el-table-column>
                          <el-table-column
                          prop="bk_name"
                          label="业务类型"
                          >
                        </el-table-column>
                          

                    </el-table>
                    <el-form-item label="备注">
                        <el-input v-model="taskData2.description" placeholder=""></el-input>
                    </el-form-item>
                    
                 <!-- <div class="pagination">
                            <el-pagination
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-size="pageSize"
                            layout="total, prev, pager, next, jumper"
                            :total="total">
                          </el-pagination>
                     </div>  -->
                
                </el-form>
                <el-form :model="taskData3" v-show="active=='2'">
                            <el-row>
                                <el-col :span="8">
                                        <el-form-item label="任务名称：">
                                                {{taskData1.taskName}}
                                            </el-form-item>
                                        
                                </el-col>
                                <el-col :span="8">
                                        <el-form-item label="模板名称：">
                                                {{filterTmpName(taskData1.template_id)}}
                                            </el-form-item>
                                        
                                </el-col>
                                <el-col :span="8">
                                        <el-form-item label="执行类型：">
                                                {{filterExecute (taskData1.taskType)}}
                                            </el-form-item>
                                        
                                </el-col>
                            </el-row>
                        <el-row>
                                <el-col :span="8">
                                      <el-form-item label="执行机器：">
                                         
                                                    <span>
                                                        {{filterExcBus()}}
                                                        </span>
                                          </el-form-item>
                                         
                                </el-col>
                                <el-col :span="8">
                                        <el-form-item label="备注：">
                                         
                                                <span>
                                                    {{taskData2.description}}
                                                    </span>
                                      </el-form-item>
                                </el-col>
                             
                        </el-row>
                              <el-table ref="taskData3" :data="multipleSelection"  height="350"  >
                                    <el-table-column
                                    fixed
                                    prop="bk_host_name"
                                    label="主机名"
                                    >
                                  </el-table-column>
                                  <el-table-column
                                    prop="bk_host_innerip"
                                    label="IP"
                                    >
                                  </el-table-column>
                                  <el-table-column
                                    prop="bk_os_type"
                                    label="系统类型"
                                    :formatter="filterSystemType"
                                    >
                                  </el-table-column>
                                  <el-table-column
                                  prop="bk_name"
                                  label="业务类型"
                                  >
                                </el-table-column>
                            </el-table>
                </el-form>
               
            </div>
           <el-row>   
             <el-col :offset="18" :span="6" >
                    <el-button type="primary"  @click="prevStep" v-if="active>0">上一步</el-button>
                    <el-button type="primary"  @click="nextStep" v-if="active<=1">下一步</el-button>
                    <el-button type="primary" v-if="active >1" @click="createTask">确认创建</el-button>
             </el-col>
            
           </el-row>
            

</div>


<script type="text/javascript">

    var vm = new Vue({
        el: '#createTask',
        data: {
            active: 0,
            taskData1: {
                taskName: '',
                template_id: '',
                taskType: '',
                startTime: '',
                day: '',
                options: [],
                
            },
            taskData2: {
                options: [],
                slectValue: '',
                tabelData: [],
                description:''
            },
            taskData3: {},
            multipleSelection: [],
            loading:false,
            total:0,
            currentPage:1,
            hostList:[],
            pageSize:10
            

        },
        mounted() {
            this.getTmpName()
        },
        methods: {
            /**
             * @name 获取模板名称
             * **/
            getTmpName() {
                $.ajax({
                    url: '${SITE_URL}template/getTemplateList2/',
                    cache: true,
                    type: "get",
                    dataType: "json",
                    headers: {
                        "Content-Type": "application/json;charset=utf-8"
                    },
                    success: function (result) {
                        if (result.code == 0) {
                            //重新刷新列表
                            vm.taskData1.options = []
                            result.results.map(item => {
                                let newItem = {}
                                newItem.label = item.text
                                newItem.value = item.id
                                vm.taskData1.options.push(newItem)
                            })
                        }
                    },
                    error: function () {

                    }
                })
            },
            //第二步要做的请求
            secondStep() {
                this.getBusinessList()
            },
            /**
             * @name 获取业务列表
             * 
             * **/
            getBusinessList() {
                $.ajax({
                    url: '${SITE_URL}get_biz_by_user',
                    cache: true,
                    type: "get",
                    dataType: "json",
                    headers: {
                        "Content-Type": "application/json;charset=utf-8"
                    },
                    success: function (result) {
                        if (result.code == 0) {
                            //重新刷新列表
                            console.log(result)
                            vm.taskData2.options = []
                            result.data.map(item => {
                                let newItem = {}
                                newItem.label = item.app_name
                                newItem.value = item.app_id
                                vm.taskData2.options.push(newItem)
                            })
                        }
                    },
                    error: function () {

                    }
                })
            },
            //获取主机列表
            getBusinessTaskList() {
               
                let vm =this
                let taskList = this.taskData2.slectValue
                let data =  {"bk_biz_list": taskList }
                this.loading = true
                $.ajax({
                    url: '${SITE_URL}task/getHostsByBiz/',
                    cache: true,
                    type: "post",
                    dataType: "json",
                    data: JSON.stringify(data),
                    headers: {
                        "Content-Type": "application/json;charset=utf-8"
                    },
                    success: function (result) {
                        if (result.code == 0) {
                            //重新刷新列表
                            console.log(result)
                            vm.taskData2.tabelData = []
                            // vm.hostList = result.results
                            vm.taskData2.tabelData = result.results
                            vm.loading = false
                            vm.total = result.count
                        }
                    },
                    error: function () {
                        vm.loading = false
                    }
                })
            },
            //上一步
            prevStep(){
               if(this.active-- <=0) return 
            },
            /**
             * @name 下一步
            * **/
            nextStep() {
                if (this.active++ > 2) return
                if (this.active == 1) {
                    //第二步时初始化请求数据
                    console.log("第二步")
                    this.secondStep()
                }
            },
            handleSelectionChange(val) {
                console.log(val)
                this.multipleSelection =val

               
            },
            //新建任务
            createTask(){
                let vm =this
                let data ={
                    taskName:this.taskData1.taskName,
                    taskPCList:[],
                    taskType:this.taskData1.taskType,//执行类型
                    description:this.taskData2.description,//描述
                    template_id:this.taskData1.template_id,//模板id
                    runTime:{}
                }
                let selcetBus = vm.taskData2.slectValue 
                let PcData={}
                for(let i of selcetBus){
                    PcData[i] ={
                        linux:[],
                        windows:[]
                    }
                    vm.multipleSelection.map(item=>{
                        // let newItem ={
                        //     bk_cloud_id:'',
                        //     bk_host_innerip:''
                        // }
                        if(item.bk_os_type =="1" && item.bk_id == i){
                        //    newItem.bk_cloud_id = item.bk_cloud_id
                        //    newItem.bk_host_innerip = item.bk_host_innerip
                           PcData[i].linux.push(item)

                        }else if(item.bk_os_type =="2" && item.bk_id == i){
                        //     newItem.bk_cloud_id = item.bk_cloud_id
                        //    newItem.bk_host_innerip = item.bk_host_innerip
                           PcData[i].windows.push(item)
                        }
                       
                    })
                }
                data.taskPCList = PcData
                if(data.taskType =='1'){
                    //立即执行
                   
                }else if(data.taskType =='2'){
                    //定时
                    console.log(vm.taskData1.startTime)
                    data.runTime.startTime =vm.taskData1.startTime
                    
                    
                }else if(data.taskType =='3'){
                    //周期
                    data.runTime.startTime =vm.taskData1.startTime
                    data.runTime.day =vm.taskData1.day

                }
               
                $.ajax({
                    url: '${SITE_URL}task/createTask/',
                    cache: true,
                    type: "post",
                    dataType: "json",
                    data: JSON.stringify(data),
                    headers: {
                        "Content-Type": "application/json;charset=utf-8"
                    },
                    success: function (result) {
                        if (result.code == 0 && result.result) {
                            //重新刷新列表
                         vm.$message(
                             {
                                 type:'success',
                                 message:'创建成功'
                             }
                         )
                         
                        window.location.href="${SITE_URL}scanningManagement"
                           
                        }else{
                            vm.$message(
                             {
                                 type:'error',
                                 message:'创建失败'
                             }
                         )
                        }
                    },
                    error: function () {
                        vm.$message(
                             {
                                 type:'error',
                                 message:'创建失败'
                             }
                         )
                    }
                })

                
            },
            handleCurrentChange(val) {
         console.log("当前页"+val);
            if(this.currentPage != val){
                this.currentPage = val
            }
            if(val == 1){
                this.taskData2.tabelData = this.hostList.slice(0,this.pageSize-1)
            }else{
                let prev =(this.pageSize-1)*(val-1)+1,
                next =((this.pageSize-1)*val)-1
                this.taskData2.tabelData =[]
                this.taskData2.tabelData = this.hostList.slice(prev,next)
            }
            
      },

            filterSystemType(row,cloumn){
                let data = row[cloumn.property]
                return data = this.filterSysType(data)
            },
            filterExecute(item){
                return this.filterExuType(item)
            },
            filterTmpName(item){
                let tmpdata =this.taskData1.options
                console.log(item)
                for(let i in tmpdata){
                    if(item ==tmpdata[i].value){
                        return tmpdata[i].label
                    }
                }
            },
            filterExcBus(){
                let str =""
                for(let i of this.taskData2.slectValue){
                    for(let j in this.taskData2.options){
                        if(i== this.taskData2.options[j].value){
                            str += this.taskData2.options[j].label
                        }
                    }
                }
                return str
            }
        },
      



    })

</script>
</%block>