import React,{useState,useEffect} from 'react'
import {Card,Table} from 'antd'
import ModalToolBar from './ModalToolBar';
import { httppost5 } from '../../../utils/request';
import { exportFile } from '../../../utils/tools';
import apiurl from '../../../service/apiurl';
import usePageTable from '../../../components/crud/usePageTable2';
import { createCrudService } from '../../../components/crud/_';
export default function ModalContent({zfjkData}) {
  const columns = [
    {
      title: '序号',
      key: 'inx',
      dataIndex:'inx',
      width: 80,
    },
    {
      title: '闸阀名称',
      key: 'valveName',
      dataIndex:'valveName',
      width: 150,
    },
    {
      title: '操作内容',
      dataIndex:'opContent',
      key: 'opContent',
      width: 150,
    },
    {
      title: '操作结果',
      dataIndex:'status',
      key: 'status',
      width: 150,
    },
    {
      title: '操作时间',
      dataIndex:'tm',
      key: 'tm',
      width: 150,
    }
  ]
  const [searchVal, setSearchVal] = useState(false)
   // 闸阀弹框更多数据
    const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.gsxl.zfzl.historypage).find_noCode);
  const exportExcel = () => {
    let params = {
      ...searchVal,
      pageSo: {
        pageNumber: tableProps.pagination.current,
        pageSize:tableProps.pagination.pageSize
      }
    }
    httppost5(apiurl.gsxl.zfzl.historyPageExport, params).then(res => {
      exportFile(`闸门操作记录.xlsx`,res.data)
  })
  }
  useEffect(() => {
    if (searchVal) {
      const params = {
        search: {
          ...searchVal,
        }
      }
      search(params)
    }
  }, [searchVal])
  return (
    <div>
         <Card className='nonebox'>
            <ModalToolBar
               setSearchVal={setSearchVal}
               exportFile={exportExcel}
               list={zfjkData}
            />
      </Card>
      
      <div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
            <Table columns={columns} rowKey="inx" {...tableProps} />
          </div>
    </div>
  )
}