var tmpl=`
<div>
<gsb-selectsubsystem v-model="currentcode"  @initsubsystem="initsubsystem" @change="onchangesubsystem"></gsb-selectsubsystem>
<el-menu  style="border:none"
  :collapse="collapse"
  :mode="md"
  default-active="/roleview"
  :background-color="backcolor"
  text-color="black"
  active-text-color="#59C1A6"
  @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 :key="subItem.code+si"   :index="subItem.code+si" v-if="subItem.isGroup && !subItem.hidden && subsystem[treeItem.code]">
        <template slot="title">
          <i v-if="subItem.icon" :class="subItem.icon"  style="font-size: 15px;padding:0px 5px 0px 10px;;color:#54C4A7;"></i>
          <img v-if="!subItem.icon" class="el-icon-menu" :src="format(subItem)"></img>
          <span :key="subItem.code">{{format(subItem,subItem.label)}}</span>
        </template>
        <el-menu-item v-if="groupItem.isMenu==true && !groupItem.hidden" :index="groupItem.path" v-for="groupItem in subItem.children">
          <i v-if="groupItem.icon" :class="groupItem.icon"  style="font-size: 15px;padding:0px 5px 0px 10px;;color:#54C4A7;"></i>
            <img v-if="!groupItem.icon" class="el-icon-menu" :src="format(groupItem)"></img>
            <span :key="groupItem.code"> {{format(groupItem,groupItem.label)}}</span>
        </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"  style="font-size: 15px;padding:0px 5px 0px 10px;;color:#54C4A7;"></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" style="font-size: 15px;padding:0px 5px 0px 10px;;color:#54C4A7;"></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:"#ffffff",
        fontcolor:this.txtcolor?this.txtcolor:"black",
        md:this.mode?this.mode:"vertical",
        subsystem:{},
        currentcode:"",
     };
   },
   mounted:function(){

   },
   created:function(){
     
   },
   methods:{
     initsubsystem(ds){
       var firstCode="";
       ds.reverse().forEach(d=>{
          this.subsystem[d.subcode]=true;
          firstCode=d.subcode;
       });
       this.currentcode=firstCode;
       this.onchangesubsystem(firstCode);
     },
     onchangesubsystem(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(){
       this.$root.getReq("/web/metaCtl/getRsConfig",null).then(cfg=>{
          console.log(cfg.data);
          if(cfg){
            this.rsData=[];
            cfg.data.children.forEach(r=>{
              if(r.isleft){      
                 this.rsData.push(r);
              }  
            });
          }
       });
     },
     onselectMenu:function(index,indexPath){
        this.$emit("menuselect",index);
     },
     format:function(treeItem,label){
       return this.$root[this.formatprop](treeItem,label);
     }
   },
   vname:"gsb-leftmenu"
}`
