<template>
  <el-menu :default-active="copyCurrentIndex" class="aos-nav-list">
    <el-menu-item
      v-for="(item,index) in navList"
      class="aos-nav-list-item"
      :key="index"
      :index="item.id"
      @click="handleNodeClick(item)"
    >
      <font-awesome-icon :icon="item.icon"/>
      <span class="menu-title aos-nav-list-name">{{item.name}}</span>
    </el-menu-item>
  </el-menu>
</template>
<script>
export default {
  name: "AosNavList",
  props: {
    navList: {
      type: Array,
      required: true
    },
    currentIndex: {
      type: String,
      required: true
    }
  },
  data(){
    return {
    }
  },
  methods: {
    handleNodeClick(data) {
      this.copyCurrentIndex = data.id;
      this.$emit("getMenu", data.id);
    }
  },
  computed: {
    copyCurrentIndex: {
      get(){
        return this.currentIndex;
      },
      set(val){
        console.log('val==',val);
      }
    }
  }
};
</script>
