<template>
  <div class="parent-view">
    <div class="left-menu">
      <div
        class="menu-list-item"
        :class="[routeActive(menu) ? 'menu-list-item-active' : '']"
        v-for="(menu, index) in menuList"
        :key="'menu-' + index"
        @click="routeToPath(menu)"
      >
        <span>{{ menu.meta.title }}</span>
      </div>
    </div>
    <div class="page-container">
      <keep-alive :include="cachedViews">
        <router-view />
      </keep-alive>
    </div>
  </div>
</template>

<script>
import router from "@/router";
export default {
  name: "rollCallManage",
  computed: {
    cachedViews() {
      return this.$store.state.cachedViews;
    },
    routeActive() {
      return function ({ name }) {
        return this.$route.name === name;
      };
    },
  },
  data() {
    return {
      menuList: [],
    };
  },
  methods: {
    routeToPath({ path }) {
      this.$router.push({ path });
    },
  },
  mounted() {
    console.log(this.$route);
    console.log(router.getRoutes());

    const routes = router.getRoutes();
    const currentRoute = this.$route.name;
    const parentView = routes.find((route) => {
      return route.name === currentRoute;
    });
    console.log(parentView.parent.name);
    const sameLevelRoutes = routes.filter((route) => {
      return route.parent?.name === parentView.parent.name;
    });
    console.log(sameLevelRoutes);
    this.menuList = sameLevelRoutes;
  },
};
</script>

<style scoped lang="scss">
.parent-view {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  .left-menu {
    width: 288px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 24px 16px;
    .menu-list-item {
      width: 256px;
      height: 48px;
      display: flex;
      align-items: center;
      padding: 0 16px;
      cursor: pointer;
      span {
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC, serif;
        font-weight: 400;
        color: #000000;
      }
      &-active {
        background: rgba(14, 112, 255, 0.2);
        border-radius: 4px;
        span {
          color: #0e70ff;
        }
      }
    }
  }
  .page-container {
    width: calc(100% - 288px);
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
  }
}
</style>
