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 { useSelector } from 'react-redux';
import ModalForm from './information/index';
import ToolBar from './toolbar';
import apiurl from '../../../service/apiurl';
import usePageTable from '../../../components/crud/usePageTable2';
import { createCrudService } from '../../../components/crud/_';
import {CrudOpRender_text} from '../../../components/crud/CrudOpRender';
import { httpget2 } from '../../../utils/request';
const Page = () => {
  const role = useSelector(state => state.auth.role);
  const editBtn = (role?.rule?.find(item => item.menuName == "查询"))?true:true;
  const viewBtn = (role?.rule?.find(item => item.menuName == "详情"))?true:true;
  const delBtn = (role?.rule?.find(item => item.menuName == "删除"))?true:true;

  const [open, setOpen] = useState(false)
  const [projectId, setProjectId] = useState('')
  const refModal = useRef();

 

  const columns = [
    { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
    { title: '预报方案名称', key: 'name', dataIndex: 'name', width: 140,align:"center", },
    { title: '类型', key: 'type', dataIndex: 'type', width: 140,align:"center",render:(v)=>v=='1'?'自动':'手动' },
    { title: '预报时间', key: 'forecastTm', dataIndex: 'forecastTm', width: 140,align:"center", },
    { title: '开始时间', key: 'startTm', dataIndex: 'startTm', width: 140,align:"center", },
    { title: '结束时间', key: 'endTm', dataIndex: 'endTm', width: 140,align:"center", },
    { title: '操作人', key: 'userId', dataIndex: 'userId', width: 140,align:"center", },
    { title: '方案制作时间', key: 'chtm', dataIndex: 'chtm', width: 140,align:"center", },
    {
      title: '操作', key: 'operation', width: 240, fixed: 'right',align: 'center',
      render: (value, row, index) => (<CrudOpRender_text del={delBtn} detail={viewBtn} command={(cmd) => () => command(cmd)(row)} />)
    },
  ];

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

  const command = (type) => async(params) => {
    if (type === 'save') {
      // refModal.current.showSave();
    } else if (type === 'edit') {
      // refModal.current.showEdit({ ...params });
    } else if (type === 'view') {
      // refModal.current.showView(params);
      setOpen(true)
      setProjectId(params.id)
    } else if (type === 'del') {
      const {code} = await httpget2(apiurl.fxdd_xyt.hsyb.ybfagl.del + `/${params.id}`)
      if(code===200){
        message.success('删除成功')
        refresh(
          {
            search:{
              'orderField':'chtm',
              'isAsc':false
            }
          }
        )
      }else{
        message.error('删除失败')
        refresh(
          {
            search:{
              'orderField':'chtm',
              'isAsc':false
            }
          }
        )
      }
    }
  }
 

  const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.fxdd_xyt.hsyb.ybfagl.page).find_noCode);

  useEffect(()=>{
    search({
      search:{
        'orderField':'chtm',
        'isAsc':false
      }
    })
  },[])

  return (
    <>
      <div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0"}}>
        <div className='lf CrudAdcdTreeTableBox' style={{ width: "100%" }}>
          <Card className='nonebox'>
            <ToolBar
              search={search}
              editBtn={editBtn}
            />
          </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>

      <Modal width={1500} wrapClassName='home_modal'  bodyStyle={{padding:0}}  title={null} closable={false} footer={null} open={open} onCancel={()=>setOpen(false)} destroyOnClose={true}>
        <ModalForm projectId={projectId} onCancel={()=>setOpen(false)}/>
      </Modal>
    </>
  );
}

export default Page;