var tmpl=`
<div class="leftmenu">
<gsb-selectsubsystem key="subsystems" class="leftmenu-subsystem" v-model="currentcode"  @initsubsystem="initsubsystem" @change="onchangesubsystem"></gsb-selectsubsystem>
<el-menu  key="lemnu"  style="border:none;"
 :collapse="collapse"
 :mode="md"
 :default-active="defaultsel"
 :background-color="backcolor"
text-color="white"
 active-text-color="#2692FF"
 @select="onselectMenu"
>
  <template v-for="treeItem in rsData">
       <template v-if="treeItem.children && treeItem.children.length>0"  v-for="(subItem,si) in treeItem.children">
           <el-submenu class="" :key="subItem.code+si" :index="subItem.code+si" v-if="subItem.isGroup && !subItem.hidden && subsystem[treeItem.code]">
               <template slot="title" style="padding: 0px">
                 <div :groupid="subItem.code" @mouseleave="mleave(subItem.code)" >
                 <i v-if="subItem.icon" :class="subItem.icon" class="leftmenu-icon"></i>
                 <img v-if="!subItem.icon" class="el-icon-menu" :src="format(subItem)"></img>
                 <span :key="subItem.code" >{{format(subItem,subItem.label)}}</span>
                 </div>
               </template>
              <el-menu-item style="padding: 0px" v-if="groupItem.isMenu==true && !groupItem.hidden"  :index="groupItem.path" v-for="groupItem in subItem.children">
                 <div @click="leafclick(subItem.code)">
                  <i   v-if="groupItem.icon" :class="groupItem.icon"  class="leftmenu-icon"></i>
                 <img v-if="!groupItem.icon" class="el-icon-menu" :src="format(groupItem)"></img>
                 <span :key="groupItem.code"> {{format(groupItem,groupItem.label)}}</span>
                 </div>
              </el-menu-item>
           </el-submenu >
            <el-menu-item v-if="subItem.isMenu==true && !subItem.hidden && subsystem[treeItem.code]" :index="subItem.path">
                 <i   v-if="subItem.icon" :class="subItem.icon"  class="leftmenu-icon"></i>
                 <img v-if="!subItem.icon" class="el-icon-menu" :src="format(subItem)"></img>
                  <span :key="subItem.code"> {{format(subItem,subItem.label)}}</span>
             </el-menu-item>
      </template>
      <el-menu-item class="menuhover" v-if="treeItem.isMenu==true && treeItem.hidden==false" :index="treeItem.path?treeItem.path:treeItem.bizCode">
          <i v-if="treeItem.icon" :class="treeItem.icon" class="leftmenu-icon"></i>
          <img v-if="!treeItem.icon" class="el-icon-menu" :src="format(treeItem)"></img>
          <span slot="title">{{treeItem.label}}</span>
      </el-menu-item>
  </template>
</el-menu>
</div>
`
module.exports=
`{
   template:'${tmpl}',
   props:['formatprop',"collapse","bkcolor","txtcolor","mode"],
   data:function(){
     return {
        rsData:[],
        backcolor:this.bkcolor?this.bkcolor:"#eee",
        fontcolor:this.txtcolor?this.txtcolor:"black",
        md:this.mode?this.mode:"vertical",
        subsystem:{},
        currentcode:"",
        defaultsel:this.seldefault?this.seldefault:"/roleview"
     };
   },
   mounted:function(){
     if(this.codePath){
       this.groupmenucolor(this.codePath);
     }
   },
   created:function(){
     
   },
   watch:{
     codePath:function(v){
       console.log("leftmenu.....watch...............................................................................................................");
       console.log(v);
       this.groupmenucolor(v);
     }
   },
   methods:{
     groupmenucolor(v){
    

     },
     mleave(evt){
       
     },
     leafclick(evt){
      
       
     },
     initsubsystem(ds){
       var firstCode="";
       var lstcodeobj= this.$root.localdata("lastsubcode");
       ds.reverse().forEach(d=>{
          this.subsystem[d.subcode]=true;
          if(!lstcodeobj){
              firstCode=d.subcode;
          }else{
            firstCode=lstcodeobj.codestr;
          }
       });
       this.currentcode=firstCode;
       this.onchangesubsystem(firstCode);
     },
     onchangesubsystem(code){
          this.$root.localdata("lastsubcode",{codestr:code});
          Object.keys(this.subsystem).forEach(k=>{
                console.log(k);
                this.subsystem[k]=false;
                if(k==code){
                    console.log(k);
                    this.subsystem[k]=true;
                }
              });
              this.fetchMetaData();
     },
     fetchMetaData:function(){
        if(global_rsconfig){
            var cfg=global_rsconfig;
                    if(cfg){
                      this.rsData=[];
                      cfg.data.children.forEach(r=>{
                        if(r.isleft){      
                          this.rsData.push(r);
                        
                        }  
                      });
                    }
        }else{
          this.$root.getReq("/web/metaCtl/getRsConfig",null).then(cfg=>{
                    global_rsconfig=cfg;
                    if(cfg){
                      this.rsData=[];
                      cfg.data.children.forEach(r=>{
                        if(r.isleft){      
                          this.rsData.push(r);
                            console.log(JSON.stringify(r));
                        }  
                      });
                    }
                });
        }
      
     },
     onselectMenu:function(index,indexPath){
        this.$emit("menuselect",index);
     },
     format:function(treeItem,label){
       return this.$root[this.formatprop](treeItem,label);
     }
   },
   vname:"gsb-leftmenu"
}`
