<template>
  <ul class="nav-list" v-if="list&&list.length">
    <li v-for="(item, index) in list"  v-show="item.show" :key="'nav_' + index">
      <template v-if="item.children && item.children.length">
        <div
          class="nav-item nav-more text-clip"
          :class="{ current: isCurrent([item.path]) }"
          @click="showMoreAction(index)"
        >
          <span :style="{ paddingLeft: `${deep*2}em` }">
            <!-- <img v-if="item.icon" :src="item.icon" alt=""> -->
            <bg-icon v-if="item.icon" :icon="item.icon"></bg-icon>
            {{ item.menuName }}
          </span>
          &ensp;
        </div>
        <transition name="slideOutUp">
          <NavList
            :list="item.children"
            :deep="deep + 1"
            :highlight-parent-rule="highlightParentRule"
            v-if="showMore[index] !== false"
          />
        </transition>
      </template>
      <template v-else>
        <div
          class="nav-item text-clip"
          :class="{current:isCurrent(item.linkPath&&item.linkPath.length?[...item.linkPath,item.path]:[item.path])}"
          @click="$router.push(item.path)"
        >
          <span :style="{ paddingLeft: `${deep*2}em` }">{{ item.menuName }}</span>
        </div>
      </template>
    </li>
  </ul>
</template>

<script>
export default {
  name: "NavList",
  props: {
    list: {
      type: Array,
      required: true,
    }, // 导航列表 [ { name: "xxx", path: "xxx" } ]
    deep: {
      type: Number,
      default: 0,
    },
    highlightParentRule: {
      type: Function,
    },
  },
  data() {
    return {
      showMore: {},
    };
  },
  methods: {
    showMoreAction(index) {
      let flag = this.showMore[index];

      if (flag === undefined) {
        flag = true;
      }

      this.showMore[index] = !flag
    },
    isCurrent(path) {
      return (
        (this.highlightParentRule && this.highlightParentRule(path)) || false
      );
    },
  },
};
</script>
