<template>
  <PageWrapper>
    <a-card :bordered="false">
      <BasicTable :loading="loading" :dataSource="dataSource" @register="registerTable" @expand="onExpand" />
    </a-card>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { defHttp } from '/@/utils/http/axios';
  import { PageWrapper } from '/@/components/Page';
  import { BasicTable, useTable } from '/@/components/Table';

  const url = '/mock/api/asynTreeList';

  const loading = ref<boolean>(false);
  const dataSource = ref<any[]>([]);
  const [registerTable, { setLoading }] = useTable({
    rowKey: 'id',
    bordered: true,
    canResize: false,
    // 树表格
    isTreeTable: true,
    showIndexColumn: true,
    columns: [
      { title: '名称', dataIndex: 'name' },
      { title: '组件', dataIndex: 'component' },
      { title: '排序', dataIndex: 'orderNum' },
    ],
  });

  async function loadData(params) {
    loading.value = true;
    let result = await defHttp.get({ url, params });
    loading.value = false;
    return result.map((item) => {
      if (item.hasChildren) {
        return { ...item, children: [] };
      } else {
        return item;
      }
    });
  }

  async function loadRootData() {
    dataSource.value = await loadData({ id: '0' });
  }

  loadRootData();

  async function onExpand(isExpand, rowData) {
    if (isExpand && rowData.hasChildren && rowData.children.length === 0) {
      rowData.children = await loadData({ id: rowData.id });
    }
  }
</script>