<template>
  <ul class="nav-list bg-no-scroll" 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: item.icon ? `${deep * 2 - 1.37}em` : `${deep * 2}em` }">
            <bg-icon v-if="item.icon" style="color: #7c8292" :icon="'#' + item.icon"></bg-icon>
            {{ item.menuName }}
          </span>
        </div>
      </template>
    </li>
  </ul>
</template>

<script>
export default {
  name: "NavList",
};
</script>
<script setup>
import { reactive } from "vue";
const props = defineProps({
  list: {
    type: Array,
    required: true,
  }, // 导航列表 [ { name: "xxx", path: "xxx" } ]
  deep: {
    type: Number,
    default: 0,
  },
  highlightParentRule: {
    type: Function,
  },
});

const showMore = reactive({});

const showMoreAction = (index) => {
  let flag = showMore[index];
  if (flag === undefined) {
    flag = true;
  }

  showMore[index] = !flag;
};

const getChildrenPath = (arr, temp = []) => {
  arr.forEach((e) => {
    temp.push(e.path);
    if (e.children && e.children.length) {
      getChildrenPath(e.children, temp);
    }
  });
  return temp;
};

const isCurrent = (path) => {
  return (props.highlightParentRule && props.highlightParentRule(path)) || false;
};
</script>

<style lang="scss" scoped>
.nav-item {
  color: #202531;
  margin: 10px 10px 10px 10px;
  padding: 6px 10px;
  border-radius: 6px;
}
.nav-item:hover {
  background-color: #ebeff9;
  color: #3759be;
}
</style>
