<template>
  <div class="gl-page-content-grey-full">
    <div class="content">
      <div class="menu-list">
        <el-tree
          ref="menuTreeRef"
          :data="menuData"
          show-checkbox
          :props="{
            children: 'children',
            label: 'title',
          }"
          @check-change="checkFun"
        />
      </div>
      <div class="menu-detail">
        <BaseTable
          ref="baseTableRef"
          tableName="SYSTEM_ROLE"
          :api="roleListRolesApi"
        >
        </BaseTable>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import BaseTable from '@/components/common/table/baseTable.vue';
import routerData from '@/router/routerData';
import { roleListRolesApi } from '@/api/system/role';

const menuData = ref<any>(routerData);
const menuTreeRef = ref<any>();

const checkFun = () => {
  const nodeData = menuTreeRef.value.getCheckedNodes();
  console.log(nodeData);
};
</script>

<style lang="scss" scoped>
.gl-page-content-grey-full {
  .content {
    display: flex;
    height: 100%;
    .menu-list {
      width: 400px;
      height: 100%;
      background-color: var(--el-bg-color);
      border-radius: var(--border-radius-normal);
      margin-right: var(--margin-normal);
      padding: var(--padding-normal);
      overflow: auto;
    }
    .menu-detail {
      flex: 1;
      height: 100%;
      background-color: var(--el-bg-color);
      border-radius: var(--border-radius-normal);
      padding: var(--padding-normal);
      overflow: auto;
    }
  }
}
</style>
