var tmpl=`
<el-card class="gsbform">
<div style="text-align:center"><slot name="title"></slot></div>
<div style="text-align:right"><slot name="topbtnarea"></slot></div>
<transition name = "fade">
<el-form v-if="isshow" class="idform" :disabled="isdisabled"  ref="refform" label-position="right" label-width="100px" :rules="metaRules" :inline="true" status-icon="true"  :model="formModel">
      <gsb-collapse class="frmcollapse" :title="group.title" isShow="true"  v-for="group  in  formMetaGroups">
      <el-row>
        <template v-for="(item,index) in group.ctls">
          <el-col  :xs="getColSpan(group,0)" :sm="getColSpan(group,1)" :md="getColSpan(group,2)" :lg="getColSpan(group,3)" :xl="getColSpan(group,4)">
            <el-form-item v-if="ctlVisable[item.prop]"  :label="!isBtn(item.type) && item.label"  :prop="item.prop"> 
                   <template v-if="isPassword(item.type)">
                      <el-input type="password" size="small" v-model="formModel[item.prop]" :disabled="item.disabled" :placeholder="item.placeHolder" :style="item.style"></el-input>
                    </template>
                    <template v-if="isInput(item.type)">
                      <el-input v-model="formModel[item.prop]" size="small" :disabled="item.disabled || byrowdata(item.prop)" :placeholder="item.placeHolder" :style="item.style"></el-input>
                    </template>
                    <template v-if="isNumberInput(item.type)">
                      <el-input v-model.number="formModel[item.prop]" size="small" :disabled="item.disabled" :placeholder="item.placeHolder" :style="item.style"></el-input>
                    </template>
                    <template v-else-if="isSelect(item.type)">
                        <gsb-select    :ref="item.prop" v-model="formModel[item.prop]"  :refModel="item.refModel" :refMethod="item.refMethod" :placeHolder="item.placeHolder" :dicKey="item.dicKey" :autoComplete="item.autoComplete" :isMulti="item.isMulti" :modelName="item.modelName" :isFilter="item.isFilter"  :labelField="item.labelField" :refwhere2="item.refwhere2" @change="onselchange(item.prop,formModel,item.target)" :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" @change="statequery"></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" @change="switchchange(item.prop,item.targetprop,formModel,ctlVisable)"></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)">
                      <div @dblclick="queryattach(formModel,item.prop)">
                      <gsb-upload2   v-model="formModel[item.prop]" ></gsb-upload2 >
                      </div>
                    </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)" :loading="btnloadingMap[item.prop]"  :disabled="item.disabled" :placeholder="item.placeHolder" :style="item.style">{{ item.label}}</el-button>
                    </template>
                    <template v-else-if="isColorPicker(item.type)">
                       <el-color-picker v-model="formModel[item.prop]" :disabled="item.disabled" :style="item.style" ></el-color-picker>
                    </template>
            </el-form-item>
            </el-col>
            </template>
      </el-row>
      </gsb-collapse>
      <div style="text-align:right;position:absolute;right:0px;bottom:-20px"><slot :formModel="formModel"></slot></div>
    </el-form>
    </transition>
    <div style="width:100%;text-align:center"><slot name="buttonarea"></slot></div>
    </el-card>

`
module.exports=
`{
   template:'${tmpl}',
   props:["isInInline","metaData","headTitle","height","refvalidatemethod"],
   data:function(){
     return {
       formModel:{

       },
       formMetaGroups:this.metaData,
       metaRules:{},
       isInline:this.isInInline?true:false,
       isdisabled:false,
       isshow:true,
       btnloadingMap:{},
       ctlVisable:{},
     };
   },
   watch:{
     metaData:function(curData,oldData){
       var self=this;
       this.formMetaGroups=curData;
       this.formMetaGroups.forEach(m=>{
         if(!m || !m.ctls){
           return ;
         }
         m.ctls.forEach(ctl=>{
           this.$set(this.ctlVisable,ctl.prop,true);
           if(ctl.rules){
              ctl.rules.forEach(r=>{
                    if(r.validator){
                      r.validator=self[r.validator];
                    }
                  });
                  this.metaRules[ctl.prop]=ctl.rules;
           }
           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:{
     switchchange(spop,tprop,fm,ctlvisable){
         this.$emit("onswitchchange",spop,tprop,fm,ctlvisable);
     },
     onselchange:function(prop,formModel,target){
        if(!target){
          return;
        }
        this.$emit("onselchange",prop,formModel,target,this.ctlVisable);
     },
     showform:function(){
        this.isshow=true;
     },
     hideform:function(){
        this.isshow=false;
     },
      statequery:function(key){
        this.$emit("statequery",key,this.formModel);
      },
      byrowdata:function(prop){
        if(this.formModel && this.formModel.isSystem && prop=="code") {
          return true;
        }else{
          return false;
        }
     },
     queryattach:function(fm,prop){
       window.open(fm[prop]);
     },
     setReadOnly:function(){
        console.log("setReadOnlysetReadOnlysetReadOnlysetReadOnly========");
        this.isdisabled=true;
     },
      setCanEdit:function(){
         console.log("setCanEditsetCanEditsetCanEditsetCanEditsetCanEditsetCanEditsetCanEdit========");
        this.isdisabled=false;
     },
     getColSpan:function(group,mode){
        if(group.colnum){
          return 24/group.colnum;
        }else{
          if(mode==0 || mode==1 || mode==2){
             return 12;
          }
          if(mode==3){
            return 8;
          }else{
            return 6;
          }
        }
     },
      overBtnLoading(prop){
         this.$set(this.btnloadingMap,prop,false);
      },
      btnhandler:function(fm,prop){
         this.$set(this.btnloadingMap,prop,true);
         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;
      },
      isPassword(type){
        return "password"==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;
      },
      isColorPicker(type){
         return "colorpicker"==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;
        /*Object.keys(obj).forEach(k=>{
             this.$set(this.formModel,k,obj[k]);
        });*/
      },
      getFormModel(){
        return this.formModel;
      },
   },
   vname:"gsb-form"
}`
