<template>
  <el-scrollbar>
    <div class="manage-layout">
      <el-button @click="onOrgDialogOpen">组织管理</el-button>
      <div class="cacp-mv-l">
        <el-table :data="selectedOrgList" stripe>
          <el-table-column label="部门名称" prop="oguName"> </el-table-column>
          <el-table-column label="全路径" prop="fullPathName"> </el-table-column>
        </el-table>
      </div>
      <el-button @click="onUserDialogOpen">成员管理</el-button>
      <div class="cacp-mv-l">
        <el-table :data="selectedUserList" stripe>
          <el-table-column label="姓名" prop="oguName"> </el-table-column>
          <el-table-column label="全路径" prop="fullPathName"> </el-table-column>
        </el-table>
      </div>
      <org-selector
        :visible="orgVisible"
        :multiple="true"
        @on-close="onOrgDialogClose"
        @on-save="onOrgSave"
      ></org-selector>
      <user-selector
        :visible="userVisible"
        :multiple="false"
        @on-close="onUserDialogClose"
        @on-save="onUserSave"
      ></user-selector>
    </div>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import OrgSelector from '@/components/auth/OrgSelector.vue'
import UserSelector from '@/components/auth/UserSelector.vue'
import type { CacpOrganization, CacpUser } from '@cacp/ui'
const orgVisible = ref(false)
const userVisible = ref(false)
const selectedOrgList = ref<Array<CacpOrganization>>([])
const selectedUserList = ref<Array<CacpUser>>([])

function onOrgDialogOpen() {
  orgVisible.value = true
}

function onOrgDialogClose() {
  orgVisible.value = false
}

function onOrgSave(selectedList: Array<CacpOrganization>) {
  orgVisible.value = false
  selectedOrgList.value = selectedList
}

function onUserDialogOpen() {
  userVisible.value = true
}

function onUserDialogClose() {
  userVisible.value = false
}

function onUserSave(selectedList: Array<CacpUser>) {
  userVisible.value = false
  selectedUserList.value = selectedList
}
</script>

<style lang="less" scoped>
.manage-layout {
  padding: var(--cacp-margin-space-l);
}
</style>
