import { useState, Fragment } from 'react';
import { useNavigate, useRequest } from '@umijs/max';
import styles from './index.less';
import { Button, Input, Pagination, Select, Table } from 'antd';
import PageContent from '@/components/PageContent';
import { queryPsrList } from '@/services/psr';
const page_size = 10;
const PSRManage = () => {
  const navigate = useNavigate();
  const [searchData, setSearchData] = useState({
    name: undefined,
    code: undefined,
  });
  const { run, data, loading } = useRequest(queryPsrList, {
    defaultParams: [
      {
        name: undefined,
        code: undefined,
        current_page: 1,
        page_size,
      },
    ],
    onSuccess: (data) => {
      console.log(data);
      setSearchData({ ...searchData, current_page: 1, page_size });
    },
  });
  console.log(data?.list);
  const columns = [
    {
      title: '项目编号',
      dataIndex: 'project_full_code',
    },
    {
      title: '项目名称',
      dataIndex: 'project_name',
    },
    {
      title: '操作',
      render: (record) => (
        <Fragment>
          <>
            <a
              style={{ color: '#4096ff' }}
              onClick={() => {
                navigate(`/psrManage/detail/${record.id}`, {
                  state: {
                    project_name: record.project_name,
                    flow_id: record.flow_id,
                    node_id: record.node_id,
                  },
                });
              }}
            >
              进入
            </a>
          </>
        </Fragment>
      ),
    },
  ];
  const projectData = [];

  const handleSearch = () => {
    run({ ...searchData });
  };
  const onTableChange = (pagination) => {
    console.log(pagination);
    run({ ...searchData, current_page: pagination.current });
  };
  return (
    <PageContent>
      <div className={styles.searchContent}>
        <div className={styles.itemFlex}>
          <div>项目编号：</div>
          <Input
            style={{ width: 200 }}
            placeholder="请输入项目编号"
            onChange={(e) => {
              setSearchData({
                ...searchData,
                code: e.target.value,
              });
            }}
          />
        </div>
        <div className={styles.itemFlex}>
          <div>项目名称：</div>
          <Input
            style={{ width: 200 }}
            placeholder="请输入项目名称"
            onChange={(e) => {
              setSearchData({
                ...searchData,
                name: e.target.value,
              });
            }}
          />
        </div>

        <Button
          type="primary"
          className={styles.searchBtnSty}
          onClick={handleSearch}
          loading={loading}
        >
          查询
        </Button>
      </div>
      <Table
        columns={columns}
        dataSource={data?.list}
        onChange={onTableChange}
        pagination={{
          current: data?.pagination?.current,
          pageSize: page_size,
          total: data?.pagination?.total,
        }}
      />
    </PageContent>
  );
};

export default PSRManage;
