var tmpl=`
<el-form style="padding:5px;margin:3px" ref="refform" label-position="left"  :rules="metaRules" status-icon="true" :inline="isInline" :model="formModel" :class="inlineClass">
      <el-form-item  v-for="group  in  formMetaGroups" :label="group.title" :prop="group.validProp">
          <template v-for="item in group.ctls">
              <template v-if="isInput(item.type)">
                <el-input v-model="formModel[item.prop]" :disabled="item.disabled" :placeholder="item.placeHolder" :style="item.style"></el-input>
              </template>
              <template v-if="isNumberInput(item.type)">
                <el-input v-model.number="formModel[item.prop]" :disabled="item.disabled" :placeholder="item.placeHolder" :style="item.style"></el-input>
              </template>
              <template v-else-if="isSelect(item.type)">
                  <gsb-select v-model="formModel[item.prop]"  :refModel="item.refModel" :placeHolder="item.placeHolder" :dicKey="item.dicKey" :autoComplete="item.autoComplete" :isMulti="item.isMulti" :modelName="item.modelName" :isFilter="item.isFilter"  :labelField="item.labelField" :valueField="item.valueField"></gsb-select>
              </template>
              <template v-else-if="isCheck(item.type)">
                  <gsb-checkgroup :max="group.max" v-model="formModel[item.prop]" :isButton="item.isButton"  :dicKey="item.dicKey"></gsb-checkgroup>
              </template>
              <template v-else-if="isRadio(item.type)">
                  <gsb-radiogroup v-model="formModel[item.prop]" :isButton="item.isButton"  :dicKey="item.dicKey"></gsb-radiogroup>
              </template>
              <template v-else-if="isSwitch(item.type)">
                 <gsb-switch v-model="formModel[item.prop]" :acText="item.acText" :inactText="item.inactText" :acColor="item.acColor" :inactColor="item.inactColor"></gsb-switch>
              </template>
              <template v-else-if="isDateTime(item.type)">
                  <gsb-datetime v-model="formModel[item.prop]" :isSimple="item.isSimple" :placeholder="item.placeHolder" :defaultTime="item.defaultTime"></gsb-datetime>
              </template>
              <template v-else-if="isDateTimeSpan(item.type)">
                  <gsb-datetimespan v-model="formModel[item.prop]" :isSimple="item.isSimple"></gsb-datetime>
              </template>
              <template v-else-if="isHtml(item.type)">
                 <gsb-htmleditor  v-model.escape="formModel[item.prop]" :style="style"></gsb-htmleditor>
              </template>
              <template v-else-if="isUpload(item.type)">
                 <gsb-upload2  v-model="formModel[item.prop]"></gsb-upload2 >
              </template>
              <template v-else-if="isTextarea(item.type)">
                  <el-input type="textarea" v-model="formModel[item.prop]" :disabled="item.disabled" :placeholder="item.placeHolder" :style="item.style"></el-input>
              </template>
          </template>
      </el-form-item>
      <slot :formModel="formModel"></slot>
    </el-form>
`
module.exports=
`{
   template:'${tmpl}',
   props:["isInInline","metaData","headTitle","height","refvalidatemethod"],
   data:function(){
     return {
       formModel:{

       },
       formMetaGroups:this.metaData,
       metaRules:{},
       isInline:this.isInInline=="true"?true:false,

     };
   },
   watch:{
     metaData:function(curData,oldData){
       var self=this;
       this.formMetaGroups=curData;
       this.formMetaGroups.forEach(m=>{
         if(m.validProp){
           m.rule.forEach(r=>{
             if(r.validator){
               r.validator=self[r.validator];
             }
           });
           this.metaRules[m.validProp]=m.rule;

         }
         m.ctls.forEach(ctl=>{
           if(ctl.type=="select"){
            this.$set(this.formModel,ctl.prop,[]);
           }else{
             if(ctl.type=="number"){
               this.$set(this.formModel,ctl.prop,0);
             }else{
               this.$set(this.formModel,ctl.prop,"");
             }

           }
         });
       });
     }
   },
   mounted:function(){
     console.log();
   },
   created:function(){

   },
   beforeCreate:function(){

   },
   computed:{
     inlineClass:function(){
       return {
         "demo-form-inline":true,
       };
     },
     style:function(){
       var h=this.height?this.height:"300px";
       return {"height":h,"overflow":"scroll"};
     },
   },
   methods:{
      validatex(rule, value, callback){
         if(this.refvalidatemethod){
           return  this.refvalidatemethod(rule, value, callback);
         }else{
           return callback();
         }
      },
      validate(cbk){
        this.$refs.refform.validate(valid=>{
           return cbk(valid);
        });
      },
      isInput(type){
        return "input"==type;
      },
      isNumberInput(type){
        return "number"==type;
      },
      isButton(type){
        return "button"==type;
      },
      isSelect(type){
        return "select"==type;
      },
      isDateTime(type){
        return "datetime"==type;
      },
      isDateTimeSpan(type){
        return "datetimespan"==type;
      },
      isCheck(type){
        return "check"==type;
      },
      isRadio(type){
        return "radio"==type;
      },
      isSwitch(type){
        return "switch"==type;
      },
      isHtml(type){
        return "html"==type;
      },
      isUpload(type){
        return "upload"==type;
      },
      isTextarea(type){
        return "textarea"==type;
      },
      reset:function(model){
        Object.keys(model).forEach(k=>{
           if(model[k] instanceof Array){
             model[k].length=0;
             model[k]=[];
           }else{
             model[k]="";
           }
        });
      },
      setInitData(obj){
        this.formModel=obj;
      },
      getFormModel(){
        return this.formModel;
      },
   },
   vname:"gsb-form"
}`
