var tmpl=`
<el-card>
<div style="text-align:center"><slot name="title"></slot><slot name="topbuttonarea"></slot></div>
<el-form class="idform" size="mini" style="margin:5px;position:relative;" ref="refform" label-position="right" label-width="100px" :rules="metaRules" :inline="isInline" status-icon="true"  :model="formModel">
      <gsb-collapse :title="group.title" isShow="true"  v-for="group in formMetaGroups">
        <el-row v-for="(rows,index) in group.rows">
          <template v-for="(item,index) in rows">
            <el-col  :xs="item.span" :sm="item.span" :md="item.span" :lg="item.span" :xl="item.span" style="display:inline">
              <el-form-item  :label="item.label"  :prop="item.prop"> 
                <template v-if="isPassword(item.type)">
                  <el-input type="password" 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]" :disabled="item.disabled" :placeholder="item.placeHolder" :style="item.style"></el-input>
                </template>
                <template v-else-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" :disabled="item.disabled"></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>
                <template v-else-if="isCascadeSelect(item.type)">
                    <gsb-cascadeselect v-model="formModel[item.prop]" :key="item.prop + index" :disabled="item.disabled" :level="item.level" levelfield="REGION_LEVEL" parentfield="PARENT_CODE" labelField="REGION_NAME"  valueField="REGION_CODE"></gsb-cascadeselect>
                </template>
              </el-form-item>
            </el-col>
          </template>
        </el-row>
      </gsb-collapse>
      <div style="text-align:right;position:absolute;right:0px;bottom:0px"><slot :formModel="formModel"></slot></div>
    </el-form>
    <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,
        ctlList: [],
      };
    },
    watch:{
      metaData:function(curData,oldData){
        var self=this;
        this.formMetaGroups=curData;
        this.initCtlList();
        this.formMetaGroups.forEach(m=>{
          m.rows.forEach(rows=>{
            rows.forEach(ctl=>{
              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:{
     initCtlList: function() {

        if(this.formMetaGroups && this.formMetaGroups.length > 0) {
          for(var group of this.formMetaGroups) {
            if(group && group.ctls) {
              var rows = [];
              var cols = [];
              for(var item of group.ctls) {
                if(item && (item.type == 'datetimespan' || item.type == 'cascadeSelect')) {
                  if(cols.length > 0) {
                    rows.push(cols);
                    cols = [];
                  }

                  item.span = 21;
                  cols.push(item);
                  rows.push(cols);
                  cols = [];
                  continue;
                }
                if(group.colnum){
                  var num = (24/group.colnum).toFixed(0);
                  item.span = num;
                  cols.push(item);
                  if(cols.length >= group.colnum) {
                    rows.push(cols);
                    cols = [];
                  }
                }else{
                  item.span = 7;
                  cols.push(item);
                  if(cols.length >= 3) {
                    rows.push(cols);
                    cols = [];
                  }
                }
              }
              if(cols.length > 0) {
                rows.push(cols);
                cols = [];
              }
              group.rows = rows;
            }
          }
        }
        console.log(this.formMetaGroups, "-----------------------after init --------------this.formMetaGroups ")
     },
     getColSpan:function(group, item){
        if(item && (item.type == 'datetimespan' || item.type == 'cascadeSelect')) {
          return 21;
        }
        if(group.colnum){
          return 24/group.colnum;
        }else{
          return 7;
        }
     },
      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;
      },
      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;
      },
      isCascadeSelect(type) {
        return "cascadeSelect"==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"
}`
