<template>
  <div class="table-form">
    <Form :model="model" :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="model.name" placeholder="请输入模板名称" :disabled="disabled"></Input>
            </Form-item>
        </Col>
      </Row>
      <Row :gutter="10" v-if="model.parent_id">
        <Col span="24">
          <FormItem label="优先级" prop="priority" v-validate:priority.required.$number="rules">
              <InputNumber :max="10000" :min="1" step="1" v-model="model.priority" :disabled="disabled"></InputNumber>
          </FormItem>
        </Col>
      </Row>
      
      <Row :gutter="10">
        <Col span="24">
            <FormItem label="模板内容" prop="template"  v-validate:template.required.maxTextLength="rules">
            <Input v-model="model.template" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入模板内容" v-tip:code="sms_template_content" :disabled="disabled"></Input>
        </FormItem>
        </Col>
      </Row>
      <Row :gutter="10" v-if="model.parent_id">
        <Col span="24">
            <FormItem label="模板条件" prop="predicate" v-validate:predicate.required.maxTextLength="rules">
            <Input v-model="model.predicate" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入模板条件" v-tip:code="sms_template_predicate" :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 TemplateForm extends Vue {
   

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

    loading : boolean = false;
    labelWidth:number =120;
    rules : any={};
    // get rules(){  
    //     const checkVal=(rule: any,value: any,callback: any,source : any ,options :any )=>{
    //         if (value === '') {
    //         callback(new Error(options.message));
    //         } else {
    //         callback();
    //         }
    //     };
    //     const rules={
    //         name:[{ required: true, message: "模板名称不能为空", trigger: "blur" }],
    //         priority: [ {  message: "请输入优先级", trigger: "blur",validator:checkVal } ],
    //         template: [{ required: true, message: "请输入模板内容", trigger: "blur" }],
    //         predicate: [{ required: true, message: "请输入模板条件", trigger: "blur" }]
    //     }
    //     return rules
    // }

    @Emit('close-modal') close(){}
    cancel () {
        this.close();
        (this.$refs[this.action] as any).resetFields();
    }
  resetFields(){
    (this.$refs[this.action] as any).resetFields();
  }
    save(){
        this.getApiData('post',this.$msPrefix.sms+'/api/v1/data/save/smsTemplate',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>

