<route lang="yaml">
meta:
  enabled: false
</route>

<script lang="ts" setup>
import LeftGroupTreeComponent from './components/GroupTree.vue'
import UserListComponent from './components/UserList.vue'
const groupTreeRef = ref()
const userListRef = ref()

const onItemSelect = (groupId: number) => {
  userListRef.value.loadData(groupId)
}
</script>

<template>
  <div class="absolute-container">
    <tool-header title="账号管理" />

    <div class="page-main">
      <LayoutContainer left-side-width="280px" hide-left-side-toggle>
        <template #leftSide>
          <LeftGroupTreeComponent ref="groupTreeRef" @onItemSelect="onItemSelect" />
        </template>

        <UserListComponent ref="userListRef" />
      </LayoutContainer>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.absolute-container {
  :deep(.left-side) {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
}
</style>
