<template>
  <div class="flex fixed w-full justify-around  bg-app-blue-1 " :class="getPosition">
      <div v-for="(i,index) in navRoutes" :key="index" class="py-3 flex flex-col text-center " @click="navigating(i,index)"> 
          <div class="self-center">
              <app-icon customize :type='i.meta.icon' size='20px' :color='index===activedIndex?"text-app-yellow-1":" text-white"'></app-icon>
          </div>
          <div class=" pt-1 text-xs self-center" :class='index===activedIndex?"text-app-yellow-1":" text-white"'>{{i.meta.text}}</div>
      </div>
  </div>
</template>

<script lang="ts">

import Vue from 'vue';
import {routes} from '@/router/index'
import Icon from '@/components/common/Icon.vue'
interface NavItem{
    component:any;
    meta:{
        icon:string;
        text:string;
    };
    name:string;
    path:string;
}


export default Vue.extend({
  name: 'navgator',
  
  data(){
      return{
         
          activedIndex:0,
          navRoutes : routes[0].children as NavItem[]
      }
  },
  props:{
      position:{
          type:String,
          default:'bot'
      }
  },
  mounted(){
     const indexNumber = this.navRoutes.findIndex(i=>{
                console.log(i);
                
               return i.path === this.$route.path
           })
        if(this.navRoutes[this.activedIndex].path != this.$route.path){
           this.activedIndex = indexNumber
        }
  },
  components:{
      'app-icon':Icon
  },
  methods:{
      navigating(item:any,index:number){
          if(this.$route.path != item.path){
              this.activedIndex = index
              this.$router.push(item.path); 
          }else{
              return
          }
      }
  },
  computed:{
      getPosition(){
          let value = ''
          switch(this.position){
              case 'bot':
                  value ='bottom-0'
                  break
              case 'top':
                  value= 'top-0'
                  break
          } 
          return value
      },
  }
});
</script>
