<template>
  <el-menu
    :default-active="activeMenu"
    :mode="mode"
    router
    @select="selectMenu"
  >
    <template v-for="v in menus">
      <!-- 有子路由 -->
      <el-submenu
        v-if="!v.hideChildrenInMenu && v.children && v.children.length"
        :key="'a' + v.path"
        :index="v.path"
      >
        <template slot="title">
          <i v-if="v.meta && v.meta.icon" :class="v.meta.icon"></i>
          {{ v.meta.title }}
        </template>
        <el-menu-item
          v-for="item in v.children"
          :key="item.path"
          :index="item.path"
        >
          <i v-if="item.meta && item.meta.icon" :class="item.meta.icon"></i>
          {{ item.meta && item.meta.title }}
        </el-menu-item>
      </el-submenu>
      <!-- 单个路由 -->
      <el-menu-item v-else :key="v.path" :index="v.path">
        <i v-if="v.meta && v.meta.icon" :class="v.meta.icon"></i>
        {{ v.meta.title }}
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script>
import { systemName } from "@/config";
import { mapState, mapMutations } from "vuex";
export default {
  props: {
    mode: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      systemName,
      portal: process.env.VUE_APP_API_portal_URL + "/#",
    };
  },
  computed: {
    ...mapState(["menus", "sysName", "sysLogo", "path"]),
    activeMenu() {
      const route = this.$route;
      const { meta, matched } = route;
      if (meta.activeMenu) {
        return meta.activeMenu;
      } else {
        let curMatched = matched.filter((v) => v.path);
        return curMatched[0].path;
      }
    },
  },

  created() {},
  methods: {
    ...mapMutations(["SET_secondaryRoutes"]),
    selectMenu(index) {
      this.SET_secondaryRoutes(index);
    },
    handleGoHome() {
      let path = this.menus[0].path;
      if (path) {
        this.$router.push(path);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.el-menu {
  border: none !important;
  // .is-active {
  //   :deep(.el-submenu__title) {
  //     color: #1890ff !important;
  //     i {
  //       color: #1890ff !important;
  //     }
  //   }
  // }
}
.el-menu-item,
:deep(.el-submenu__title) {
  display: flex;
  align-items: center;
}

.el-menu--horizontal {
  height: 100% !important;
  border: none !important;
  background-color: transparent;
  i {
    color: rgba(254, 254, 254, 0.65);
  }
  .el-menu-item {
    height: 100% !important;
    border: none !important;
    display: flex;
    align-items: center;
    color: rgba(254, 254, 254, 0.65);

    &:hover {
      // background-color: transparent !important;
      color: #fff !important;
      background-color: #1890ff !important;
      // border-bottom: 2px solid #fff !important;
    }
  }

  :deep(.el-submenu) {
    height: 100% !important;
    .el-submenu__title {
      height: 100% !important;
      display: flex;
      align-items: center;
      color: rgba(254, 254, 254, 0.65);
      border: none !important;
      i {
        color: rgba(254, 254, 254, 0.65);
      }
      &:hover {
        // background-color: transparent !important;
        color: #fff !important;
        background-color: #1890ff !important;
        // border-bottom: 2px solid #fff !important;
      }
    }
  }
  .is-active {
    // border-bottom: 2px solid #fff !important;
    color: #fff !important;
    // background-color: transparent !important;
    background-color: #1890ff !important;
    :deep(.el-submenu__title) {
      border: none !important;
      color: #fff !important;
      // background-color: transparent !important;
      background-color: #1890ff !important;
    }
  }
  .el-menu--popup {
    .el-menu-item {
      color: #909399 !important;
      i {
        color: #909399 !important;
      }
      &:hover {
        i {
          color: #1890ff !important;
        }
        color: #1890ff !important;
        background-color: transparent !important;
      }
    }
    .is-active {
      color: #1890ff !important;
      background-color: transparent !important;
      i {
        color: #1890ff !important;
      }
    }
  }
}
</style>
