<template>
    <div class="oo-page">
        <div class="oo-server">
            <Alert>命令内容：{{command}}</Alert>
            <cs-dynamic-table ref="child" :prop="csTable" :parent="this">
            </cs-dynamic-table>
            <Modal v-model="modelFlag" title="任务明细" width="80" :mask-closable="false" @on-cancel="closeModal" >
                <cmd-run-result  ref="result" @closeModal="closeModal"> </cmd-run-result>
                <div slot="footer"></div>
            </Modal>
        </div>
        <Row class="buttonDiv">
            <Button @click="cancel">关&nbsp;&nbsp;闭</Button>
        </Row>
    </div>
</template>

<script lang="ts">
    import { Component, Vue, Emit } from "vue-property-decorator";
    import CmdRunResult from "./cmd-run-result.vue";
    @Component({
        components: {
            CmdRunResult,
        }
    })
    export default class CmdRecurring extends Vue {
        modelFlag : boolean = false;
        private content : any = "";
        private command : any = "";
        private timer : any = null;
        private csTable : any = {
            formWidth: 35,
            parentVm: this,
            dataSrc: this.$msPrefix.automation+"/api/v1/data/list/job",
            delSrc: this.$msPrefix.automation+"/api/v1/data/delete/job/",
            batchDelUri: this.$msPrefix.automation+"/api/v1/data/batch/job",
            paginationByFront:false,
            dataPropFront: "data",
            dataProp: "data.content",
            postMethod: true,
            dataFun:this.mockTableFun,
            pageableProp: {
                pageSize: "data.size",
                total: "data.totalElements",
                currentPage: "data.number"
            },
            showIndex: true,
            emptyModel:  {

            },
            actions: { //表头操作按钮
                replace:true,
                def: [
                ]
            },
            columns: [
               {
                    key: 'startTime',
                    title: '开始时间',
                    align: 'center',
                    ellipsis: true,
                    tooltip: true,

                } ,{
                    key: 'endTime',
                    title: '结束时间',
                    align: 'center',
                    ellipsis: true,
                    tooltip: true,

                } ,{
                    key: 'status',
                    title: '状态',
                    align: 'center',
                    ellipsis: true,
                    tooltip: true,
                    render: (h, params) => {
                        let value=params.row.status;
                        console.log("status",value);
                        switch (value) {
                            case "4":value = "失败";break;
                            case "6":value = "成功";break;
                            default:value="未知";
                        }
                        return h('span',value)
                    }
                },{
                    title: '操作',
                    key: 'action',
                    align: 'center',
                    render: (h, params) => {
                        let menus = [{
                            icon: 'ios-eye',
                            action: 'detail',
                            label: '详情',
                            type:'info'
                        }];
                        let clickEvent = this.clickEvent;
                        return h('div', [
                            h('CsButton', {
                                props: {
                                    actions: menus,
                                    click: clickEvent,
                                    data: params.row,
                                    size:"small",
                                    styleCss:"marginRight:5px",
                                    disabled:params.row._disabled
                                },
                            })
                        ]);
                    }
                }
                    ]
        }

        clickEvent(name:string, obj:any) {
            let data=_.cloneDeep(obj);
            this.modelFlag = !0;
            this.$nextTick(() => {
                (this.$refs.result as any).postTableData(data.id, this.command, true);
            })
        }

        mockTableFun(){

        }

        postTableData(id,command,flag=false){
            // clearInterval(this.timer);
            // this.timer=setInterval(()=>{
            //     if(!flag){
            //         this.getJobResult(id,command)
            //     }else{
            //         this.findJob(id,command)
            //     }
            // },5000);
            this.command=command;
            this.findJob(id,command);
        }

        // getJobResult(id,command){
        //     this.getApiData('get',this.$msPrefix.automation +'/api/v1/job/findJobResult?jobId='+id,{},res=>{
        //         let tableData : Array<any> = [];
        //         var str = res.data.result;
        //         if(str&&str){
        //             let data = JSON.parse(str);
        //             if(data.elemResultInfo&&data.elemResultInfo.length>0){
        //                 data.elemResultInfo.forEach(item => {
        //                     item.output.command=command;
        //                     item.output.host=item.element.name;
        //                     tableData.push(item.output);
        //                 });
        //                 this.csTable.paginationByFront=true;
        //                 let childVue=(this.$refs.child as any);
        //                 if(childVue){
        //                     childVue.afterGetData({data:tableData})
        //                 }
        //             }
        //
        //         }
        //     },err=>{
        //
        //     })
        // }

        findJob(id,command){
            let child = (this.$refs.child as any);
            this.csTable.postData={"parentJob":[""+id]};
            this.csTable.dataFun=false;
            child.getData();

        }

        closeModal(){
            ((this.$refs.result as any).$refs.child as any).tableData=[];
            (this.$refs.result as any).clearTime();
            this.modelFlag=!1;
        }

        clearTime(){
            clearInterval(this.timer);
        }

        @Emit('closeModal') close(){}
        cancel() {
            clearInterval(this.timer);
            this.close();
        }

    }
</script>

