var tmpl=`
<div ref="multipleTable">
  <gsb-searchform ref="searchForm" @onquery="queryClick"  :metaData="searchMetaData"></gsb-searchform>
  <gsb-dlgform  ref="dlgform" @dlgFormClick="onDlgFormClick"  :headTitle="headTitle" :metaData="formMetaData" :toolbar="toolbar">
    <slot></slot>
  </gsb-dlgform>
  <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-row>
                       <el-col  :xs="6" :sm="6" :md="4" :lg="2" :xl="2" v-for="btn in toolbar">
                           <el-button v-if="btn.isInRow" type="text"   @click="rowClick(scope.row,btn.key,btn.title,$event)" >{{formatBtn(scope.row,btn)}}</el-button>
                       <el-col>
                    </el-row>
                 </slot>
                 <slot v-else name="other" :row="scope.row">
                    <img width="30px" height="30px" :src="scope.row.headUrl"/>
                 </slot>
             </template>
           </el-table-column>
       </template>
     </template>
   </el-table>
   <gsb-pager ref="pagerRef" @pageChange="pageChanged"></gsb-pager>
 </div>
`
module.exports=
`{
   template:'${tmpl}',
   props:["dfQuery","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,
     };
   },
   created:function(){
      this.fetchMetaData();
   },
   mounted:function(){
    if(this.isDataAuto){
        this.fetchData();
    }

   },
   computed:{
     tblHeight:function(){
         var wkh=$(this.$root.$refs.workbench.$el).height();
         console.log("xxxxxxxxxxxxxxxxxxxxxxxxxwkh");
         console.log(wkh);
         console.log(this.spaceHeight);
         var m=wkh-(this.spaceHeight?Number(this.spaceHeight):0);
         console.log("table height======="+m);
         return  m;
     }
   },
   methods:{
     h(d){
       alert(d);
     },
     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(this.dfQuery && (typeof(this.dfQuery)=="function")){
           var x=this.dfQuery();
           Object.keys(x).forEach(k=>{
             rtn.search[k]=x[k];
           });
         }
         if(qobj.queryClick){
          this.$refs.pagerRef.pageInfo.currentPage=1;
          delete qobj.queryClick;
         }
       }else{
         rtn.search={};
         if(typeof(this.dfQuery)=="function"){
           var x=this.dfQuery();
           Object.keys(x).forEach(k=>{
             rtn.search[k]=x[k];
           });
         }
       }
       rtn.exsearch=this.$router.history.current.params;
       rtn.pageInfo={pageSize:this.$refs.pagerRef.pageInfo.pageSize,pageNo:this.$refs.pagerRef.pageInfo.currentPage};
       return rtn;
     },
     pageChanged(ps,cp){
     console.log("xxxxxxxxxxxxpageChangedxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx");
     console.log(this.currentSearchObj);
       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){
     console.log("xxxxxxxxxxxxpageChangedxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx");
     console.log(qobj);
       console.log("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx");
       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=>{
             console.log("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx");
             console.log(d.data.rows);
             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){
         console.log(row.id);
         this.$emit("changeRow",row,oldrow);
       }
     },
     headerCellStyle:function(){
       return this.headStyle;
     },
     rowClick(row,key,t,e){
      console.log("row click....");
      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.$refs.dlgform.dialogFormVisible=true;
        this.$nextTick(()=>{
          this.status="edit";
          this.headTitle=t;
          this.$refs.dlgform.setInitData(row);
        });
      }
      else{
        this.headTitle=t;
        console.log("xxxxxyyyyyyyy");
        this.$emit("rowclick",row,key,e);
      }
     },
     onDlgFormClick:function(k,model){
       console.log(k);
       console.log(JSON.stringify(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);
          console.log(model);
          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.$refs.dlgform.dialogFormVisible=false;
              this.status="common";
              this.fetchData();
            }
          });
          this.$emit("onsave",model);
       }
       if(k=="cancel"){
          this.$refs.dlgform.dialogFormVisible=false;
          this.$refs.dlgform.setInitData({});
          this.status="common";
       }

     },
     onToolbarClick:function(k,t){
       if(k=="new"){
         console.log("uuuuuuuuuuuuuuuuuuuuuuuu");
         this.headTitle=t;
         this.status="new";
         var methodName=this.initMethod?this.initMethod:"initNewInstance";
         const url = this.getUrl(methodName);
         console.log(url);
         console.log("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx");
         this.$root.getReq(url,null).then(d=>{
           console.log("init new initNewInstance........");
           console.log(d);
           if(d.status==0){
              this.$refs.dlgform.dialogFormVisible=true;
              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: '已取消删除'
             });
         });

        }
       }else{
         this.$emit("toolbarclick",this.multiSelect,k);
       }

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