<template>
  <div class="table-form build-modal">
     <Tabs type="card" v-model="activeIndex">
        <TabPane label="启动参数配置" name="0">
            <Form class="testForm" :model="component" ref="form"  :label-width="120">
                <FormItem label="是否自启动" >
                    <i-switch v-model="component.autoStartFlag"  />
                </FormItem>
                <FormItem label="JVM参数" prop="jvmParams">
                    <Input v-model="component.startupArgs" type="textarea" placeholder="JVM参数"></Input>
                </FormItem>
                 <FormItem>
                    <Button type="primary" @click="handleSubmit">确认</Button>
                    <Button @click="handleReset" style="margin-left: 8px">取消</Button>
                </FormItem>
            </Form>
        </TabPane>
        <TabPane label="运行参数配置" name="1" class="i-table">
             <Row class="i-table-top-btns">
                <Button type="primary" icon="ios-refresh-circle-outline" :loading="loading" @click="refresh">刷新</Button>
            </Row>
            <Table :columns="columns" :data="data">
                <template slot-scope="{ row, index }" slot="key">
                <Input type="text" v-model="editModel.key" v-if="editIndex === index" />
                <span v-else>{{ row.key }}</span>
                </template>

                <template slot-scope="{ row, index }" slot="value">
                <Input type="text" v-model="editModel.value" v-if="editIndex === index" />
                <span v-else>{{ row.value }}</span>
                </template>

                <template slot-scope="{ row, index }" slot="description">
                <Input type="text" v-model="editModel.description" v-if="editIndex === index" />
                <span v-else>{{ row.description}}</span>
                </template>
                <template slot-scope="{ row, index }" slot="action">
                <div v-if="editIndex === index">
                    <Button @click="handleSave(row,index)" size="small" >保存</Button>
                    <Button @click="handleCancel(row,index)" size="small" style="margin-left: 8px">取消</Button>
                </div>
                <div v-else>
                    <Button @click="handleEdit(row, index)" size="small">编辑</Button>
                </div>
                </template>
            </Table>
            <div class="tab-btns">
                <Button type="primary" @click="submit">确认</Button>
                <Button @click="cancel" style="margin-left: 8px">取消</Button>
            </div>
        </TabPane>
    </Tabs>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit } from "vue-property-decorator";


@Component
export default class BuildParams extends Vue {
   component : any ={};
   loading : boolean =false;
   activeIndex : any = "0";
   columns : Array<any> = [
       {
            title: '参数建',
            slot: 'key'
          },
          {
            title: '参数值',
            slot: 'value'
          },
          {
            title: '参数说明',
            slot: 'description'
          },
          
          {
            title: '操作',
            slot: 'action'
          }
   ]

   data : Array<any> = []

    editIndex : number = -1  // 当前聚焦的输入框的行数

    editModel : any={}

    getRunningParams(obj){
        obj.autoStartFlag=obj.autoStart==1;
        this.component=obj;
        this.getApiData("get",this.$msPrefix.config + "/api/v1/comp/properties/"+ obj.componentKey.applicationName + "/" + obj.componentKey.profile,{},res=>{
            this.data=res.data;
        })
    }
     handleEdit (row, index) {
        this.editModel = _.cloneDeep(row);
        this.editIndex = index;
    }

    handleSave (row,index) {
        this.editIndex = -1;
        this.data.splice(index,1,this.editModel)
    }

    handleCancel(){
        this.editIndex = -1;
    }
    save(){
        this.component.autoStart=this.component.autoStartFlag?1:0;
        this.getApiData("post",this.$msPrefix.config + "/api/v1/comp/save/startupArgs",this.component,res=>{
            this.$tools.message('success','设置成功')
            this.close()
        },err=>{
            this.$tools.message('error','设置失败')
        })
    }
    handleSubmit () {
        this.save()
    }
    @Emit('close-modal') close(){
        this.activeIndex="0";
   }
    handleReset () {
        this.handleCancel();
        (this.$refs["form"] as any).resetFields();
        this.close();
    }

    cancel(){
        this.handleCancel();
        this.handleReset();
    }

    submit(){
        if(this.editIndex!=-1){
            this.$tools.message('warning','请先保存当前正在编辑的数据再提交')
            return;
        }
        this.getApiData("put",this.$msPrefix.config + "/api/v1/comp/properties",this.data,res=>{
            this.data=res.data;
            this.$tools.message('success','保存成功')
            this.close()
        })
    }

    refresh(){
        this.loading=!0;
         this.getApiData("post",this.$msPrefix.config + "/api/v1/comp/refresh/componentInstance/"+this.component.ip+"/"+this.component.port,{},res=>{
            this.loading=!1;
            this.$tools.message('success','刷新成功')
        },err=>{
            this.loading=!1;
            this.$tools.message('error','刷新失败')
        })
    }

}
</script>