var tmpl=`
  
    <div style="display:flex;">
      <div name="grdid" style="width:99%;">
        <gsb-searchform style="border:1px solid #eee;" ref="searchForm" @onquery="queryClick"  :metaData="searchMetaData"></gsb-searchform>
        <el-card style="margin-top:5px;">
        <gsb-button-group style="margin-top:5px;" @select="onToolbarClick" :ikey="focuskey" :btns="toolbar"></gsb-button-group>
        <el-table
          :border="border"
          :data="data"
          tooltip-effect="dark"
          style="max-width:100%;min-width:900px;"
          empty-text="无结果"
          :max-height="tblHeight"
          :header-cell-style="headerCellStyle"
          :highlight-current-row="singleSelect"
          @row-click="randRowclick"
          @selection-change="handleSelectionChange"
          @current-change="handleCurrentChange">
              <el-table-column
                type="selection"
                v-if="!isSingleSelect">
              </el-table-column>
              <el-table-column v-if="isIndexed"
                label="序号"
                type="index">
              </el-table-column>
          <template v-for="(col, index) in columnMetaData">
            <template v-if="!col.isTmpl">
                <el-table-column
                  :label="col.label"
                  :prop="col.prop"
                  :formatter="colFormatter"
                  :show-overflow-tooltip="col.isShowTip?col.isShowTip:false">
                </el-table-column>
            </template>
            <template v-if="col.isTmpl">
                <el-table-column
                  :fixed="col.pos?col.pos:pos"
                  fit
                  :label="col.label"
                  :type="col.type"
                  :show-overflow-tooltip="col.isShowTip?col.isShowTip:false">
                  <template slot-scope="scope">
                      <slot v-if="col.isBtns" name="btns" :row="scope.row">
                          <el-button type="text" v-for="btn in toolbar" v-if="btn.isInRow && btnvisbleMethod(scope.row,btn)" @click="rowClick(scope.row,btn.key,btn.title,$event)" >{{formatBtn(scope.row,btn)}}</el-button>
                      </slot>
                      <slot v-if="col.isOther" name="other" :row="scope.row">
                          <img width="30px" height="30px" :src="scope.row[col.prop]"/>
                      </slot>
                      <slot v-if="col.isOther2" name="other2" :row="scope.row">
                      </slot>
                      <slot v-if="col.isOther3" name="other3" :row="scope.row">
                      </slot>
                      <slot v-if="col.isOther4" name="other4" :row="scope.row">
                      </slot>
                  </template>
                </el-table-column>
            </template>
          </template>
        </el-table>
        <gsb-pager ref="pagerRef" @pageChange="pageChanged"></gsb-pager>
           </el-card>
      </div>
    
        <div name="frmid"   style="background-color:white;overflow:hidden;width:90%;min-height:1000px">
          <gsb-detailform   ref="dlgform" @dlgFormClick="onDlgFormClick" :refvalidatemethod="validateformmethod"  :headTitle="headTitle" :metaData="formMetaData" :toolbar="toolbar">
              <slot name="top" slot="top"></slot>
            <slot></slot>
          </gsb-detailform>
        </div>
  </div>
   
`
module.exports=
`{
   template:'${tmpl}',
   props:["btnvisble", "validateformmethod","focuskey","isIndexed","isLazy","border","bizCode","dataSource","colFormatter","headStyle","spaceHeight","isSingleSelect","isDataAuto","listMethod","deleteMethod","initMethod","createMethod","updateMethod"],
   data:function(){
     return {
       pos:"right",
       border:this.border?true:false,
       toolbar:[],
       data:this.dataSource?this.dataSource:[],
       singleSelect:this.isSingleSelect=="true"?true:false,
       columnMetaData:[],
       searchMetaData:[],
       formMetaData:[],
       headTitle:"",
       status:"common",
       multiSelect:null,
       currentSearchObj:null,
       left_width:"100%",
       right_width:"0",
       tblHeight:"1000",
       btnvisbleMethod:this.btnvisble?this.btnvisble:this.btnctlfunc,

     };
   },
   created:function(){
      this.fetchMetaData();
   },
   mounted:function(){
    if(this.isDataAuto){
        this.fetchData();
    }
    this.showLeft();
   },
   watch:{
      header_height:function(a){
     
      }
   },
   computed:{

   },
   methods:{
      btnctlfunc:function(row,btn){
        if(row.isSystem){
            if(btn.key=="delete"){
                return false; 
            }
        }
        return true;    
     },

     randRowclick:function(r){
       this.$emit("randrowclick",r);
     },
     linkInInitQuery:function(prop,val){
        console.log("vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv");
        var qm=this.$refs.searchForm.getModel();
 
        qm[prop]=val;
        this.isLazy=true;
         console.log("vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv");
        this.$refs.searchForm.doquery();
     },
     h(d){
       alert(d);
     },
     getSearchForm(){
      return this.$refs.searchForm;
     },
     showLeft(){
       console.log("xxxxxxxxxxxxxxxxxxxxxx---left");
      $("[name='grdid']").show();
      $("[name='frmid']").hide();
     },
     showRight(){
         console.log("xxxxxxxxxxxxxxxxxxxxxx---right");
      $("[name='frmid']").show();
      $("[name='grdid']").hide();
     },
     formatBtn:function(row,btn){
       if(btn.falseText!="undefined"){
           if(row[btn.boolProp]==false){
              return btn.falseText;
           }else{
              return btn.title;
           }
       }else{
         return btn.title;
       }
     },
     buildQuery(qobj){
       var rtn={};
       if(qobj){
         rtn.search=qobj;
         if(qobj.queryClick){
          this.$refs.pagerRef.pageInfo.currentPage=1;
          delete qobj.queryClick;
         }
       }else{
         this.$refs.searchForm.getModel().queryClick=false;
         rtn.search=this.$refs.searchForm.getModel();
       }
       rtn.pageInfo={pageSize:this.$refs.pagerRef.pageInfo.pageSize,pageNo:this.$refs.pagerRef.pageInfo.currentPage};
       delete this.$refs.searchForm.getModel().queryClick;
       return rtn;
     },
     pageChanged(ps,cp){
       if(this.isDataAuto){
           this.fetchData(this.currentSearchObj);
       }else{
          this.$emit("pagechanged",ps,cp,this.currentSearchObj);
       }
     },
     setpageTotal(total){
        this.$refs.pagerRef.pageInfo.total=total;
     },
     fetchData:function(qobj){
       if(!this.isLazy){
         var self=this;
         var methodName=this.listMethod?this.listMethod:"findAndCountAll";
         var url=this.getUrl(methodName);
         var qc=this.buildQuery(qobj);
         this.$root.showMask();
         this.$root.postReq(url,qc).then(d=>{
             this.data=d.data.rows;
             this.$refs.pagerRef.pageInfo.total=d.data.count;
             this.$root.hideMask();
         });
       }


     },
     fetchData2:function(qobj){
         var self=this;
         var methodName=this.listMethod?this.listMethod:"findAndCountAll";
         var url=this.getUrl(methodName);
         var qc=this.buildQuery(qobj);
         this.$root.showMask();
         this.$root.postReq(url,qc).then(d=>{
             this.data=d.data.rows;
             this.$refs.pagerRef.pageInfo.total=d.data.count;
             this.$root.hideMask();
         });
     },
     fetchMetaData(){
        var self=this;
        this.$root.getReq("/web/metaCtl/getUiConfig",{"biz":this.bizCode}).then(cfg=>{
           if(cfg){
             cfg.data.toolbar.forEach(s=>{
              self.toolbar.push(s);
             });
             self.columnMetaData=cfg.data.list.columnMetaData;
             cfg.data.search.forEach(s=>{
               self.searchMetaData.push(s);
             });
             cfg.data.form.forEach(s=>{
               self.formMetaData.push(s);
             });
             console.log("grid init searchMetaData.......finished");
           }

        });
     },
     handleSelectionChange:function(val){
       this.multiSelect=val;
       this.$emit("multiSelect",val);
     },
     handleCurrentChange:function(row,oldrow){
       if(row){
         this.$emit("changeRow",row,oldrow);
       }
     },
     headerCellStyle:function(){
       return this.headStyle;
     },
     rowClick(row,key,t,e){
      if(key=="delete"){
          this.$confirm('此操作将删除当前记录, 是否继续?', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         }).then(() => {
           var self=this;
           var methodName=this.deleteMethod?this.deleteMethod:"delete";
           var url=this.getUrl(methodName);
           this.$root.postReq(url,{id:row.id}).then(rtn=>{
             console.log("delete ok");
              console.log(rtn.data);
              if(rtn.status==0){
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.fetchData();
              }
           }
          );
         }).catch(() => {
           this.$message({
             type: 'info',
             message: '已取消删除'
           });
         });
      }
      if(key=="edit"){
        this.showRight();
        this.$nextTick(()=>{
          this.status="edit";

          this.$refs.dlgform.setInitData(row);
        });
      }
      else{

        this.$emit("rowclick",row,key,e);
      }
     },
     onDlgFormClick:function(k,model){
       this.$emit("onDlgFormClick",k,model);
       if(k=="save"){
          this.$refs.dlgform.validate((valid)=>{
             if(valid){
               var methodName=null;
               if(this.status=="new"){
                 methodName=this.createMethod?this.createMethod:"create";
               }
               if(this.status=="edit"){
                 methodName=this.updateMethod?this.updateMethod:"update";
               }
               var url=this.getUrl(methodName);
               this.$root.postReq(url,model).then(d=>{
                 console.log("new Instance..ok.....");
                 if(d.status==0){
                   if(this.status=="new"){
                       this.$message({
                         type: 'success',
                         message: '新增成功!'
                       });
                   }
                   if(this.status=="edit"){
                       this.$message({
                         type: 'success',
                         message: '修改成功!'
                       });
                   }
                   this.$refs.dlgform.setInitData({});
                   this.showLeft();
                   this.status="common";
                   this.fetchData();
                 }else{
                   console.log(d);
                   this.$message({
                     type: 'warning',
                     message: d.msg+',保存失败!'
                   });
                 }
               });
               this.$emit("onsave",model);
             }else{
               console.log("表单验证不过......");
             }
          });

       }
       if(k=="cancel"){
          this.showLeft();
          this.$refs.dlgform.setInitData({});
          this.status="common";
       }

     },
     onToolbarClick:function(k,t){
       this.$emit("toolbarclick",k,t,this.multiSelect);
       if(k=="new"){
         this.status="new";
         var methodName=this.initMethod?this.initMethod:"initNewInstance";
         const url = this.getUrl(methodName);
         this.$root.getReq(url,null).then(d=>{
           console.log("init new initNewInstance........");
           console.log(d);
           if(d.status==0){
              this.showRight();
              this.$nextTick(()=>{
                this.$refs.dlgform.setInitData(d.data);
              });
           }
         });

       }
       if(k=="delete"){
        /*需要检查多选值，如果没有多选值，那么无法删除*/
        if(this.multiSelect && this.multiSelect.length>0){
          var ids=this.multiSelect.map(r=>{
             return r.id;
          });
          this.$confirm('此操作将删除选中记录, 是否继续?', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         }).then(() => {
           const url = this.getUrl("bulkDelete");
           this.$root.postReq(url,ids).then(d=>{
               if(d.status==0){
                 this.$message({
                   type: 'success',
                   message: '删除成功!'
                 });
                 this.fetchData();
               }
           });
         }).catch(() => {
             this.$message({
               type: 'info',
               message: '已取消删除'
             });
         });

        }
       }
     },
     queryClick:function(qobj){
        this.isLazy=false;
        this.currentSearchObj=qobj;
        this.currentSearchObj.queryClick=true;
        this.fetchData(qobj);
     },
     showDlgForm:function(){
       this.showRight();
     },
     hideDlgForm:function(){
       this.showLeft();
     },
     setInitFormData:function(data){
       this.$nextTick(()=>{
         this.$refs.dlgform.setInitData(data);
       });
     },
     getFormModel:function(){
        return  this.$refs.dlgform.getFormModel();
     },
   },
   vname:"gsb-grid2"
}`
