import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
import BasicCrudModal from '../../../../../components/crud/BasicCrudModal';
import { Table, Card,Modal,Form,Input,Button,Row,Col,message } from 'antd';
import ModalForm from './form';
import ToolBar from './toolbar';
import { useSelector } from 'react-redux';
import apiurl from '../../../../../service/apiurl';
import usePageTable from '../../../../../components/crud/usePageTable2';
import { createCrudService } from '../../../../../components/crud/_';
import {CrudOpRender_text} from '../../../../../components/crud/CrudOpRender';
import "./index.less"
const Page = () => {
  const role = useSelector(state => state.auth.role);
  const editBtn = role?.rule?.find(item => item.menuName == "编辑")||true;
  const viewBtn = role?.rule?.find(item => item.menuName == "查看")||true;
  const delBtn = role?.rule?.find(item => item.menuName == "删除")||true;

  const refModal = useRef();
  const [searchVal, setSearchVal] = useState(false)
  const columns = [
    { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
    { title: '监测时间', key: 'tm', dataIndex: 'tm', align:"center", },
    { title: '测点编号', key: 'stationCode', dataIndex: 'stationCode', align:"center", },
    { title: 'X方向表面位移(mm)', key: 'x', dataIndex: 'x', align:"center", },
    { title: 'Y方向表面位移(mm)', key: 'y', dataIndex: 'y', align:"center", },
    { title: 'H方向表面位移(mm)', key: 'h', dataIndex: 'h', align:"center", },
    {
      title: '操作', key: 'operation', width: 240, fixed: 'right',align: 'center',
      render: (value, row, index) => (
        <CrudOpRender_text
        edit={editBtn ? true : false}
        del={delBtn ? true : false}
        view={viewBtn ? true : false}
        command={(cmd) => () => command(cmd)(row)} />)
    },
  ];

  
  const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);

  const command = (type) => (params) => {
    if (type === 'save') {
      refModal.current.showSave();
    } else if (type === 'edit') {
      refModal.current.showEdit({ ...params });
    } else if (type === 'view') {
      refModal.current.showView(params);
    } else if (type === 'del') {
      const url = apiurl.gcaqjc.sjtjcx.sjlr.wyjc.del + params.stationCode+'/'+params.tm
      refModal.current.onDeleteGet(url);
    }
  }
 

  const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.gcaqjc.sjtjcx.sjlr.wyjc.page).find_noCode);

  useEffect(()=>{
    const params = {
      search: {
        ...searchVal,
      }
    };
    search(params)
  }, [searchVal])
  
  
  return (
    <>
      <div className='lf CrudAdcdTreeTableBox' style={{ width: "100%" }}>
        <Card className='nonebox'>
          <ToolBar
            setSearchVal={setSearchVal}
            onSave={command('save')}
            role={role}
          />
        </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>
      <BasicCrudModal
        width={1000}
        ref={refModal}
        title="渗压监测记录"
        component={ModalForm}
        onCrudSuccess={refresh}
      />
    </>
  );
}

export default Page;