<template>
  <div class="table-form build-modal">
      <Form class="testForm" :model="newDeployConfig" ref="form" :rules="rules"  :label-width="120">
        <FormItem label="组件名称" >
           <span>{{newDeployConfig.applicationName}}</span>
        </Select>
        </FormItem>
        <FormItem label="服务配置文件" prop="profile" v-validate:profile.required.engCode="rules">
            <Input v-model="newDeployConfig.profile"  placeholder="服务配置文件"></Input>
        </Select>
        </FormItem>
            <FormItem>
            <Button type="primary" @click="handleSubmit">确认</Button>
            <Button @click="handleReset" style="margin-left: 8px">取消</Button>
        </FormItem>
    </Form>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit } from "vue-property-decorator";


@Component
export default class BuildService extends Vue {

   rules : any={};

   newDeployConfig : any = {};
   @Emit('close-modal') close(){
   }
    handleReset () {
        (this.$refs["form"] as any).resetFields();
        this.close();
    }
   @Emit("get-data") getData(){}
   save(){
       this.getApiData('put',this.$msPrefix.config + "/api/v1/comp/deploy/service" ,this.newDeployConfig ,res=>{
            this.$tools.message('success',"部署成功！");
            this.getData();
            this.close();
       })
   }
   handleSubmit(){
       (this.$refs["form"] as any).validate((valid) => {
            if (valid) {
                this.save()
            } else {
                this.$tools.message('info',"请完善必填项!")
            }
        });
   }

    receiveData(props){
        this.newDeployConfig={applicationName:props.name,profile:""};
    }
    
    resetField(){
        (this.$refs.form as any).resetFields();
    }
}
</script>


