<template>
  <div class="">
     <q-list style="width:170px;overflow:hidden;background-color: rgb(245, 246, 247);">
              <template v-for="(x,i) in NavData">
                <q-item to="" clickable v-ripple :active="currentNav==x.key"  @click="chooseNav(x)" v-if="x.RoomList.length==0"
                  :key="i">
                  <!-- <q-item-section avatar style="min-width:30px;"> -->
                    <!-- <q-icon :name="x.MenuIcon" size="20px" /> -->
                  <!-- </q-item-section> -->
                  <q-item-section>{{x.SchoolName}}</q-item-section>
                </q-item>
                <q-expansion-item v-else :label="x.SchoolName" @show="showNav($event,x.Key)" :default-opened="x.Key===routeKey">
                  <q-item to="" clickable v-ripple :active="currentNav==y.RoomId"
                    v-for="(y, yi) in x.RoomList" :key="y.RoomId" @click="chooseNav(y)">
                    <!-- <q-item-section avatar style="padding-right:0;min-width:30px;"> -->
                      <!-- <q-icon :name="y.MenuIcon" size="20px" /> -->
                    <!-- </q-item-section> -->
                    <q-item-section style="padding-left:20px">{{y.RoomName}}</q-item-section>
                  </q-item>
                </q-expansion-item>
              </template>
     </q-list>
  </div>
</template>

<script>  
// import { active } from 'src/pages/financial/lang/zh';
  export default {
    meta: {
      title: "使用记录"
    },
    props:{
        NavData:{
            type:Array,
            default:[]  
        },
        activeNav:{
          type:[Number,String],
          default:0
        },
        activeFaNav:{
          type:[Number,String],
          default:0
        }
    },
   watch:{
      activeNav:{
        handler(val){
          if(!this.$route.query.key){
              this.currentNav=val
           }
        }
      },
      activeFaNav:{
        handler(val){
          if(!this.$route.query.key){
              this.routeKey=val
           }
        }
      }
   },
    data() {
      return {   
        currentNav: this.activeNav,    
        schoolId:0,
        routeKey:0,
      };
    },
    created(){
      if(this.$route.query.key){
        this.routeKey=this.$route.query.key
      }
    },
    mounted(){
       
    },
    methods:{
      showNav(val,id){
        this.schoolId=id
      },
      chooseNav(i){
          this.currentNav=i.RoomId
          this.$emit("success",{...i,...{schoolId:this.schoolId}})
      }
    }
  };

</script>
<style lang="scss" scoped>
 

</style>
