<template>
  <div class="table-form">
    <Form :model="model" :ref="action" :rules="rules" :label-width="labelWidth">
        <Row :gutter="10">
            <Col span="24">
            <FormItem label="指标标识(responsekey)" prop="responseKey"  v-validate:responseKey.required.maxTextLength="rules">
                <Input v-model="model.responseKey"  placeholder="请输入指标标识"  :disabled="disabled"></Input>
            </FormItem>
            </Col>
        </Row>
      <Row :gutter="10">
        <Col span="24">
           <Form-item label="指标中文名(nameZh)" prop="nameZh" v-validate:nameZh.required.maxInputLength="rules">
            <Input v-model="model.nameZh" placeholder="请输入指标中文名" :disabled="disabled"></Input>
            </Form-item>
        </Col>
      </Row>
      <Row :gutter="10" >
        <Col span="24">
           <Form-item label="指标英文名(nameEn)" prop="nameEn" v-validate:nameEn.required.engNumCode.maxInputLength="rules">
                <Input v-model="model.nameEn" placeholder="请输入指标英文名" :disabled="disabled"></Input>
            </Form-item>
        </Col>
      </Row>
       
      <Row :gutter="10" >
        <Col span="24">
            <FormItem label="是否展示(show)" prop="show" >
                <i-switch v-model="model.show"  :disabled="disabled"/>
            </FormItem>
        </Col>
      </Row>
      <Row :gutter="10" >
        <Col span="24">
            <FormItem label="是否总是展示(alwaysshow)" prop="alwaysShow" >
                <i-switch v-model="model.alwaysShow"  :disabled="disabled"/>
            </FormItem>
        </Col>
      </Row>
       <Row :gutter="10">
        <Col span="24">
            <FormItem label="序号(priority)" prop="priority"  v-validate:priority.required.$number.maxInputLength="rules">
                <InputNumber v-model="model.priority"  placeholder="请输入序号"  :disabled="disabled"></InputNumber>
            </FormItem>
        </Col>
      </Row>
       <Row :gutter="10">
        <Col span="24">
            <FormItem label="参数映射(valueReflect)" prop="valueReflect"  v-validate:valueReflect.maxInputLength="rules">
                <Input v-model="model.valueReflect"   placeholder="请输入参数映射"  :disabled="disabled"></Input>
            </FormItem>
        </Col>
      </Row>
        <Row :gutter="10">
            <Col span="24">
            <Form-item label="描述(description)" prop="description" v-validate:description.maxTextLength="rules">
                <Input v-model="model.description" type="textarea" placeholder="请输入描述" :disabled="disabled"></Input>
            </Form-item>
            </Col>
        </Row>
        <Row :gutter="10">
            <Col span="24">
            <FormItem label="指标参数" prop="params"  v-validate:params.required.maxTextLength="rules">
                <Input v-model="model.params"  :autosize="{minRows: 2,maxRows: 5}" placeholder="获取指标值时所需要传递标识或参数，例如oid，支持使用{方式进行替换}"  :disabled="disabled" v-tip:code="psem_indicator_params"  ></Input>
            </FormItem>
            </Col>
        </Row>
        <Row :gutter="10">
                <Col span="24">
                    <Form-item label="指标处理脚本" prop="script" v-validate:script.maxTextLength="rules">
                        <Input v-model="model.script" type="textarea" placeholder="支持配置对返回值进行处理的JS脚本" :disabled="disabled"   v-tip:code="psem_indicator_script" ></Input>
                    </Form-item>
                </Col>
        </Row>
        
        <Row :gutter="10">
        <Col span="24">
            <FormItem label="返回值映射字段" prop="responseReflectKey"  v-validate:responseReflectKey.maxTextLength="rules">
                <Input v-model="model.responseReflectKey"  :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入返回值映射字段"   :disabled="disabled"  v-tip:code="psem_indicator_response_reflect"></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 IndexForm extends Vue {
   
    loading : boolean = false;
    @Prop() private model!:any;
    @Prop(String) private action!:string;
    @Prop() private tableVm!:any;

    labelWidth:number =120;
    rules : any={};
    @Emit('close-modal') close(){}
    cancel () {
      setTimeout(()=>{
        this.close();
        (this.$refs[this.action] as any).resetFields();
      },250);
        
    }

    save(){
        this.getApiData('post',this.$msPrefix.psem+'/api/v1/data/save/PSEMIndicator',this.model,res=>{
            this.loading=!1;
            if (res.rtnCode == 0) {
                this.tableVm.getData();
                this.cancel();
                this.$tools.message('success',(this.action == 'update'?'修改':'新增')+'成功！')
            }else{
               this.$Message.error(res.msg);
            }
        },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>

