var tmpl=`
<div ref="multipleTable">
  <el-container>
    <el-aside :width="left_width">
      <gsb-searchform style="border:1px solid #eee;" ref="searchForm" @onquery="queryClick"  :metaData="searchMetaData"></gsb-searchform>
      <gsb-button-group @select="onToolbarClick" :ikey="focuskey" :btns="toolbar"></gsb-button-group>
      <el-table
         :border="border"
         :data="data"
         tooltip-effect="dark"
         style="width: 100%"
         :height="tblHeight"
         :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"
           width="30"
           v-if="!isSingleSelect">
         </el-table-column>
         <el-table-column v-if="isIndexed"
           label="序号"
           type="index"
           width="60">
         </el-table-column>
         <template v-for="(col, index) in columnMetaData">
           <template v-if="!col.isTmpl">
               <el-table-column
                 :width="col.width"
                 :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
                 :width="col.width"
                 :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"   @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-pagination ref="pagerRef" @pageChange="pageChanged"></gsb-pagination>
    </el-aside>
    <el-main style="background-color:white;overflow:hidden;" :width="right_width">
      <gsb-detailform   ref="dlgform" @dlgFormClick="onDlgFormClick" :refvalidatemethod="validateformmethod"  :headTitle="headTitle" :metaData="formMetaData" :toolbar="toolbar">
          <slot name="top" slot="top"></slot>
        <slot></slot>
      </gsb-detailform>
    </el-main>
  </el-container>
 </div>
`
module.exports=
`{
   template:'${tmpl}',
   props:["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:"450",

     };
   },
   created:function(){
      this.fetchMetaData();
   },
   mounted:function(){
    if(this.isDataAuto){
        this.fetchData();
    }

   },
   watch:{
      header_height:function(a){
        var wkh=$(this.$root.$refs.workbench.$el).height();
        console.log(this.spaceHeight);
        var m=wkh-(this.spaceHeight?Number(this.spaceHeight):0);
        this.tblHeight= m;
      }
   },
   computed:{

   },
   methods:{

     randRowclick:function(r){
       this.$emit("randrowclick",r);
     },
     linkInInitQuery:function(prop,val){
        var qm=this.$refs.searchForm.getModel();
        qm[prop]=val;
        this.isLazy=true;
        this.$refs.searchForm.doquery();
     },
     h(d){
       alert(d);
     },
     getSearchForm(){
      return this.$refs.searchForm;
     },
     showLeft(){
      this.left_width="100%";
      this.right_width="0";
     },
     showRight(){
      this.left_width="0";
      this.right_width="100%";
     },
     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.$parent.$parent.changeButtonState();
        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){
                 this.$parent.$parent.changeButtonState();
                   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();
                 }
               });
               this.$emit("onsave",model);
             }else{
               console.log("表单验证不过......");
             }
          });

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

     },
     onToolbarClick:function(k,t){
       this.$emit("toolbarclick",k,t,this.multiSelect);
       if(k=="new"){
         this.$parent.$parent.changeButtonState();
         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-h5grid2"
}`
