<template>
  <div class="kg-builder">
    <div class="aside" style="width: 200px">
      <ul class="menu-list">
        <li
          v-for="i in menuList"
          :class="route.path === i.path ? 'menu-item active' : 'menu-item'"
          :key="i.name"
          @click="handleMenuClick(toRaw(i))"
        >
          {{ i.title }}
        </li>
      </ul>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { ref, toRaw } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
let menuList = ref([
  {
    path: "/kmplatform/kgpermission/RoleManage",
    name: "kgb-RoleManage",
    title: "角色管理",
  },
  {
    path: "/kmplatform/kgpermission/AccountManage",
    name: "kgb-AccountManage",
    title: "账号管理",
  },
]);

function handleMenuClick(data) {
  router.push({ path: data.path });
}
</script>

<style lang="less" scoped>
.kg-builder {
  display: flex;
  min-height: 100%;

  .aside {
    flex: 0 0 auto;
    // border-right: 1px solid #808080;
    padding: 10px 10px 0px;

    .menu-title {
      font-size: 18px;
      font-weight: bold;
    }

    .menu-list {
       margin: 15px 0px 0px;

         .menu-item {
        cursor: pointer;
        padding: 10px;
        margin-bottom: 5px;

        &:is(.active) {
          // color: #0A61F7;
          color:#40a1ff;
           background: #eef6ff;
        }

        &:hover {
          // color: #0A61F7;
          background: #eef6ff;
        }
      }
    }
  }

  .content {
    flex: 1 1 auto;
  }
}
</style>
