<template>
  <div class="flex  w-full justify-around  bg-app-blue-1 z-50" >
      {{ currentIndex }}
      <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='18px' :color='index===activedIndex?"#FFBB00":" #FFFFFF"'></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'
import { permissionList } from '@/constants/permission'
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(){
     this.init()
     
  },
  components:{
      'app-icon':Icon
  },
  methods:{
      init() {
          if (permissionList.indexOf(this.$store.state.app.address) > -1) {
              this.navRoutes.forEach(item => {
                  if (item.meta.text === '发起提案') {
                      item.meta.text = '发起活动'
                  }
              })
            } else {
                this.navRoutes.forEach(item => {
                  if (item.meta.text === '发起提案') {
                      item.meta.text = '发起提案'
                  }
              })
            }
          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
        }
      },
      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
      },
      currentIndex() {
          return this.$store.state.app.index
      }
  },
  watch: {
      $route(n, o) {
          if (n.path !== o.path) {
              this.init()
          }
      }
  }
});
</script>
