<template>
  <div class="ele-body">
    <a-card :bordered="false" :body-style="{ padding: '16px' }">
      <ele-split-layout
        width="266px"
        allow-collapse
        :right-style="{ overflow: 'hidden' }"
        :style="{ minHeight: 'calc(100vh - 152px)' }"
      >
        <div>
          <ele-toolbar theme="default">
            <a-space :size="10"> 组织机构 </a-space>
          </ele-toolbar>
          <div class="ele-border-split sys-organization-list">
            <a-tree
              :tree-data="(data as any)"
              v-model:expanded-keys="expandedRowKeys"
              v-model:selected-keys="selectedRowKeys"
              @select="onTreeSelect"
            />
          </div>
        </div>
        <template #content>
          <org-user-list
            v-if="current"
            :selection="selection"
            :organization-list="data"
            :organization-id="current.organizationId"
          />
        </template>
      </ele-split-layout>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { message } from 'ant-design-vue/es';
  import { toTreeData, eachTreeData } from 'ele-admin-pro/es';
  import OrgUserList from './components/org-user-list.vue';
  import { listOrganizations } from '@/api/system/organization';
  import type { Organization } from '@/api/system/organization/model';

  // 加载状态
  const loading = ref(true);

  // 树形数据
  const data = ref<Organization[]>([]);

  // 树展开的key
  const expandedRowKeys = ref<number[]>([]);

  // 树选中的key
  const selectedRowKeys = ref<number[]>([]);

  // 选中数据
  const current = ref<Organization | null>(null);

  /* 查询 */
  const query = () => {
    loading.value = true;
    listOrganizations()
      .then((list) => {
        loading.value = false;
        const eks: number[] = [];
        list.forEach((d) => {
          d.key = d.organizationId;
          d.value = d.organizationId;
          d.title = d.organizationName;
          if (typeof d.key === 'number') {
            eks.push(d.key);
          }
        });
        expandedRowKeys.value = eks;
        data.value = toTreeData({
          data: list,
          idField: 'organizationId',
          parentIdField: 'parentId'
        });
        if (list.length) {
          if (typeof list[0].key === 'number') {
            // selectedRowKeys.value = [list[0].key];
          }
          current.value = list[0];
          current.value.organizationId = 0;
        } else {
          selectedRowKeys.value = [];
          current.value = null;
        }
      })
      .catch((e) => {
        loading.value = false;
        message.error(e.message);
      });
  };

  /* 选择数据 */
  const onTreeSelect = () => {
    eachTreeData(data.value, (d) => {
      if (typeof d.key === 'number' && selectedRowKeys.value.includes(d.key)) {
        current.value = d;
        return false;
      }
    });
  };

  query();
</script>

<script lang="ts">
  export default {
    name: 'UserBatchRecharge'
  };
</script>

<style lang="less" scoped>
  .sys-organization-list {
    padding: 12px 6px;
    height: calc(100vh - 242px);
    border-width: 1px;
    border-style: solid;
    overflow: auto;
  }
</style>
