<template>
  <div>
    <div v-for="item in list" :key="item.path">
      <template v-if="!item.hidden">
        <template v-if="!item.children || !item.children.length" style="display: block">
          <el-link class="title" :underline="false" @click="clickMenu(item.path)">{{ item.meta.title }}</el-link>
        </template>
        <template v-else>
          <h5 class="title">{{ item.meta.title }}</h5>
          <MenuRouter :list="item.children" class="menu"/>
        </template>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MenuRouter',
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    // 点击菜单
    clickMenu(path) {
      const curlArr = ['/notice', '/issue']
      // if (curlArr.includes(path)) {
      //   path += '/index'
      // }
      this.$router.push({
        path
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.menu {
  display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.title {
  padding: 3px 10px;
  margin-top: 16px;
}
</style>
