import { MyPageContainer, MyProTableProps } from '@/common';
import { Apis } from '@/gen/Apis';
import { ActionType, ProTable } from '@ant-design/pro-components';
import { useEffect, useRef, useState } from 'react';

export default function Index({ title = '功能' }) {
  const [data, setData] = useState<any>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const actionRef = useRef<ActionType>();
  const [guardName] = useState<string>('Admin');

  const getData = async () => {
    let data = await Apis.Permission.Roles.PermissionTree();
    setLoading(true);
    setData(data.data);
  };

  useEffect(() => {
    getData();
  }, [guardName]);

  const ShowTable = () => {
    return (
      <ProTable
        {...MyProTableProps.props}
        search={false}
        pagination={false}
        actionRef={actionRef}
        headerTitle="功能管理"
        expandable={{
          defaultExpandAllRows: true,
          // defaultExpandedRowKeys: [1],
        }}
        options={false}
        dataSource={data}
        columns={[
          {
            title: '名称',
            render: (_, record) => {
              return `${record.id}_${record?.name}`;
            },
          },
          // { title: '前端表示', dataIndex: 'key' },
        ]}
      />
    );
  };

  return (
    <MyPageContainer
      title={title}
      enableTabs={true}
      tabKey="system-permissions"
      tabLabel={title}
    >
      {loading ? <ShowTable /> : null}
    </MyPageContainer>
  );
}
