import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
import { Table, Card, Modal, Form, Input, Button, Row,Col, Timeline, message, Tabs,Image } from 'antd';
import ToolBar from './toolbar';
import apiurl from '../../../../service/apiurl';
import usePageTable from '../../../../components/crud/usePageTable2';
import { createCrudService } from '../../../../components/crud/_';
import { httppost5 } from '../../../../utils/request';
import { exportFile } from '../../../../utils/tools.js';
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
const Page = () => {
  const [searchVal, setSearchVal] = useState(false)
  const columns = [
    { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
    { title: '闸孔编号', key: 'gatePoreCode', dataIndex: 'gatePoreCode', width: 150, ellipsis: true },
    { title: '操作人员', key: 'createUserName', dataIndex: 'createUserName', width: 200, ellipsis: true },
    {
      title: '操作时间', key: 'createTime', dataIndex: 'createTime', width: 140,
    },
    {
      title: '操作内容', key: 'opContent', dataIndex: 'opContent', width: 140,
    },
    { title: '设定开度(m)', key: 'setValue', dataIndex: 'setValue', width: 140},
    { title: '操作前开度(m)', key: 'beforeValue', dataIndex: 'beforeValue', width: 140},
    { title: 'ip', key: 'ipAddr', dataIndex: 'ipAddr', width: 140},
  ];

  
  const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
  const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.gcyx.czrz.page).find_noCode);
  
  const exportExcel = () => {
    let params = {
      ...searchVal,
    }
    httppost5(apiurl.gcyx.czrz.export, params).then(res => {
      exportFile(`操作日志.xlsx`,res.data)
  })
  }
  useEffect(() => {
    const params = {
      search: {
        ...searchVal,
      }
    };
    search(params)
  }, [searchVal])
  
  
  return (
    <>
      <div className='content-root clearFloat xybm' style={{paddingBottom:"0"}}>
        <div className='lf CrudAdcdTreeTableBox' style={{width:"100%",overflowY:"auto"}}>
          <Card className='nonebox'>
            <ToolBar
              setSearchVal={setSearchVal}
              exportFile1={exportExcel}
            />
          </Card>
          <div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
          <Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width , y: "calc( 100vh - 400px )"}}/>
          </div>
        </div>
      </div>
    </>
  );
}

export default Page;