var tmpl=`
<el-form style="padding:10px;margin:5px" ref="refform" label-position="right" label-width="150px" :rules="metaRules" :inline="isInline" status-icon="true"  :model="formModel">
      <el-form-item  v-for="group  in  formMetaGroups" :label="group.title" :prop="group.validProp">
         <el-row>
          <template v-for="(item,index) in group.ctls">
              <el-col  :span="getColSpan(group.ctls,index)">
       
              <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 v-else-if="isBtn(item.type)">
                  <el-button :type="item.face" @click="btnhandler(formModel,item.prop)"  :disabled="item.disabled" :placeholder="item.placeHolder" :style="item.style">{{ item.label}}</el-button>
              </template>
                     </el-col>
          </template>
          </el-row>
      </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: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{
             console.log(ctl.prop);
             if(ctl.type=="number"){
               this.$set(this.formModel,ctl.prop,0);
             }else{
               this.$set(this.formModel,ctl.prop,"");
             }

           }
         });
       });
     }
   },
   mounted:function(){

   },
   created:function(){

   },
   beforeCreate:function(){

   },
   computed:{
     style:function(){
       var h=this.height?this.height:"500px";
       return {"height":h,"overflow":"scroll"};
     },
   },
   methods:{
     getColSpan:function(cols,index){
        if(cols.length==2){
          if( index==0){
             return 17;
          }else{
             return 7;
          }
        }else{
          return 24;
        }
     },
      btnhandler:function(fm,prop){
        console.log("xxxxxxxxxxxxxxxxxx");
         this.$emit("btnclick",fm,prop);
      },
      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);
        });
      },
      isBtn(type){
        return "btn"==type;
      },
      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"
}`
