<template>
    <div class="table-form" >
        <Form :model="model" :ref="action" :label-width="labelWidth" v-if="step==1">
            <Card :shadow="true">
                <p slot="title">
                    <span style="font-size:16px">软件信息</span>
                </p>
                <Row>
                    <i-col :span="12">
                            <p style="font-size:20px">{{model.name}}</p>
                            <p>{{model.version}}</p>
                            <p>{{model.description}}</p>

                    </i-col>
                    <i-col :span="12">
                        <p>支持安装的操作系统:</p>
                        <br/>
                        <p><pre>{{model.supportOs}}</pre></p>
                    </i-col>
                </Row>
            </Card>

            <Row class="buttonDiv" style="margin-top:15px;">
                <Button @click="nextStep" type="primary">下&nbsp;一&nbsp;步</Button>
                <Button @click="cancel">关&nbsp;&nbsp;闭</Button>
            </Row>
        </Form>
        <Form v-if="step==2">
            <server-selector :resSelectList="resList" @handleChange="handleResChange"></server-selector>
            <Row class="buttonDiv" style="margin-top:15px;">
                <Button @click="back" type="primary">上&nbsp;一&nbsp;步</Button>
                <Button @click="nextStep" type="primary">下&nbsp;一&nbsp;步</Button>
            </Row>
        </Form>
        <Form v-if="step==3" >
            <Card :shadow="true">
                <p slot="title">
                    <span style="font-size:16px">软件信息</span>
                </p>
                <Row>
                    <i-col span="6">
                        <Radio-group v-model="deployBody.installType">
                            <Radio label="immediate">
                                <span>立即执行</span>
                            </Radio>
                            <Radio label="delay">
                                <span>延时执行</span>
                            </Radio>
                        </Radio-group>
                    </i-col>
                    <i-col span="6">
                        <DatePicker v-show="deployBody.installType=='delay'" :value="deployBody.installTime" @on-change="changeDate"
                                format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="请选择调度时间"></DatePicker>
                    </i-col>
                </Row>
            </Card>
            
            <Row class="buttonDiv" style="margin-top:15px;">
                <Button @click="back" type="primary">上&nbsp;一&nbsp;步</Button>
                <Button @click="nextStep" type="primary">下&nbsp;一&nbsp;步</Button>
            </Row>
        </Form>
        <Form v-show="step==4">
            <Card :shadow="true">
                <p slot="title">
                    <span>待部署软件：{{model.name}}  版本号：{{model.version}}  </span>
                    <span>执行类型：{{deployBody.installType == "immediate"?"立即执行":"调度执行"}}</span>
                    <span v-if ="deployBody.installType == 'delay'">调度时间：{{deployBody.installTime}}</span>
                </p>
                <Row>
                    <cs-dynamic-table ref="deployServers" :prop="csTable" :parent="this">
                    </cs-dynamic-table>
                </Row>
            </Card>
            <Row class="buttonDiv" style="margin-top:15px;">
                <Button @click="back" type="primary">上&nbsp;一&nbsp;步</Button>
                <Button @click="deploy" type="primary" :disabled = "!allowDeploy">执&nbsp;&nbsp;行</Button>
            </Row>
        </Form>
        <!--    <cmd-run @closeModal="cancel" ref="cmd" v-if="step==2" @back="back"></cmd-run>-->
    </div>
    
    
    

</template>
<script lang="ts">
    import {Component, Prop, Vue, Emit} from "vue-property-decorator";
    // import CmdRun from "./command-run.vue";
    import ServerSelector from "../../index/cmdb/server-selector.vue";

    @Component({
        components: {
            // CmdRun,
            ServerSelector
        }
    })
    export default class DeployFrom extends Vue {

        @Prop() private model!: any;
        @Prop(String) private action!: string;
        private step: number = 1;
        private installType: any = "immediate";
        //存放的是transferData中的key
        private resList: Array<any> = [];
        private time: any;
        private deployBody: any = {
            actionType:"install","installTime":this.time,"installType":this.installType,"policy":this.model,"serverIds":[]
        };
        private allowDeploy:boolean = true;

        private csTable : any = {
            formWidth: 35,
            parentVm: this,
            paginationByFront:true,
            dataPropFront:'data',
            showActions:false,
            dataFun:this.mockData,
            delFun:this.deleteData,
            dataProp: "data.content",
            postMethod: true,
            pageableProp: {
                pageSize: "data.size",
                total: "data.totalElements",
                currentPage: "data.number"
            },
            showIndex: true,
            emptyModel:  {
                command:"",
                description:"",
                matchRuleType:"ALL_MATCH",
                keepBlank:0
            },
            search: {
            },
            columns: [
                 {
                    key: 'host',
                    title: '主机名',
                    align: 'center',
                    ellipsis: true,
                    tooltip: true,
                    sortable:true
                }, {
                    key: 'ip',
                    title: '主机ip',
                    align: 'center',
                    ellipsis: true,
                    tooltip: true,
                    sortable:true
                },
                {
                    title: '操作',
                    key: 'action',
                    minWidth:200,
                    align: 'center',
                    render: (h, params) => {
                        let menus = [{
                            icon: 'md-trash',
                            action: 'delete',
                            label: '删除',
                            type:'error'
                        }];
                        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
                                },
                            })
                        ]);
                    }
                }]
        }

        nextStep() {
            if (this.step == 2&&this.resList.length == 0) {
                    this.$tools.message("warning", "请至少选择一个资源");
                    return;
            }else if(this.step == 3&&!this.deployBody.installTime&&this.deployBody.installType=="delay"){
                console.log(this.deployBody.installTime);
                this.$tools.message('warning','请指定调度时间！')
                return;
            }

            // if (this.deployBody.installTime){
            //     this.deployBody.installTime = this.deployBody.installTime.format("yyyy-MM-dd HH:mm:ss")
            // }
            // (this.$refs.child as any).afterGetData({data:this.resList})
            this.step++;
            if (this.step == 4){
                this.csTable.dataFun = this.mockData();
                this.csTable.paginationByFront = true;
            }
        }

        mockData(){
            this.$nextTick(()=>{
                (this.$refs.deployServers as any).afterGetData({data:this.resList})
            });
        }

        deleteData(id){
            console.log(id)
        }
        clickEvent(name:string, obj:any) {
            this.resList = this.resList.filter(r => r.id !== obj.id);
            this.csTable.dataFun = this.mockData();
            this.csTable.paginationByFront = true;

            if (this.resList.length != 0){
                this.allowDeploy = true;
            } else {
                this.allowDeploy = false;
            }
        }

        changeDate(datetime) {
            //这里的date就是我们想要的本地时间
            this.deployBody.installTime = datetime
            //这里就可以对后面传进来的参数进行操作了
        }

        deploy(){
            let resIds = this.resList.map(res=> res.id);
            this.deployBody.serverIds = resIds;
            this.deployBody.policy=this.model;
            this.allowDeploy=false;
            this.getApiData('post',this.$msPrefix.automation+'/api/v1/software/deploy',this.deployBody,res=>{
                if (res.rtnCode == 0) {
                    this.$tools.message('success','软件部署任务下发成功！');
                }else{
                    this.$Message.error(res.msg);
                }
                this.cancel();
                (window.parent as any).globalVue.$emit("changeRouter",{})
            },err=>{
                this.$tools.message('fail','软件部署任务下发失败！')
                this.allowDeploy=false;
                this.cancel();
            });

        }

        back() {
            this.step--;
        }

        @Emit("closeModal") close() {
        }

        cancel() {
            this.resList = [];
            this.time = null;
            this.deployBody= {
                actionType:"install","installTime":this.time,"installType":this.installType,"policy":this.model,"serverIds":[]
            };

            this.close();
            (this.$globalFun() as any).getMethod('close');
            
            this.step = 1;
            (this.$parent.$parent as any).getData();
        }


        handleResChange(res) {
            this.resList = res;
            if (this.resList.length != 0){
                this.allowDeploy = true;
            } else {
                this.allowDeploy = false;
            }
            // this.mockData();
        }
    }
</script>
<style scoped>
    ::-webkit-scrollbar-thumb {
        background-color: #A6A6A6 !important;
    }
   
</style>
