var tmpl=`
<div ref="multipleTable">
  <el-container>
    <el-aside :width="left_width">
    <gsb-searchform2 ref="searchForm" @onquery="queryClick"  :metaData="searchMetaData">
       <slot slot="otherButton" name="otherButton"></slot>
    </gsb-searchform2>

      <gsb-button-group @select="onToolbarClick" ikey="new" :btns="toolbar"></gsb-button-group>
      <el-table
         border="true"
         :data="data"
         tooltip-effect="dark"
         style="width: 100%"
         :height="tblHeight"
         :max-height="tblHeight"
         :header-cell-style="headerCellStyle"
         :highlight-current-row="singleSelect"
         @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="right"
                 :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 v-if="btn.isInRow" type="text" @click="rowClick(scope.row,btn.key,btn.title,$event)" v-for="btn in toolbar">{{formatBtn(scope.row,btn)}}</el-button>
                     </slot>
                     <slot v-else name="other" :row="scope.row">
                        <img width="80px" height="80px" v-if="scope.row.logo" :src="scope.row.logo"/>
                        <span v-else>暂无</span>
                     </slot>

                 </template>
               </el-table-column>
           </template>
         </template>
       </el-table>
       <gsb-pager ref="pagerRef" @pageChange="pageChanged"></gsb-pager>
    </el-aside>
    <el-main style="background-color:white;overflow:hidden;" :width="right_width">
      <gsb-detailform   ref="dlgform" @dlgFormClick="onDlgFormClick"  :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:["isIndexed","isLazy","bizCode","dataSource","colFormatter","headStyle","spaceHeight","isSingleSelect","isDataAuto","listMethod","deleteMethod","initMethod","createMethod","updateMethod"],
   data:function(){
     return {
       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:{
     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();
       }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);
             });

           }

        });
     },
     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=>{

              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){

       if(k=="save"){
          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=>{

            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);
       }
       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);
       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=>{
           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);
       });
     }
   },
   vname:"gsb-grid3"
}`
