<template>
  <div class="table-form">
    <Form :model="rest" :ref="action" :rules="rules" :label-width="labelWidth">
      <Row :gutter="10">
        <Col span="24">
           <Form-item label="名称" prop="name" v-validate:name.required.maxInputLength="rules">
            <Input v-model="rest.name" placeholder="请输入名称" :disabled="disabled"></Input>
            </Form-item>
        </Col>
      </Row>
      <Row :gutter="10">
        <Col span="24">
          <FormItem label="数据源" prop="code" v-validate:code.required.@change="rules">
             <Select v-model="rest.code" placeholder="选择数据源" :disabled="disabled">
                <Option v-for="item in dataOriginOption" v-model="item.code">{{item.code}}({{item.description}})</Option>
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="10">
        <Col span="24">
          <Form-item label="请求路径" prop="url" v-validate:url.required.maxInputLength="rules">
          <Input v-model="rest.url" placeholder="请输入路径" :disabled="disabled"></Input>
        </Form-item>
        </Col>
      </Row>
      <Row :gutter="10">
        <Col span="24">
            <FormItem label="请求方式" prop="method" v-validate:method.required.@change="rules">
            <Select v-model="rest.method" placeholder="选择请求方式" :disabled="disabled">
                <Option value="get">get</Option>
                <Option value="post">post</Option>
            </Select>
        </FormItem>
        </Col>
      </Row>
      <Row :gutter="10">
        <Col span="24">
            <FormItem label="请求参数" prop="urlParams" v-validate:urlParams="rules">
            <Input v-model="rest.urlParams" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入参数" v-tip:code="sms_rest_param" :disabled="disabled"></Input>
        </FormItem>
        </Col>
      </Row>
      <Row :gutter="10">
        <Col span="24">
            <FormItem label="请求体" prop="bodyContent" v-validate:bodyContent.maxTextLength="rules">
            <Input v-model="rest.bodyContent" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入请求体" v-tip:code="sms_rest_body" :disabled="disabled"></Input>
        </FormItem>
        </Col>
      </Row>
      <Row :gutter="10">
        <Col span="24">
          <FormItem label="扩展信息" prop="extInfo" v-validate:extInfo.maxTextLength="rules">
            <Input v-model="rest.extInfo" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入扩展信息" v-tip:code="sms_rest_extinfo" :disabled="disabled"></Input>
        </FormItem>
        </Col>
      </Row>
      <Row class="buttonDiv">
        <Button :loading="loading"
          @click="submitForm(action)"
          type="primary"
          v-if="!(action == 'detail')"
        >确&nbsp;&nbsp;定</Button>
        <Button @click="cancel">关&nbsp;&nbsp;闭</Button>
      </Row>
    </Form>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit } from "vue-property-decorator";


@Component
export default class RestForm extends Vue {
   

    @Prop() private rest!:any;
    @Prop(String) private action!:string;
    @Prop() private tableInfo!:any;
    @Prop() private tableVm!:any;

    loading : boolean = false;
    labelWidth:number =120;
    rules:any={};
    dataOriginOption : Array<any> = [];
    @Emit('closeModal') close(){}
    cancel() {  
      	this.close();
        (this.$refs[this.action] as any).resetFields();
    }

    getCollector(){
        this.getApiData('get',this.$msPrefix.base+'/api/v1/data/all/restCollector',{},res=>{
            if (res.rtnCode == 0) {
                this.dataOriginOption=res.data.content
            }
        })
    }
    mounted(){
        this.getCollector()
    }

    save(){
        this.getApiData('post',this.$msPrefix.sms+'/api/v1/data/save/restProfile',this.rest,res=>{
            this.loading=!1;
            if (res.rtnCode == 0) {
                this.tableVm.getData();
                this.cancel();
                 this.$tools.message('success',(this.action == 'update'?'修改':'新增')+'成功！')
            }
        },err=>{
          this.loading=!1;
        })
    }
    /*提交*/
      submitForm (action) {
      	
        (this.$refs[action] as any).validate((valid) => {
          if (valid) {
          	if(!this.loading){
                this.loading=!0;
                this.save()
            }
          } else {
            this.$tools.message('info',"请完善必填项!")
           
          }
        });
      }

      get disabled(){
        return this.action=='detail'
      }
}
</script>

