import { MyPageContainer, MyProTableProps } from '@/common';
import { Apis } from '@/gen/Apis';
import { ProCard, ProTable } from '@ant-design/pro-components';
import { useState } from 'react';
import MyProjectConfig from './components/ProjectConfig';

export default function Index({ title = '项目配置' }) {
  const [selectedProject, setSelectedProject] = useState<any>(null);

  return (
    <MyPageContainer
      title={title}
      enableTabs={true}
      tabKey="project_configuration"
      tabLabel={title}
    >
      <div style={{ width: '100%', display: 'flex' }}>
        <ProCard
          style={{ width: 390, marginRight: 15, minHeight: 550 }}
          size="small"
        >
          <ProTable
            {...MyProTableProps.props}
            search={false}
            headerTitle="项目"
            request={async (params, sort) => {
              let res = await MyProTableProps.request(
                params,
                sort,
                Apis.Asset.AssetProjects.List,
              );
              if (res?.data?.length) {
                setSelectedProject(res?.data[0]);
              }
              return res || [];
            }}
            rowClassName={(record: any) => {
              return selectedProject?.id === record?.id
                ? 'ant-table-row-selected'
                : '';
            }}
            onRow={(record: any) => {
              return {
                onClick: () => {
                  setSelectedProject(record);
                },
                style: {
                  cursor: 'pointer',
                },
              };
            }}
            options={false}
            columns={[
              {
                title: '项目名称',
                dataIndex: 'name',
                align: 'center',
              },
            ]}
          />
        </ProCard>
        <ProCard style={{ minHeight: 550 }}>
          <MyProjectConfig item={selectedProject} />
        </ProCard>
      </div>
    </MyPageContainer>
  );
}
