<template>
  <div v-if="routesData.length > 0">
    <div v-for="(item, i) in routesData" :key="i">
      <div :class="clickindex==i?'clickitem':'item'" @click="changeMenu(item,i)">
          <i :class="[item.meta.icon, 'iconfont']"></i>
          <span slot="title">{{ item.meta.title }}</span>
      </div>
    </div>
  </div>
</template>

<script>
  import store from '@/store/index'
  export default {
    name: 'index',
    components: {
    },
    props: {
      routesData:{
        type: Array,
        default: () =>{}
      }
    },
    data(){
      return{
        clickindex:0
      }
    },
    created(){
    },
    methods:{
      // 切换菜单
      changeMenu(currentMenu,index) {
        this.clickindex=index
        this.$router.push(currentMenu.path);
        sessionStorage.setItem('currentPage', currentMenu.path);
        store.commit('SET_MENUINFO',currentMenu)
      },
    },
    mounted(){
      if(store.getters.getMenuInfo){
        this.routesData.forEach((element,index)=> {
          if(element.name==store.getters.getMenuInfo.name){
            this.clickindex=index
          }
        });
      }else{
        store.commit('SET_MENUINFO',this.routesData[0])
      }
    }
    
  }
</script>
<style lang="less" scoped>
.item{
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 14px;
  border-radius: 5px;
  margin: 4px;
  color: #060101;
  padding-top: 5px;
    padding-bottom: 5px;
  .iconfont{
  font-size: 24px;
  margin-bottom: 2px;
}
}
.clickitem{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    background: #060101;
    color: white;
    margin: 4px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 5px;
    .iconfont{
        font-size: 24px;
        margin-bottom: 2px;
        color: white;
    }
}

</style>

