import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
import { Table, Card,Modal,Form,Input,Button,Row,Pagination,message } from 'antd';
import { useSelector } from 'react-redux';
import ToolBar from './toolbar';
import apiurl from '../../../service/apiurl';
import usePageTable from '../../../components/crud/usePageTable3';
import { createCrudService } from '../../../components/crud/_';
import CardShow from "./Card"
import "./index.less"
const Page = () => {
  const role = useSelector(state => state.auth.role);

  const [searchVal, setSearchVal] = useState(false)
  const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.spjk1.aiWarn.page1).find_noCode);
  const onchange = (page, pageSize) => {
    const obj = {
      pageNumber: page,
      pageSize: pageSize,
    }
    const searchParams = {
      ...obj,
      // search: {
      //   ...searchVal,
      // }
    }
    search(searchParams)
  }
  useEffect(() => {
    if (searchVal) {
       const params = {
      search: {
        ...searchVal,
      }
    };
    search(params)
    }
   
  }, [searchVal])
  return (
    <>
      <div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0"}}>
        <div className='lf CrudAdcdTreeTableBox' style={{ width: "100%" }}>
          <Card className='nonebox'>
            <ToolBar
              setSearchVal={setSearchVal}
              role={role}
            />
          </Card>
          <div className="ant-card-body" style={{padding:"20px 0 0 0",display:"flex",flexWrap:"wrap",maxHeight:650,overflowY:"auto"}}>
            {
              tableProps.dataSource.length > 0 ? 
                tableProps.dataSource.map((item,i) => {
                  return (
                    <div key={i} >
                      <CardShow
                        record={item}
                      />
                  </div>
                )
              }) : null
            }
          </div>
          <div style={{textAlign: "right", marginTop: "25px",marginRight:40}}>
        <Pagination
          current={tableProps.pagination.current}
          total={tableProps.pagination.total}
          showTotal={tableProps.pagination.showTotal}
          pageSize={tableProps.pagination.pageSize}
          showSizeChanger
          showQuickJumper
          pageSizeOptions={[4, 8, 12, 16]}
          onChange={onchange}
        />
      </div>
        </div>
      </div>
    </>
  );
}

export default Page;