import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
import BasicCrudModal from '../../../../components/crud/BasicCrudModal';
import { Table, Card,Switch,Form,Input,Button,Row,Col,message } from 'antd';
import ModalForm from './form';
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 { httppost, httppost2 } from '../../../../utils/request';
const Page = () => {
  const typeObj = {
    1: "渗压监测",
    2: "渗流监测",
    3:"位移监测"
  }
  const levelObj = {
    1: "黄色",
    2:"红色"
  }

  const refModal = useRef();
  const [searchVal, setSearchVal] = useState(false)
  const columns = [
    { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
    { title: '预报任务名称', key: 'name', dataIndex: 'name', width: 140,align:"center", },
    { title: '预见期(小时)', key: 'forecastPeriod', dataIndex: 'forecastPeriod', width: 140,align:"center", },
    { title: '预热期(天)', key: 'forecastWarm', dataIndex: 'forecastWarm', width: 140,align:"center", },
    { title: '间隔(小时)', key: 'timeInterval', dataIndex: 'timeInterval', width: 140,align:"center", },
    { title: '状态', key: 'status', dataIndex: 'status', width: 140,align:"center",render:(v,row)=>
        <Switch
          size='default'
          checkedChildren='启用'
          unCheckedChildren='禁用'
          onChange={e => getChecked(e,row)}
          checked={v==='0'?true:false}
        />
    },
    { title: '创建日期', key: 'updateTm', dataIndex: 'updateTm', width: 140,align:"center", },
    { title: '创建人', key: 'userId', dataIndex: 'userId', width: 140,align:"center",render:(v)=>v?.split('_')?.[1] },
    {
      title: '操作', key: 'operation', width: 240, fixed: 'right',align: 'center',
      render: (value, row, index) => (<CrudOpRender_text edit={true} del={true} 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') {
      refModal.current.onDeleteGet(apiurl.fxdd_xyt.hsyb.hsybjs.zdgdyb.del + `/${params.id}`);
    }
  }
 

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

  useEffect(()=>{
    const params = {
      search: {
        ...searchVal,
        "orderField":"chtm",
        "isAsc":false
      }
    };
    search(params)
  }, [searchVal])


  const getChecked = async(checked,row)=>{
    const params = {
      ...row,
      status : checked?'0':'1'
    }
    const { code } = await httppost2(apiurl.fxdd_xyt.hsyb.hsybjs.zdgdyb.edit,params)
    if(code!==200){
      message.error('修改失败')
      return
    }
      refresh({search:{'orderField':'chtm','isAsc':false}})
      message.success('修改成功')

  }
  
  
  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}
              onSave={command('save')}
            />
          </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={500}
          style={{top:'150px'}}
          ref={refModal}
          title=""
          component={ModalForm}
          onCrudSuccess={()=>refresh({search:{'orderField':'chtm','isAsc':false}})}
        />
      </div>
    </>
  );
}

export default Page;