import {
  MyButtons,
  MyColumns,
  MyPageContainer,
  MyProTableProps,
} from '@/common';
import { Apis } from '@/gen/Apis';
import { ProCard, ProTable } from '@ant-design/pro-components';
import { Space, Tabs, type TabsProps } from 'antd';
import { useState } from 'react';
// import MyAdmins from './components/AdminsList';
import EditPermissions from './components/EditPermissions';
import Create from './modals/Create';
import Update from './modals/Update';
interface SelectedBuilding {
  id: number;
  name: string;
}
export default function Index({ title = '权限配置' }) {
  const [selectedInfo, setSelectedInfo] = useState<SelectedBuilding | null>(
    null,
  );

  const items: TabsProps['items'] = [
    {
      key: '1',
      label: '权限配置',
      children: <EditPermissions item={{ id: selectedInfo?.id }} />,
    },
    // {
    //   key: '2',
    //   label: '管理员账号',
    //   children: <MyAdmins item={{ id: selectedInfo?.id }} />,
    // },
  ];

  return (
    <MyPageContainer
      title={title}
      enableTabs={true}
      tabKey="system-roles"
      tabLabel={title}
    >
      <div
        style={{
          display: 'flex',
        }}
      >
        <div style={{ marginRight: '20px' }}>
          <ProTable
            {...MyProTableProps.props}
            search={false}
            pagination={false}
            headerTitle="角色列表"
            style={{ width: '360px' }}
            request={async (params, sort) => {
              let res = await MyProTableProps.request(
                params,
                sort,
                Apis.Permission.SysRoles.List,
              );
              if (res?.data?.length) {
                setSelectedInfo(res?.data[0]);
              }
              return res || [];
            }}
            toolBarRender={(action) => [
              <Create key="Create" reload={action?.reload} title="角色" />,
            ]}
            rowClassName={(record: any) => {
              return selectedInfo?.id === record?.id
                ? 'ant-table-row-selected'
                : '';
            }}
            onRow={(record: any) => {
              return {
                onClick: () => {
                  setSelectedInfo(record);
                },
                style: {
                  cursor: 'pointer',
                },
              };
            }}
            options={false}
            columns={[
              { dataIndex: 'name', title: '角色名称' },
              MyColumns.Option({
                width: 120,
                render: (_, item: any, index, action) => (
                  <Space key={`item_${index}`}>
                    <Update item={item} reload={action?.reload} title="角色" />
                    <MyButtons.Delete
                      onConfirm={() =>
                        Apis.Permission.SysRoles.Delete({ id: item.id }).then(
                          () => action?.reload(),
                        )
                      }
                    />
                  </Space>
                ),
              }),
            ]}
          />
        </div>
        <ProCard>
          {/* <EditPermissions item={{ id: selectedBuilding?.id || 0 }} /> */}
          <Tabs defaultActiveKey="1" items={items} />
        </ProCard>
      </div>
    </MyPageContainer>
  );
}
