var tmpl=`
     <div id="treelistdiv" class="treelistdiv"  style="display: flex; justify-content: space-between;">
            <div  id="treediv" style="flex-grow:1;padding: 20px;min-width: 320px;background-color:white">
                    <el-tree :data="orgs" 
                               lazy
                               node-key="id" :props="defaultProps"
                               :load="loadNode"
                                ref="innertree"
                                :default-expanded-keys="expandkeys"
                              >
                                    <span class="custom-tree-node" slot-scope="{ node, data }">
                                            <span @click="sel(node,data)">
                                                 <span class="labeltitle">{{node.label}}</span>
                                                  &nbsp;&nbsp;
                                                  <span class="toolbar">
                                                              <el-button
                                                                  type="text"
                                                                  @click.stop="addopen(node, data)">
                                                                  <span class="el-icon-plus"></span>
                                                              </el-button>
                                                              <el-button
                                                                  type="text"
                                                                  @click.stop="remove(node, data)">
                                                                <span class="el-icon-minus"></span>
                                                              </el-button>
                                                            <el-button
                                                                  type="text"
                                                                  @click.stop="editopen(node, data)">
                                                                <span class="el-icon-edit"></span>
                                                              </el-button>
                                                  </span>
                                            </span>
                                    </span>
                    </el-tree>
                    <el-dialog
                          :title="nodetitle"
                          :visible.sync="centerDialogVisible"
                          @opened="opened"
                          width="550px"
                          center>
                          <slot name="treeform"></slot>
                      </el-dialog>
            </div>
            <div id="slotheight"  style="padding:5px;margin-left:5px;flex-grow:2;background-color:white">
                    <slot></slot>
            </div>
     </div>
`
module.exports=
`{
   template:'${tmpl.replace(/\n/g,"")}',
   props:['node_title','label_name','children_name','leaf_name','bizCode','fetchNodeData'],
   data:function(){
     return {
         orgs: [],
         defaultProps:{
               children: this.children_name?this.children_name:'children',
               label:this.label_name?this.label_name:'label',
               isLeaf:this.leaf_name?this.leaf_name:'isLeaf'
         },
         nodetitle:this.node_title?this.node_title:"节点信息",
         centerDialogVisible:false,
         formMetaData:[],
         currentNode:null,
         currentData:null,
         isEdit:false,
         expandkeys:[],
     };
   },
   mounted(){
     this.$emit("initheight","#treediv","#slotheight");
     this.fetchMetaData();
   },
   methods:{
      loadNode(node,resv){
         this.setCurrent(node,node.data);
         if(this.fetchNodeData){
           this.fetchNodeData(node,resv,this.expandkeys);
         }else{
            throw new Error("less pram method");
         }
      },
      sel(node,data){
           this.setCurrent(node,data);
           this.$emit("onsel",node,data);
      },
      updateKeyChildren(key,arr){
          this.$refs.innertree.updateKeyChildren(key,arr);
      },
      triggerNode(arr){
        this.$refs.innertree.setCheckedKeys(arr);
      },
      hidedlg(){
          this.centerDialogVisible=false;
      },
      setCurrent(node,data){
         this.currentNode=node;
         this.currentData=data;
      },
      fetchMetaData(){
          if(!this.bizCode){
            throw new Error("请设置业务编码");
          }
          var self=this;
          this.$root.getReq("/web/common/metaCtl/getUiConfig",{"biz":this.bizCode}).then(cfg=>{
            if(cfg && cfg.data){
              self.formMetaData=cfg.data.form;
            }
          });
      },
      addopen(node,data){
           this.centerDialogVisible=true;
           this.setCurrent(node,data);
           this.isEdit=false;
           this.$emit("dlgopen",node,node);
      },
      editopen(node,data){
          this.isEdit=true;
          this.centerDialogVisible=true;
           this.setCurrent(node,data);
           this.$emit("editopen",node,node);
      },
      remove(srcnode,srcdata){
           this.setCurrent(srcnode,srcdata);
           function cbk(node,data){
             console.log("cbk...............................");
              const parent = node.parent;
               const children = parent.data.children;
               const index = children.findIndex(d => d.id === data.id);
              children.splice(index, 1);
           }
          this.$emit("remove",srcnode,srcdata,cbk);
      },
      opened(){
         this.$emit("loadforminfo",this.formMetaData);
      },
      handleNodeClick(){}
   },
   vname:"gsb-tree"
}`
