<template>
  <ul class="nav-list" v-if="list&&list.length">
    <li v-for="(item, index) in list" v-show="item.menuType!==2" :key="'nav_' + index">
      <template v-if="item.children && item.children.length&&item.menuType==0">
        <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" style="color:#7c8292;" :icon="'#'+item.icon"></bg-icon>
            {{ item.menuName }}
            <bg-icon v-show="showMore[index] !== false" style="font-size:8px;position: absolute;right: 10px;top: 20px;" icon="#bg-ic-arrow-up"></bg-icon>
            <bg-icon v-show="showMore[index] == false" style="font-size:8px;position: absolute;right: 10px;top: 20px;" icon="#bg-ic-arrow-down"></bg-icon>
          </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.children&&item.children.length?[...getChildrenPath(item.children),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
    },
    getChildrenPath(arr,temp=[]){
      arr.forEach(e => {
        temp.push(e.path)
        if(e.children&&e.children.length){
          this.getChildrenPath(e.children,temp)
        }
      });
      return temp
    },
    isCurrent(path) {
      return (
        (this.highlightParentRule && this.highlightParentRule(path)) || false
      );
    },
  },
};
</script>
