<template>
  <div :class="item.path !== '' ? 'hori-item' : 'more hori-item'">
    <el-submenu :index="resolvePath(item.path)" active-text-color="#ffd04b">
      <template>
        <template slot="title" v-if="item.path !== ''">{{ item.meta.title || "" }}</template>
        <template slot="title" v-else>
          <div></div>
        </template>
        <div v-for="(child, key) in item.children" :key="key">
          <app-link v-if="!child.children && !child.alwaysShow" :to="resolvePath(child.path)">
            <el-menu-item :index="resolvePath(child.path)">{{ child.meta.title }}</el-menu-item>
          </app-link>
          <menu-item v-else :item="child" :base-path="child.path" />
        </div>
      </template>
    </el-submenu>
  </div>
</template>

<script>
import path from "path";
import { isExternal } from "@/utils";

import AppLink from "./Link";

export default {
  name: "MenuItem",
  components: { AppLink },
  props: {
    // route object
    item: {
      type: Object,
      required: true,
    },

    basePath: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      navMenuFlag: false,
    };
  },
  methods: {
    changeMoreMenu() {
      this.navMenuFlag = !this.navMenuFlag;
    },
    resolvePath(routePath) {
      // console.log(routePath)
      if (isExternal(routePath)) {
        return routePath;
      }
      if (isExternal(this.basePath)) {
        return this.basePath;
      }
      return path.resolve(this.basePath, routePath);
    },
  },
};
</script>

<style lang="scss">
.system-more {
  float: right;
  height: 100%;
  padding: 0 20px;
  cursor: pointer;
  .el-button--text {
    color: rgb(203, 206, 211);
  }
}
</style>
